有很多关于如何拖放对象的教程。但我找不到移动属于彼此的多个对象的东西。使用 KinectJS,您可以对多个对象进行分组,但我喜欢在不使用 KinectJS 的情况下使用这种方法。
我习惯拖放这个:http ://simonsarris.com/blog/510-making-html5-canvas-useful
它工作得很好,但是你怎么能做到一次拖放所有对象呢?
谢谢!
有很多关于如何拖放对象的教程。但我找不到移动属于彼此的多个对象的东西。使用 KinectJS,您可以对多个对象进行分组,但我喜欢在不使用 KinectJS 的情况下使用这种方法。
我习惯拖放这个:http ://simonsarris.com/blog/510-making-html5-canvas-useful
它工作得很好,但是你怎么能做到一次拖放所有对象呢?
谢谢!
拖动“分组”对象是一个大话题!
非常总结:
1. The user starts dragging the “group”.
2. Use canvas.context.translate(x,y) to move to the X/Y
where you want the group to be drawn.
3. Redraw each item in the group.
4. Keep track of how much the group has moved in total (sumTranslateX/sumTranslateY).
5. When the user drags again, repeat at step#1.
(remember to translate by the current drag length PLUS the sumTranslateXY)
这是代码和小提琴:http: //jsfiddle.net/m1erickson/VezHW/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var img = new Image();
img.onload = function(){
boundingBoxWidth=this.width/2+100; // add rocket+sun widths
boundingBoxHeight=this.height/2+100; // add rocket+sun heights
ctx.save();
drawBoundingBox();
drawRocket();
drawSun();
ctx.restore();
};
img.src = "http://images.christmastimeclipart.com/images/2/1271716593176_1788/img_1271716593176_17881.jpg";
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var canvasWidth=canvas.width;
var canvasHeight=canvas.height;
var startingX;
var startingY
var boundingBoxWidth;
var boundingBoxHeight;
var sumTranslateX=0;
var sumTranslateY=0;
var deltaX=0;
var deltaY=0;
var isDragging=false;
function handleMouseDown(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
if( mouseIsInBoundingBox() ){
startingX=canMouseX;
startingY=canMouseY;
isDragging=true;
}
}
function mouseIsInBoundingBox(){
return( canMouseX>sumTranslateX &&
canMouseX<boundingBoxWidth+sumTranslateX &&
canMouseY>sumTranslateY &&
canMouseY<boundingBoxHeight+sumTranslateY);
}
function handleMouseUp(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
// Put your mouseup stuff here
if(isDragging){
isDragging=false;
sumTranslateX+=deltaX;
sumTranslateY+=deltaY;
console.log(sumTranslateX+" / "+sumTranslateY);
}
}
function handleMouseOut(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
// Put your mouseOut stuff here
if(isDragging){
isDragging=false;
sumTranslateX+=deltaX;
sumTranslateY+=deltaY;
console.log(sumTranslateX+" / "+sumTranslateY);
}
}
function handleMouseMove(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
if(isDragging){
deltaX=canMouseX-startingX;
deltaY=canMouseY-startingY
ctx.save();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(sumTranslateX+deltaX,sumTranslateY+deltaY);
drawBoundingBox();
drawRocket();
drawSun();
ctx.restore();
}
}
function drawRocket(){
ctx.drawImage(img,0,0,img.width,img.height,0,100,img.width/2,img.height/2);
}
function drawSun(){
ctx.beginPath();
ctx.arc(img.width/2+50,50, 50, 0, 2 * Math.PI, false);
ctx.fillStyle = 'yellow';
ctx.fill();
}
function drawBoundingBox(){
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.strokeRect(0,0,boundingBoxWidth,boundingBoxHeight);
ctx.stroke();
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
}); // end $(function(){});
</script>
</head>
<body>
<br/><p>The canvas has 2 objects "grouped" together (rocket & sun)</p>
<p>Drag the "group"</p>
<canvas id="canvas" width=400 height=400></canvas>
</body>
</html>