我是 HTML5 新手。 我必须实现这样一种功能，即我希望图像从外部放入 Canvas 内，然后 Canvas 内有可见的边界，图像可以从一个边界移动到另一个边界。它与以下链接中的相同， 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 原生拖放的很好的教程: 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);
});
关于javascript - 在 HTML5 Canvas 中的多个边界内拖放图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11411337/