从一个固定画布写入另一个浮动

Question

我有一个带有变换矩阵的 imageCanvas

Image = new image();
image.src = //stuff; 
imageContext.drawImage(Image, 0, 0);
var t = imageContext.currentTransform;

在另一个画布上绘制

context.drawImage(imageCanvas, 0, 0);

我在上面画线

context.moveTo(mousePos.X, mousePos.Y);
context.lineTo(currentPos.X, currentPos.Y);
context.stroke();

我将我的线条保存到对象“线条”的向量中。 我想将这两个图层加入到“图像”中，但此功能仅适用于平移，不适用于旋转和缩放。

var saveCanvas = document.createElement('canvas');
var saveContext = saveCanvas.getContext('2d');

saveCanvas.width = Image.width;
saveCanvas.height = Image.height;

saveContext.drawImage(Image,0,0);

saveContext.save();
var t = imageContext.currentTransform;
saveContext.setTransform(1,0,0,1,-t.e,-t.f);

for(var i = 0; i < lines.length; i++){
    saveContext.beginPath();
    saveContext.moveTo(lines[i].from.X, lines[i].from.Y);
    saveContext.lineTo(lines[i].to.X, lines[i].to.Y);
    saveContext.stroke();
}
saveContext.restore();

Image.src = saveCanvas.toDataURL();

如何修改'setTransform'的参数来解决问题？

Answer 1

只需使用其余的转换属性即可。

var t = imageContext.currentTransform;
saveContext.setTransform(
   t.a,
   t.b,
   t.c,
   t.d,
  -t.e,
  -t.f);