在HTML5画布中拖放多个边界内的图像
我是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>
这里有一个关于HTML5原生Drag'n'drop的好教程：http://www.html5rocks.com/en/tutorials/dnd/basics/
基本上你可以用draggable属性在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);
});
上一篇: Dragging and dropping images within multiple boundries in HTML5 canvas