我有一张像小 map 一样的图像。我想做一些像
1.像http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-an-image-tutorial/一样拖动
2.在图像上绘制一些对象(如:线，点)(图像拖动时附着在图像上的对象)
我尝试做一些事情，比如使用http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-label-tutorial/ ，ETC。但是当我拖动图像时它没有附加图像。
最佳答案
我看到您正在查看 KineticJS 示例。
这是一个示例，说明如何在 KineticJS 中制作 map 以及点和线。使用这个库可能更容易上手，而不是单独学习在 Canvas 中拖动的复杂性。
在此示例代码中，请务必将 URL 放入您的 map 而不是 img1.src="yourMap.jpg"。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {margin: 0px;padding: 0px;}
canvas{border:1px solid red;}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
var img1=new Image();
img1.onload=function(){
createDragMap();
}
img1.src="yourMap.jpg";
function createDragMap(){
var map = new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
// draw the map and a border around the map
context.drawImage(img1,0,0);
context.beginPath();
context.rect(0,0,img1.width,img1.height);
context.stroke(this);
// add your points to the map here
// for example...
context.rect(23,67, 4,4);
context.rect(153,87, 4,4);
context.moveTo(23,67);
context.lineTo(153,87);
// fill and stroke must be done last!
canvas.fillStroke(this);
},
width: img1.width,
height: img1.height,
stroke:"blue",
strokeWidth: 2,
draggable:true
});
layer.add(map);
stage.add(layer);
}
</script>
</body>
</html>
关于jquery - 在图像上绘制对象并拖动图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15746666/