javascript - 根据存储在数组中的坐标确定在 Canvas 上绘制的形状

Question

我有 startX、startY、endX、endY 鼠标坐标，我使用它在 Canvas 上绘制 3 个形状(直线、椭圆和矩形)。现在我将这些坐标(startX、startY、endX、endY)存储在一个数组中(用于每个绘制的形状)并在清除的 Canvas 上再次绘制。现在，问题是我如何根据存储在数组中的这些坐标来确定先前绘制的形状是圆形、直线还是矩形？

function drawLine(toX, toY, context,type) {


            if (type == "line") {
                context.strokeStyle = "#FF0000";
                context.beginPath();
                context.moveTo((startX), (startY));
                context.lineTo((toX), (toY));
                context.stroke();
            }
            else if (type == "circle") {
                context.strokeStyle = "#FF0000";
                context.beginPath();
                context.moveTo(startX, startY + (toY - startY) / 2);
                context.bezierCurveTo(startX, startY, toX, startY, toX, startY + (toY - startY) / 2);   
                context.bezierCurveTo(toX, toY, startX, toY, startX, startY + (toY - startY) / 2);
                context.closePath();
                context.stroke();
            }
            else if (type == "rect") {
                context.beginPath();
                context.rect(startX, startY, mouseX - startX, mouseY - startY);
                context.strokeStyle = '#FF0000';
                context.stroke();
            }   
    }

现在我将这些绘制的形状坐标存储在一个数组中，并通过循环遍历这些形状的数组(每个形状都有鼠标坐标)在已清除的 Canvas 上绘制相同的形状。 Onmouseup 事件将我的坐标推送到一个数组中，如下所示-

     var newLine = new myLine(startX, startY, endX, endY);
            myLines.push(newLine);

   function myLine(xStart, yStart, xEnd, yEnd) {
        this.xS = xStart;
        this.yS = yStart;
        this.xE = xEnd;
        this.yE = yEnd;
    }

Answer 1

这是我最终解决问题的方法:)

 var newLine = new myLine(startX, startY, endX, endY,type);
            myLines.push(newLine);

   function myLine(xStart, yStart, xEnd, yEnd,type) {
        this.xS = xStart;
        this.yS = yStart;
        this.xE = xEnd;
        this.yE = yEnd;
        this.type=type
    }

然后遍历数组

      for (i = 0; i < myLines.length; i++) {

             newxS =  myLines[i].xS ;
                newxE= myLines[i].xE ;

              newyS=  myLines[i].yS ;
                       newyE=  myLines[i].yE  ;

                           ctxtem.strokeStyle = "#FF0000";

                           if (myLines[i].type == "line") {
                               ctxtem.beginPath();
                               ctxtem.moveTo(newxS, newyS);
                               ctxtem.lineTo(newxE, newyE);
                               ctxtem.stroke();


                           }
                           else if (myLines[i].type == "circle") {
                               ctxtem.beginPath();
                               ctxtem.moveTo(newxS, newyS + (newyE - newyS) / 2);
                               ctxtem.bezierCurveTo(newxS, newyS, newxE, newyS, newxE, newyS + (newyE - newyS) / 2);
                               ctxtem.bezierCurveTo(newxE, newyE, newxS, newyE, newxS, newyS + (newyE - newyS) / 2);
                               ctxtem.closePath();
                               ctxtem.stroke();

                           }
                           else if (myLines[i].type == "rect") {
                               ctxtem.beginPath();
                               ctxtem.rect(newxS, newyS, newxE - newxS, newyE - newyS);
                               ctxtem.stroke();
                           }

                ctxtem.save();
}