以下是如何使用拖动手柄来旋转图像
mousedown 事件处理程序会测试用户是否开始拖动旋转手柄。
使用 context.isPointInPath(x,y) 可以更轻松地进行命中测试,它测试指定的 [x,y] 坐标是否位于最近绘制的路径内(方便的是,旋转手柄实际上是路径)。
所以 mousedown 会像这样激活拖动手柄:
- 计算当前的mouseX和mouseY。
- 重绘旋转手柄(必需的,因为 isPointInPath 仅命中测试最近的路径)
- 如果用户确实单击了旋转手柄,则设置 isDown 标志。
mousedown 代码如下所示:
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
drawRotationHandle(false);
isDown=ctx.isPointInPath(mouseX,mouseY);
}
是的...我们可以简单地对旋转手柄末端的一个圆圈进行命中测试,但是使用 isPointInPath 将允许您绘制您想要的任何花哨的旋转手柄。
isPointInPath 还有另一个好处。当包含路径的上下文旋转时,isPointInPath 将命中测试旋转路径为你。这意味着您不必编写数学代码来取消旋转鼠标坐标来进行命中测试 - 它已经为您完成了!
mousemove 处理程序以旋转句柄指定的角度重新绘制可旋转图像:
- 如果未设置 isDown 标志,则返回(用户没有拖动旋转手柄)。
- 计算当前的mouseX和mouseY。
- 计算旋转手柄的当前角度。
- 以当前角度重新绘制可旋转图像。
鼠标移动代码如下所示:
function handleMouseMove(e){
if(!isDown){return;}
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
var dx=mouseX-cx;
var dy=mouseY-cy;
r=Math.atan2(dy,dx);
draw();
}
使用上下文的变换方法以指定的旋转绘制图像
function drawRect(){
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(r);
ctx.drawImage(img,0,0);
ctx.restore();
}
最后,mouseup 和 mouseout 处理程序通过清除 isDown 标志来停止拖动操作。
function handleMouseUp(e){
isDown=false;
}
function handleMouseOut(e){
isDown=false;
}
这是代码和小提琴:http://jsfiddle.net/m1erickson/QqwKR/
<!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 canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isDown=false;
var cx=canvas.width/2;
var cy=canvas.height/2;
var w;
var h;
var r=0;
var img=new Image();
img.onload=function(){
w=img.width/2;
h=img.height/2;
draw();
}
img.src="facesSmall.png";
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
drawRotationHandle(true);
drawRect();
}
function drawRect(){
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(r);
ctx.drawImage(img,0,0,img.width,img.height,-w/2,-h/2,w,h);
ctx.restore();
}
function drawRotationHandle(withFill){
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(r);
ctx.beginPath();
ctx.moveTo(0,-1);
ctx.lineTo(w/2+20,-1);
ctx.lineTo(w/2+20,-7);
ctx.lineTo(w/2+30,-7);
ctx.lineTo(w/2+30,7);
ctx.lineTo(w/2+20,7);
ctx.lineTo(w/2+20,1);
ctx.lineTo(0,1);
ctx.closePath();
if(withFill){
ctx.fillStyle="blue";
ctx.fill();
}
ctx.restore();
}
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
drawRotationHandle(false);
isDown=ctx.isPointInPath(mouseX,mouseY);
console.log(isDown);
}
function handleMouseUp(e){
isDown=false;
}
function handleMouseOut(e){
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
var dx=mouseX-cx;
var dy=mouseY-cy;
r=Math.atan2(dy,dx);
draw();
}
$("#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>
<p>Rotate by dragging blue rotation handle</p>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>