對HTML 5米的畫布

移動圖像在畫布我有幾個圖片對HTML 5米的畫布

var img1=new Image() 
img1.src= "imgsrc.jpg" 

var img2=new Image() 
img2.src= "imgsrc.jpg" 

var img3=new Image() 
img3.src= "imgsrc.jpg"

我然後添加圖像

ctx.drawImage(img1,20,20); 
ctx.drawImage(img2,40,40); 
ctx.drawImage(img3,80,80);

但是我無法單獨移動。它甚至有可能嗎？例如

img1.moveTo(30,30); 
img2.moveTo(50,50); 
img3.moveTo(60,60);

有沒有其他的選擇，如果這是不可能的。

來源

2013-02-14 Wesley Skeen

是！

有相當多的畫布庫允許您的畫布上的「保留模式」元素。

使用「保留模式」，您可以在上執行以下功能：畫布上的圖像/元素：移動，縮放，旋轉，傾斜，動畫，拖放，點擊測試等等！

三種流行的庫我可以保證是：FabricJS，KineticJS和EaselJs（也有其他好的庫太 - 不留任何人的！）

下面是使用KineticJS小提琴，顯示了可拖動圖像在畫布上：---

http://jsfiddle.net/m1erickson/bJuLe/

下面是一些代碼：

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     p{font-size:25px;} 
    </style> 
    </head> 
    <body> 
    <p>Darth Vader is a "retained" image -- try dragging him around !</p> 
    <div id="container"></div> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js"></script> 
    <script> 
     function drawImage(imageObj) { 
     var stage = new Kinetic.Stage({ 
      container: "container", 
      width: 500, 
      height: 400 
     }); 
     var layer = new Kinetic.Layer(); 

     // darth vader 
     var darthVaderImg = new Kinetic.Image({ 
      image: imageObj, 
      x: stage.getWidth()/2 - 200/2, 
      y: stage.getHeight()/2 - 137/2, 
      width: 200, 
      height: 137, 
      draggable: true 
     }); 

     // add cursor styling 
     darthVaderImg.on('mouseover', function() { 
      document.body.style.cursor = 'pointer'; 
     }); 
     darthVaderImg.on('mouseout', function() { 
      document.body.style.cursor = 'default'; 
     }); 

     layer.add(darthVaderImg); 
     stage.add(layer); 
     } 
     var imageObj = new Image(); 
     imageObj.onload = function() { 
     drawImage(this); 
     }; 
     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 

    </script> 
    </body> 
</html>

來源

2013-02-15 07:16:11 markE

一旦您在畫布上繪製某些東西，就無法以任何方式訪問\更改它。你能做的唯一一件事就是重新繪製在新位置（即從當前位置刪除，並在新的位置重新繪製）

如果你想實現它使用SVG

來源

2013-02-14 11:46:58 Stasel

這是令人震驚的。你能推薦任何可以實現這個目標的庫，或者我將不得不使用jquery – 2013-02-14 11:49:31

嘗試使用svg。 – Stasel 2013-02-14 11:52:11

對HTML 5米的畫布

回答

相關問題