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

Question

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

3

我有两个点 (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();

但是没有成功。

谢谢。

- RaduGabor

当你说没有成功时，到底出了什么问题？ - Dan Prince

图像和线条不重叠，甚至旋转角度也不相同。 - RaduGabor

你能否在jsbin中重新制造出你的问题？ - Dan Prince

http://jsfiddle.net/36vfdx27/77/ - RaduGabor

超过两行的内容会导致图片混乱。 - RaduGabor

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dan Prince · Accepted Answer

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