确定从存储在一个数组中的坐标在画布上绘制的形状

我有startX，startY，endX，endY mousecoordinates使用我在画布上绘制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(); 
      } 
    }

现在我存储这些绘制的形状一阵列中的坐标并通过这些形状的阵列循环绘制清除画布上相同的形状（与每只小鼠坐标）。 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; 
    }

来源

2015-06-17 AkshayJ

环在哪里阵列？ – Juank

谁叫myLine（）？什么时候？谁调用drawLine（）？什么时候？这并不是很清楚你试图实现什么 – Juank

DrawLine在mouseup上被调用，它在canvas.myLine上绘制实际的形状，也被称为mouseup，正如我上面写的。 – AkshayJ

我继承人如何解决我的问题终于:)

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

来源

2015-06-17 06:48:24 AkshayJ

确定从存储在一个数组中的坐标在画布上绘制的形状

回答

相关问题