確定從存儲在一個數組中的座標在畫布上繪製的形狀

我有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

確定從存儲在一個數組中的座標在畫布上繪製的形狀

回答

相關問題