Question

如何限制圆圈边界线？

我希望我的绘制线在超过最大长度（100px）时被切断，但线条在矩形内限制。我想我错过了一些明显但我无法理解的东西。

enter image description here

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

我创造了一个小提示来表明我的问题：

fiddle

Answer 1

当您将clamp函数传递给-MAX_LENGTH和MAX_LENGTH作为最小和最大边界时，它不会考虑与该线所在角度相关的任何内容。< / p>

例如，在你的图片中，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）的事实进行调整。

Answer 2

以这种方式：

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

示例代码和演示：http://jsfiddle.net/m1erickson/Zje8Y/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var isDown=false;
    var startX;
    var startY;

    draw(100,100);

    function draw(x,y){
        var cx=150;
        var cy=150;
        var r=50;
        var dx=x-cx;
        var dy=y-cy;
        var angle=Math.atan2(dy,dx);
        var xx=cx+r*Math.cos(angle);
        var yy=cy+r*Math.sin(angle);
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.arc(cx,cy,r,0,Math.PI*2);
        ctx.closePath();
        ctx.stroke()
        ctx.beginPath();
        ctx.arc(x,y,5,0,Math.PI*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,Math.PI*2);
        ctx.closePath();
        ctx.fill();
    }

    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      draw(mouseX,mouseY);
    }

    $("#canvas").mousemove(function(e){handleMouseMove(e);});


}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 3

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

首先使用直线的切线来计算角度。然后使用角度值查找您要查找的点的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;

画布 - 限制圆形边界中的线条

fiddle

3 个答案: