如何在不同方向多次绘制一张图像？答案

【问题标题】：How to draw one image multiple times in different direcitons?如何在不同方向多次绘制一张图像？
【发布时间】：2017-03-02 05:54:33
【问题描述】：

我有一个这样的数组，想法是输出不同方向的图像，并通过缩放在画布上垂直和水平翻转它们。

[{  
  "pos":{  
      "x":411,
      "y":401.5
  },
  "scale":{  
      "x":1,
      "y":1
  }
},{  
  "pos":{  
      "x":411,
      "y":271.59625
  },
  "scale":{  
      "x":-1,
      "y":1
  }
}]

问题是我正在缩放画布而不是图像，画布比我放置在其上的图像大几倍。

  images.forEach((image) => {
    // center borde köars innan loopen egentligen
    let pos = center(image.pos)
    cc.save()
    cc.scale(image.scale.x, image.scale.y)
    cc.drawImage(window.video, pos.x, pos.y)
    cc.restore()
  })

如何缩放名为 window.video 的图像而不是整个画布？

【问题讨论】：

标签： javascript canvas html5-canvas

【解决方案1】：

在画布上渲染一个缩放的图像。

function drawImage(image,x,y,scaleX,scaleY){
    ctx.setTransform(scaleX, 0, 0, scaleY, x, y); // set scale and translation
    ctx.drawImage(image,0,0);
}

// when done drawing images you need to reset the transformation back to default
ctx.setTransform(1,0,0,1,0,0); // set default transform

如果您希望图像翻转但仍绘制在相同的左上角位置，请使用

function drawImage(image, x, y, scaleX, scaleY){
    ctx.setTransform(scaleX, 0, 0, scaleY, x, y); // set scale and translation
    x = scaleX < 0 ? -image.width : 0; // move drawing position if flipped
    y = scaleY < 0 ? -image.height : 0;
    ctx.drawImage(image, x, y);
}

并围绕图像的中心进行绘制

function drawImage(image, x, y, scaleX, scaleY){  // x y define center
    ctx.setTransform(scaleX, 0, 0, scaleY, x, y); // set scale and translation
    ctx.drawImage(image, -image.width / 2, -image.height / 2);
}

【讨论】：

【解决方案2】：

编辑：如下所述，这不适用于负值...

drawImage 可以采用 2 个额外参数来调整图像大小，因此以下方法应该有效：

images.forEach((image) => {
  // center borde köars innan loopen
  let pos = center(image.pos)
  cc.save()
  cc.drawImage(window.video, pos.x, pos.y, window.video.width * image.scale.x, window.video.height * image.scale.y)
  cc.restore()
})

文档：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

【讨论】：

我试过了，但那些只适用于正数，似乎不适用于规模。我发现了这个问题，但不要再了解我如何使用这些答案stackoverflow.com/questions/29237305/…
如果您使用原始代码，但在 drawImage 中将宽度和高度指定为 window.video 的高度和宽度，这样可以吗？
是的，但我想要 dWidth 和 dHeight 的负值，所以我不能使用它们。 dWidth 和 dHeight 仅适用于正值。