在画布上画一条线
在画布上画一条线
提问于 2015-09-28 03:26:50
目前我有这样的代码：
sample.beginPath();
sample.moveTo(X1.x,Y1.x );
sample.lineTo(X2.x,Y2.y);
sample.stroke();
sample.beginPath();
sample.arc(X2.x, Y2.y, 4, 0, 2 * Math.PI, false);
sample.fill();
sample.lineWidth = 1;
sample.stroke();这将产生以下情况：
这会指向任何方向。
我想要的是：
注意：
1.There will only be one line, either Line A or B.
2.They will always point from left to right.
3. They are in 45 degrees.回答 1
Stack Overflow用户
回答已采纳
发布于 2015-09-28 06:52:48
看一看下面的数字：
点(x1，y1)是鼠标的起点。假设鼠标已经移动到右侧的(当鼠标向左移动时必须处理这个情况)，新的鼠标坐标将是(x2，y2)。然而，不想在(x1，y1)和(x2，y2)之间划线，因为这条线的斜率(角度)不是想要的。所以我们必须计算新点的坐标，，P，，站在我们的线上。注：，我假设这个点的x坐标等于新的鼠标-x坐标x2！
在这个假设下，借助一些基本的二维几何，我们得到：
a = x2 - x1
tan(alpha) = b / a => b = a * tan(alpha)
P.x = x2P.y坐标的值取决于鼠标是从起始位置将向上移动到，还是将向下移动到。
IF (y1 > y2)
P.y = y1 - b // Mouse has moved up (drawing shows this scenario)
ELSE
P.y = y1 + b // Mouse has moved down (not shown in the drawing)因此，我们有了一个新的点P，现在您可以简单地在(x1，y1)和P之间划一条线，您还必须处理一些特殊情况，例如，如果鼠标移动到起点的左边。
为了得到你的点P，你也应该插入你想要的角度(它可以是不同的45度，但它必须是一个正角-你可以导出公式，将工作良好的负角度，以及)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32815293
复制相关文章
相似问题
腾讯云开发者
