Question

我正在尝试在画布中放置一个html5图像。使用css transform属性对图像进行平移，旋转和缩放。主要问题是如何复制图片的属性并在画布上应用。

您可以尝试下面的jsfiddle链接：图像可以缩放，移动和旋转，绿框中显示的内容应与红色中的相同。

https://jsfiddle.net/q7y1py5f/3/ 即可。在这里，我可以移动和缩放图像，但是当旋转开始时，没有任何作用。这是让我烦恼的代码（在javascript jsfiddle中为58行）：

context.save();

context.translate(image.width / 2, image.height / 2);
context.rotate(angle * Math.PI/180);
context.translate(((-image.width) / 2), ((-image.height) / 2));

context.translate(-x, -y);
context.scale(scale, scale);

context.drawImage(image, 0, 0);

context.restore();

这里x和y是绿色容器左上角和图像左上角之间的差异。任何帮助将不胜感激。

我已经设法让每个属性单独工作，但是当它们组合在一起时它不起作用。当我只翻译和缩放图像并应用于画布上下文时，一切都很好，但是当我添加旋转时，图像不是它应该的位置。

我尝试了以下方法 - 使用角度计算元素的左上角以获得正确的值，然后使用它进行平移和旋转。

Answer 1

在函数 canvasCropping 中编写

var left = cropper.offset().left - img.offset().left, top = cropper.offset().top - img.offset().top,

但旋转和缩放会改变元素偏移量，因此您的翻译协调错误。将其更改为： var left = -(cropper.offset().left - transform.translate.x-initialOffset.left), top = -(cropper.offset().top -transform.translate.y-initialOffset.top),

initialOffset - 图像的初始偏移量。

drawRotatedImage 中的一些变化 ` var drawRotatedImage = function（context，image，x，y，angle，width，height，scale）{

    context.save();

    // Move registration point to the center of the canvas
    context.translate(x+image.width/2,y+image.height/2);
    context.rotate(angle* Math.PI / 180);// angle must be in radians
    context.scale(scale, scale);
    // Move registration point back to the top left corner of canvas
    context.translate((-image.width)/2, (-image.height)/2);

    context.drawImage(image, 0, 0);

    context.restore();
};

`

HTML 5 Canvas - 旋转，缩放，翻译和绘制图像

1 个答案: