在 HTML5 画布中的多个边界内拖放图像答案

【问题标题】：Dragging and dropping images within multiple boundries in HTML5 canvas在 HTML5 画布中的多个边界内拖放图像
【发布时间】：2012-07-10 22:51:27
【问题描述】：

我是 HTML5 新手。我必须实现这样的功能，即我希望将图像从外部拖放到画布中，然后画布内有可见的边界，并且图像可以从一个边界移动到另一个边界。它与以下链接中的相同， http://custom.case-mate.com/diy?bypassLandingPage=true

在网站中，用户选择图案并将图像拖入其中。然后他可以在边界之间拖动图像。请提供一些解决方案来实现这样的功能。

这是我尝试过的，

<!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>

【问题讨论】：

这个popular demo 包含所有你需要的东西，如果拖动的对象是一个链接（它可能包含一个图像）。并不是说在大多数浏览器（不是 IE）中，这也适用于任何类型的可拖动对象（不仅是链接）。
请发布您目前尝试过的代码并描述您遇到的具体问题。
我在画布上画了线条，这些线条可以作为图像拖动的边界。除了我尝试过的以外，我想要一些想法。如果您对实现上述 URL 中的确切功能有任何想法。请帮助！我想开始一些想法。
但目前我们不知道您尝试了什么，因为您尚未发布代码。

标签： javascript html css

【解决方案1】：

这是一个关于 HTML5 原生拖放的不错的教程： http://www.html5rocks.com/en/tutorials/dnd/basics/

基本上，您可以在 HTML5 中使用 draggable 属性将项目声明为可拖动

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

【讨论】：

好吧，我需要实现与上述 URL 相同的功能。当用户选择一个图案时，它会出现在指定的区域。如您所见，该模式包含用于拖放图像的分区。在这些边界内调整图像后，我必须将指定区域保存为单个图像（如打印屏幕）。那么，我是否应该制作一个大 div 并在选择时使用具有指定模式的 javascript 在大 div 中制作新的小 div！