0

我正在制作一个程序，用户可以在其中粗略地绘制一个房间，而不是他/她需要从墙壁中放入长度，然后我的程序在新的画布上对其进行详细绘制。我得到了所有的线条，但由于倾斜的线条，只有第一点和最后一点之间的最后一条线似乎不起作用。

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

以下是以下代码的结果：

在此处输入图像描述

    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 并从这些新点中绘制它，还是会出现同样的问题？

4

1 回答 1

0

这正是这样closePath做的。

打电话之前先打电话stroke()。

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

但是，在您的DrawNewLine函数中，不要忘记调用ktx.beginPath()以实例化新的子路径，或者ktx.stroke()在所有对DrawNewLine. 目前，您正在多次绘制第一个形状。

于 2019-09-16T09:26:50.200 回答