在HTML5畫布中拖放多個邊界內的圖像

我是新的HTML5。我必須實現這樣的功能，我希望圖像從外部放入畫布內，然後在畫布內可見邊界，並且圖像可以從一個邊界移動到另一個邊界。它與以下鏈接中的相同， http://custom.case-mate.com/diy?bypassLandingPage=true 在HTML5畫布中拖放多個邊界內的圖像

由於在該網站中，用戶選擇圖案並將圖像拖入該圖像。然後他可以在邊界之間拖動圖像。請給出一些解決方案來實現這樣的功能。

以下是我已經試過了，

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     canvas {position:relative; 
     left:150%; 
     border: 10px solid #9C9898; 
     background-color: grey; 
     } 
    </style> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js"></script> 
    <script> 
     window.onload = function() { 
     var stage = new Kinetic.Stage({ 
      container: "container", 
      width: 300, 
      height: 400, 
     }); 

     var layer = new Kinetic.Layer(); 

     var redLine = new Kinetic.Line({ 
      points: [150, 0, 150, 400], 
      stroke: "white", 
      strokeWidth: 2, 
     }); 

     var blueLine = new Kinetic.Line({ 
      points: [150, 0, 150, 120, 300, 120], 
      stroke: "white", 
      strokeWidth: 2, 
     }); 

     var thirdLine = new Kinetic.Line({ 
      points: [300, 120, 150, 120, 150, 400], 
      stroke: "white", 
      strokeWidth: 2, 
     }); 

     var imageObj = new Image(); 
     imageObj.onload = function() { 
      var image = new Kinetic.Image({ 
      x: stage.getWidth()/2 - 50, 
      y: stage.getHeight()/2 - 60, 
      image: imageObj, 
      width: 100, 
      height: 120, 

      }); 
      image.draggable(true); 
      layer.add(image); 

      // add the layer to the stage 
      stage.add(layer); 
     }; 
     imageObj.src = "images/212.png"; 
     layer.add(redLine); 
     layer.add(blueLine); 
     layer.add(thirdLine); 
     stage.add(layer); 
}; 

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

來源

2012-07-10 MJQ

這個[popular demo]（http://html5demos.com/drag）包含了拖動的對象是鏈接（可能包含圖像）時所需的全部內容。在大多數瀏覽器（不是IE）中，這也適用於任何類型的可拖動對象（不僅是鏈接）。 – 2012-07-10 10:29:00

請發佈您迄今爲止嘗試過的代碼，並描述您遇到的具體問題。 – robertc 2012-07-10 11:40:51

我在畫布上繪製了線條，這些線條可以用作圖像拖動的邊界。除了我所嘗試過的，我還想要一些想法。如果您有任何想法實現上述URL中的確切功能，請點擊幫助！我想要一些想法開始。 – MJQ 2012-07-10 11:59:50

這裏有一個關於HTML5本地拖放一個很好的教程： http://www.html5rocks.com/en/tutorials/dnd/basics/

基本上你可以在HTML5與拖動申報的項目爲可拖動屬性

<div class="draggable" draggable="true">A</div> 
<div class="draggable" draggable="true">B</div>

...然後使用JavaScript來處理一些事件，如：

var items = document.querySelectorAll('.draggable'); 
[].forEach.call(items, function(item) { 
    item.addEventListener('dragstart', function(){ /*handle drag start*/ }, false); 
    item.addEventListener('dragenter', function(){ /*handle drag enter*/ }, false) 
    item.addEventListener('dragover', function(){ /*handle drag over*/ }, false); 
    item.addEventListener('dragleave', function(){ /*handle drag leave*/ }, false); 
    item.addEventListener('drop',  function(){ /*handle drop*/ }, false); 
    item.addEventListener('dragend', function(){ /*handle drag end*/ }, false); 
});

來源

2012-07-10 10:32:16

那麼我需要實現與上面給出的URL相同的功能。當用戶選擇一個模式時，它會出現在指定的區域。由於您可以看到該圖案包含用於拖放圖像的分區。在調整這些邊界內的圖像後，我必須將指定區域保存爲單個圖像（如打印屏幕）。所以，我應該做一個大的股利和選擇，使用指定的模式使用JavaScript在大div內製作新的小div！ – MJQ 2012-07-10 10:49:03

聽起來像一個計劃:) – 2012-07-10 13:40:44

在HTML5畫布中拖放多個邊界內的圖像

回答

相關問題