javascript - HTML 5 Canvas - 旋转、缩放、平移和绘制图像

Question

我正在尝试将 html5 图像放置在 Canvas 内。使用 css 变换属性对图像进行平移、旋转和缩放。主要问题是如何复制图像的属性并将它们应用到 Canvas 上。

您可以尝试下面的 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 是绿色容器的左上角和图像的左上角之间的差值。任何帮助将不胜感激。

我已经设法让每个属性单独工作，但是当将它们全部组合在一起时，它就不起作用了。当我仅平移和缩放图像并应用于 Canvas 上下文时，一切都很好，但是当我添加图像的旋转时，它并不在它应该在的位置。

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

Answer 1

在函数 canvasCropping 中编写

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

但是旋转和缩放会改变元素偏移，所以你得到了错误的平移坐标。将其更改为: var left = -(cropper.offset().left - transform.translate.x-initialOffset.left), 顶部 = -(cropper.offset().top -transform.translate.y-initialOffset.top),

initialOffset - 图像的初始偏移量。

以及drawRotatedImage中的一些更改 ` var drawRotatedImage = 函数(上下文、图像、x、y、 Angular 、宽度、高度、比例){

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

`