在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画布中拖放多个边界内的图像

回答

相关问题