如何动态地在第一个点和最后一个点之间画一条线

Question

我正在制作一个程序，用户可以在其中粗略地绘制一个房间，而不是 he/she 需要输入从墙壁算起的长度，然后我的程序会在一个新的 canvas。我让所有的线都能工作，但只有第一点和最后一点之间的最后一行似乎因为斜线而不起作用。

我已经尝试了一些代码来创建一个新的终点，这样它就在起点的正下方，但它不会画一条线。

这是以下代码的结果：

    if(CheckInput())
    {
        if(confirm("U staat op het punt om de tekening te genereren, de waardes en de tekening zullen hierna niet meer aanpasbaar zijn."))
        {

            document.getElementById("BtnClearCAll").style.visibility = "hidden";

            PointAX = PuntArrayScetch[0].X;
            PointAY = PuntArrayScetch[0].Y;


            for(var i=0;i<PointCount;i++)
            {
                if(PuntArrayScetch[i].Y == PuntArrayScetch[(i+1)].Y)
                {
                    //alert("Y is gelijk");
                    PointBY = PointAY;
                    if((PuntArrayScetch[i].X - PuntArrayScetch[(i+1)].X) < 0)
                    {
                        //alert("Lijn -> rechts");
                        PointBX = (PointAX + parseInt(document.getElementById("LineBox"+i).value));
                    }
                    else if((PuntArrayScetch[i].X - PuntArrayScetch[(i+1)].X) > 0)
                    {
                        //alert("Lijn -> Links");
                        PointBX = (PointAX - parseInt(document.getElementById("LineBox"+i).value));
                    }
                    DrawNewLine(i);
                }
                else if(PuntArrayScetch[i].X == PuntArrayScetch[(i+1)].X)
                {
                    //alert("X is gelijk");
                    PointBX = PointAX;
                    if((PuntArrayScetch[i].Y - PuntArrayScetch[(i+1)].Y) < 0)
                    {
                        PointBY = (PointBY + parseInt(document.getElementById("LineBox"+i).value));
                        //alert("Lijn -> Benee");
                    }
                    else if((PuntArrayScetch[i].Y - PuntArrayScetch[(i+1)].Y) > 0)
                    {
                        PointBY = (PointBY - parseInt(document.getElementById("LineBox"+i).value));
                        //alert("Lijn -> Bove");
                    }
                    DrawNewLine(i);
                }           

            }
        }
    }


function DrawNewLine(i)
{
    var axn = PointAX;
    var ayn = PointAY;
    var bxn = PointBX;
    var byn = PointBY;


if((PuntArrayScetch[0].X == PuntArrayScetch[i].X) && (PuntArrayScetch[0].Y == PuntArrayScetch[i].Y) && i > 0)
{
    alert("Beep Boop I'm a Robot");
    bxn = PuntArrayScetch[0].X;
    byn = ayn;

}   
    ktx.lineWidth = 3;
    //ktx.lineJoin='miter';

    ktx.moveTo(axn,ayn); //beweeg vanaf punt A
    ktx.lineTo(bxn, byn); //beweeg naar het punt B
    ktx.stroke(); 

    PointAX = bxn;
    PointAY = byn;

}

我希望在第一个点和终点之间有一条线，但线就是画不出来。我该如何解决这个问题？我是否需要为新点制作另一个 PointArray 并从这些新点绘制它，还是会出现同样的问题？

Answer 1

这正是 closePath 所做的。

在调用之前先调用它 stroke()。

ktx.moveTo(axn,ayn);
ktx.lineTo(bxn, byn);
ktx.closePath(); // lineTo first point
ktx.stroke();

但是在你的DrawNewLine函数中，不要忘记调用ktx.beginPath()来实例化一个新的子路径，或者在所有对[=13的调用之后只调用一次ktx.stroke() =].目前，您多次在其自身上绘制第一个形状。

如何动态地在第一个点和最后一个点之间画一条线

How can I draw a ine between the first and last point dynamically

javascript

canvas

line-drawing