Question

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

[{  
  "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，而不是整个画布？

Answer 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);
}

Answer 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

如何在不同的方向上多次绘制一幅图像？

2 个答案: