Javascript 画布-限制圆边界中的直线

如何限制圆边界中的直线？

我想我的画线被切断时，它超过了最大长度（100px），但线一直限制在一个矩形内。 我想我遗漏了一些明显的东西，但我想不出来

var midX = canvas.width/2,
    midY = canvas.height/2,
    x = (mouseCurrent.x - midX),
    y = (mouseCurrent.y - midY),
    maxX = midX+clamp(x,-MAX_LENGTH,MAX_LENGTH),
    maxY = midY+clamp(y,-MAX_LENGTH,MAX_LENGTH);
ctx.moveTo(midX, midY);
ctx.lineTo(maxX, maxY);

我制作了一把小提琴来显示我的问题：

---

当您将

-MAX_LENGTH

和

MAX_LENGTH

作为最小和最大边界传递时，您的

夹紧

功能不会考虑与直线所处角度相关的任何内容

例如，在您的图片中，y值将被钳制为

-MAX_LENGTH

，这显然从中间延伸到圆的最底点，而x值将被钳制为

MAX_LENGTH

，延伸到圆的最右点

您应该做的是计算从鼠标位置产生的角度，并使用该角度的正弦和余弦来确定坐标

---

你会想要这样的东西：

var x = (mouseCurrent.x - midX),
    y = (mouseCurrent.y - midY);

var angleInRadians = Math.atan2(x - midX, y - midY);
var realX = Math.cos(angleInRadians);
var realY = Math.sin(angleInRadians);

然后，从

realX

和

realY

值，您应该能够创建行。你可能需要稍微调整一下。我试图根据原点不在（0，0）的事实进行调整。

这里有一种方法：

• 获取鼠标到圆中心点的角度
• 使用三角学以计算的角度获取半径距离处的点
• 从中心点到圆周上的计算点绘制一条线

示例代码和演示：

正文{背景色：象牙；}
#画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var isDown=假；
var-startX；
var startY；
抽签（100100）；
函数图（x，y）{
var-cx=150；
var-cy=150；
var r=50；
var dx=x-cx；
var-dy=y-cy；
变量角度=数学常数2（dy，dx）；
var xx=cx+r*数学cos（角度）；
var yy=cy+r*Math.sin（角度）；
clearRect（0,0，canvas.width，canvas.height）；
ctx.beginPath（）；
弧（cx，cy，r，0，数学π*2）；
ctx.closePath（）；
ctx.stroke（）
ctx.beginPath（）；
弧（x，y，5，0，数学π*2）；
ctx.closePath（）；
ctx.fill（）；
ctx.beginPath（）；
ctx.moveTo（cx，cy）；
ctx.lineTo（xx，yy）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.arc（xx，yy，5,0，数学π*2）；
ctx.closePath（）；
ctx.fill（）；
}
功能手柄移动（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
draw（mouseX，mouseY）；
}
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
}); // end$（函数（）{}）；

您可以使用基本三角学计算角度，并可以找到与直线和圆相交的点

首先使用直线的切线来计算角度。然后使用“角度”值查找要查找的点的x和y坐标。代码如下：

angle = Math.atan2(mouseCurrent.y - midY, mouseCurrent.x - midX); 
maxY = midY + Math.sin(angle) * MAX_LENGTH;
maxX = midX + Math.cos(angle) * MAX_LENGTH;

---

好吧，看起来好像当前边界正在调整为直径长度的平方，看，知道我做错了什么：）谢谢。想用代码解释吗？一个非常优雅干净的解决方案。我喜欢。

angle = Math.atan2(mouseCurrent.y - midY, mouseCurrent.x - midX); 
maxY = midY + Math.sin(angle) * MAX_LENGTH;
maxX = midX + Math.cos(angle) * MAX_LENGTH;