使用easelJs或KineticJs創建動態矩形/框

您好我正在尋找使用JavaScript製作平面圖編輯器（類似MsPaint）。我已入圍EaselJS或KinetiJS作爲我的首選庫。使用easelJs或KineticJs創建動態矩形/框

我想知道如何用創建一個動態矩形框/行與這些庫。我打算通過單擊鼠標並拖動它來繪製一個矩形（同時鼠標按鈕保持按下狀態）。因此，矩形的大小將取決於鼠標拖動的距離。

任何幫助將不勝感激。如果任何人覺得像fabrisJs或paperJs將是更好的替代方案，那麼我也開放這些庫中的解決方案。

2012-12-06 user1517108

好吧......通過試驗和錯誤和大量的谷歌搜索和重用網絡代碼我得到了KineticJs的答案。

繼承人的完整的解決方案：

<html> 
    <head> 
     <script> 
      window.onload = function() { 
       layer = new Kinetic.Layer(); 
       stage = new Kinetic.Stage({ 
        container: "container", 
        width: 320, 
        height: 320 
       }); 

       background = new Kinetic.Rect({ 
        x: 0, 
        y: 0, 
        width: stage.getWidth(), 
        height: stage.getHeight(), 
        fill: "white" 
       }); 


       layer.add(background); 
       stage.add(layer); 

       moving = false; 

       stage.on("mousedown", function(){ 
        if (moving){ 
         moving = false;layer.draw(); 
        } else { 
         var mousePos = stage.getMousePosition(); 
         rect= new Kinetic.Rect({ 
     x: 22, 
     y: 7, 
     width: 0, 
     height: 0, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 4 
         }); 
         layer.add(rect); 
         //start point and end point are the same 
         rect.setX(mousePos.x); 
         rect.setY(mousePos.y); 
         rect.setWidth(0); 
         rect.setHeight(0); 


         moving = true;  
         layer.drawScene();    
        } 

       }); 

       stage.on("mousemove", function(){ 
        if (moving) { 
         var mousePos = stage.getMousePosition(); 
         var x = mousePos.x; 
         var y = mousePos.y; 
         rect.setWidth(mousePos.x-rect.getX()); 
         rect.setHeight(mousePos.y-rect.getY()); 
         moving = true; 
         layer.drawScene(); 
        } 
       }); 

       stage.on("mouseup", function(){ 
        moving = false; 
       }); 

      }; 
     </script> 
    </head> 
    <body> 
     <div id="container" ></div> 
    </body> 
</html>

來源

2012-12-06 07:53:57 user1517108

建議，如果你要調整大小的矩形之後用小圓圈，並在鼠標的角落顯示它，然後使用draggble功能的圈子來調整矩形。 – Jonke

是的Jonke ...這是一個聰明的想法。將納入它。謝謝 – user1517108

使用easelJs或KineticJs創建動態矩形/框

回答

相關問題