drawImageToRect 方法

void drawImageToRect(
  1. CanvasImageSource source,
  2. Rectangle<num> destRect,
  3. {Rectangle<num>? sourceRect}
)

将图像从 CanvasImageSource 绘制到本画布的指定区域。

图像将被绘制到本画布上由 destRect 定义的区域内。 sourceRect 定义了源图像将被绘制到的区域。如果不提供 sourceRect，则将从 source 绘制整个矩形图像到该上下文中。

如果图像大于画布允许的大小，图像将被裁剪以适应可用空间。

CanvasElement canvas = new CanvasElement(width: 600, height: 600);
CanvasRenderingContext2D ctx = canvas.context2D;
ImageElement img = document.query('img');
img.width = 100;
img.height = 100;

// Scale the image to 20x20.
ctx.drawImageToRect(img, new Rectangle(50, 50, 20, 20));

VideoElement video = document.query('video');
video.width = 100;
video.height = 100;
// Take the middle 20x20 pixels from the video and stretch them.
ctx.drawImageToRect(video, new Rectangle(50, 50, 100, 100),
    sourceRect: new Rectangle(40, 40, 20, 20));

// Draw the top 100x20 pixels from the otherCanvas.
CanvasElement otherCanvas = document.query('canvas');
ctx.drawImageToRect(otherCanvas, new Rectangle(0, 0, 100, 20),
    sourceRect: new Rectangle(0, 0, 100, 20));

另请参阅

实现

void drawImageToRect(CanvasImageSource source, Rectangle destRect,
    {Rectangle? sourceRect}) {
  if (sourceRect == null) {
    drawImageScaled(
        source, destRect.left, destRect.top, destRect.width, destRect.height);
  } else {
    drawImageScaledFromSource(
        source,
        sourceRect.left,
        sourceRect.top,
        sourceRect.width,
        sourceRect.height,
        destRect.left,
        destRect.top,
        destRect.width,
        destRect.height);
  }
}