Question

这个问题与另一个问题有关：https://stackoverflow.com/questions/26948677/translate-coordinates-to-its-equivalent-in-scale1没有人给出回应，但它不再重要，因为它已经解决了，至少那部分。我得到了正确的x和y值。

我告诉你情况，我正在开发的应用程序允许用户创建一个带有6个不同背景的图像，其中有趣的角色没有脸，这样用户就可以放置他/她的脸部照片。要做到这一点，他们可以拖动，捏缩放和旋转图像。拖动和捏合缩放受到控制但是当图像旋转时，我无法匹配精确坐标中的图像。图像总是有点上升。

一个例子，我得到的值是：

x：30， y：80，比例：0.5， deg：40。

所以，当我在画布中绘制旋转的图像时，y似乎会根据度数略微上升。学位越低，上学就越少。

我正在使用此功能绘制旋转的图像：

var TO_RADIANS = Math.PI / 180;
var drawRotatedImage = function (context, image, x, y, angle) {
    context.save();

    context.translate(x, y);

    context.rotate(angle * TO_RADIANS);

    context.drawImage(image, -(image.width / 2), -(image.height / 2));

    context.restore();

}

PD：要指出它，如果我不旋转图像，它会在正确的位置完美匹配。

如何为旋转的图像获取正确的x和y值？

在画布中以正确的坐标（x，y）旋转图像

0 个答案: