在画布上绘制带有 2 个点的图像

Question

我必须点 (x1, x2, y1, y2)。如何在画布上绘制一个图像（它就像一个宽度为 10 和高度为 100 的矩形），起点为 x1，y1 和旋转度由这两点之间的线的斜率决定？

就像我想用图像重叠这条线：

ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();

我试过这样：

slope = (y2 - y1) / (x2 - x1)
ctx.save();
ctx.rotate(-Math.atan(slope));
ctx.drawImage(image, x1, y1);
ctx.restore();

但没有成功。

谢谢。

Answer 1

ctx.rotate 将围绕画布原点旋转上下文。

为了围绕形状的拐角旋转，您需要将上下文翻译到该点。

var slope = (pt.y1 - pt.y2) / (pt.x1 - pt.x2);
ctx.save();
ctx.translate(pt.x1, pt.y1);
ctx.rotate(Math.atan(slope));
// we've already moved to here, so we can draw at 0, 0
ctx.drawImage(image, 0, 0);
ctx.restore();

这仅适用于正斜率。如果斜率为负，也可以通过反转旋转来解释负斜率。

var slopeIsNegative = slope < 0;
var offsetAngle = slopeIsNegative ? Math.PI : 0;
ctx.rotate(Math.atan(slope) + offsetAngle);