Question

我正在用x，y点绘制两条线。然后我从第二行的开始和结束处获取弧度。

当我尝试使用弧度推断第二条线以使其更长时，我无法创建一条直线，因为我想移动到固定的x位置

，其中

var radian=Math.atan2(endY-startY,endX-startX);
var y=endY+100*Math.sin(radian);

pen.lineTo(200,y);  // < problem

移动到固定位置就像添加一个倾斜效果似乎。我如何正确地继续排队但是停在＆＃39; x＆＃39; 200

Answer 1

您可以使用斜率截距公式将您的线扩展到所需的X：

function extendToX(desiredX,x0,y0,x1,y1){
    var m=(y0-y1)/(x0-x1);
    var b=y1-(m*x1);
    return(m*desiredX+b);
}

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

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="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 x0=25;
    var y0=50;
    var x1=150;
    var y1=150;

    ctx.beginPath();
    ctx.moveTo(x0,y0);
    ctx.lineTo(x1,y1);
    ctx.strokeStyle='blue';
    ctx.stroke();

    var newY=extendToX(200,x0,y0,x1,y1);

    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(200,newY);
    ctx.strokeStyle='red';
    ctx.stroke();

    function extendToX(desiredX,x0,y0,x1,y1){
        var m=(y0-y1)/(x0-x1);
        var b=y1-(m*x1);
        return(m*desiredX+b);
    }


}); // end $(function(){});
</script>
</head>
<body>
    <h4>Use slope-intercept formula to extend line</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

画布：继续lineTo路径，但x固定

1 个答案: