問題描述
在我的代碼中，我將圖像加載到畫布中.然后我需要調(diào)整大小、旋轉(zhuǎn)和拖動(dòng)它.我設(shè)法實(shí)現(xiàn)了拖動(dòng)和調(diào)整大小.
In my code I am loading an image in to a canvas. Then I need to resize, rotate and drag it. I managed to implement both dragging and resizing.
如何在此代碼上使用鼠標(biāo)實(shí)現(xiàn)旋轉(zhuǎn)(沿圖像中心).
How can I implement rotation(along the center of the image) using mouse on this code.
我的 HTML 頁面:
<!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; padding:10px;}
#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 startX;
var startY;
var isDown=false;
var pi2=Math.PI*2;
var resizerRadius=8;
var rr=resizerRadius*resizerRadius;
var draggingResizer={x:0,y:0};
var imageX=50;
var imageY=50;
var imageWidth,imageHeight,imageRight,imageBottom;
var draggingImage=false;
var startX;
var startY;
var img=new Image();
img.onload=function(){
imageWidth=img.width;
imageHeight=img.height;
imageRight=imageX+imageWidth;
imageBottom=imageY+imageHeight
draw(true,false);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";
function draw(withAnchors,withBorders){
// clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// draw the image
ctx.drawImage(img,0,0,img.width,img.height,imageX,imageY,imageWidth,imageHeight);
// optionally draw the draggable anchors
if(withAnchors){
drawDragAnchor(imageX,imageY);
drawDragAnchor(imageRight,imageY);
drawDragAnchor(imageRight,imageBottom);
drawDragAnchor(imageX,imageBottom);
}
// optionally draw the connecting anchor lines
if(withBorders){
ctx.beginPath();
ctx.moveTo(imageX,imageY);
ctx.lineTo(imageRight,imageY);
ctx.lineTo(imageRight,imageBottom);
ctx.lineTo(imageX,imageBottom);
ctx.closePath();
ctx.stroke();
}
}
function drawDragAnchor(x,y){
ctx.beginPath();
ctx.arc(x,y,resizerRadius,0,pi2,false);
ctx.closePath();
ctx.fill();
}
function anchorHitTest(x,y){
var dx,dy;
// top-left
dx=x-imageX;
dy=y-imageY;
if(dx*dx+dy*dy<=rr){ return(0); }
// top-right
dx=x-imageRight;
dy=y-imageY;
if(dx*dx+dy*dy<=rr){ return(1); }
// bottom-right
dx=x-imageRight;
dy=y-imageBottom;
if(dx*dx+dy*dy<=rr){ return(2); }
// bottom-left
dx=x-imageX;
dy=y-imageBottom;
if(dx*dx+dy*dy<=rr){ return(3); }
return(-1);
}
function hitImage(x,y){
return(x>imageX && x<imageX+imageWidth && y>imageY && y<imageY+imageHeight);
}
function handleMouseDown(e){
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
draggingResizer=anchorHitTest(startX,startY);
draggingImage= draggingResizer<0 && hitImage(startX,startY);
}
function handleMouseUp(e){
draggingResizer=-1;
draggingImage=false;
draw(true,false);
}
function handleMouseOut(e){
handleMouseUp(e);
}
function handleMouseMove(e){
if(draggingResizer>-1){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// resize the image
switch(draggingResizer){
case 0: //top-left
imageX=mouseX;
imageWidth=imageRight-mouseX;
imageY=mouseY;
imageHeight=imageBottom-mouseY;
break;
case 1: //top-right
imageY=mouseY;
imageWidth=mouseX-imageX;
imageHeight=imageBottom-mouseY;
break;
case 2: //bottom-right
imageWidth=mouseX-imageX;
imageHeight=mouseY-imageY;
break;
case 3: //bottom-left
imageX=mouseX;
imageWidth=imageRight-mouseX;
imageHeight=mouseY-imageY;
break;
}
// enforce minimum dimensions of 25x25
if(imageWidth<25){imageWidth=25;}
if(imageHeight<25){imageHeight=25;}
// set the image right and bottom
imageRight=imageX+imageWidth;
imageBottom=imageY+imageHeight;
// redraw the image with resizing anchors
draw(true,true);
}else if(draggingImage){
imageClick=false;
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// move the image by the amount of the latest drag
var dx=mouseX-startX;
var dy=mouseY-startY;
imageX+=dx;
imageY+=dy;
imageRight+=dx;
imageBottom+=dy;
// reset the startXY for next time
startX=mouseX;
startY=mouseY;
// redraw the image with border
draw(false,true);
}
}
$("#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>Resize the image using the 4 draggable corner anchors</p>
<p>You can also drag the image</p>
<canvas id="canvas" width=350 height=350></canvas>
</body>
</html>
推薦答案
以下是如何使用拖動(dòng)手柄旋轉(zhuǎn)圖像
mousedown 事件處理程序命中測(cè)試用戶是否開始拖動(dòng)旋轉(zhuǎn)手柄.
使用 context.isPointInPath(x,y) 可以更輕松地進(jìn)行命中測(cè)試，它測(cè)試指定的 [x,y] 坐標(biāo)是否在最近繪制的路徑內(nèi)(方便地，旋轉(zhuǎn)手柄實(shí)際上是路徑).
This hit-testing is made easier with context.isPointInPath(x,y) which tests whether a specified [x,y] coordinate is inside the most recently drawn path (Conveniently, the rotation-handle is actually a path).
所以 mousedown 像這樣激活拖動(dòng)手柄:
So mousedown activates the drag-handle like this:
- 計(jì)算當(dāng)前的 mouseX 和 mouseY.
- 重繪旋轉(zhuǎn)手柄(必需，因?yàn)?isPointInPath 只對(duì)最近的路徑進(jìn)行命中測(cè)試)
- 如果用戶確實(shí)點(diǎn)擊了旋轉(zhuǎn)手柄，則設(shè)置 isDown 標(biāo)志.
mousedown 代碼如下所示:
The mousedown code looks like this:
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
drawRotationHandle(false);
isDown=ctx.isPointInPath(mouseX,mouseY);
}
是的...我們可以簡單地對(duì)旋轉(zhuǎn)手柄末端的一個(gè)圓圈進(jìn)行命中測(cè)試，但是使用 isPointInPath 將允許您繪制任何您想要的花哨的旋轉(zhuǎn)手柄.
Yes...we could have simply hit-tested a circle on the end of the rotation-handle, but using isPointInPath will allow you to draw whatever fancy rotation handle you desire.
isPointInPath 還有另一個(gè)好處.當(dāng)包含路徑的上下文被旋轉(zhuǎn)時(shí)，isPointInPath 將為您測(cè)試旋轉(zhuǎn)路徑.這意味著您不必編寫數(shù)學(xué)代碼來取消旋轉(zhuǎn)鼠標(biāo)坐標(biāo)來進(jìn)行命中測(cè)試——它已經(jīng)為您完成了！
And isPointInPath has another nice benefit. When the context containing the path is rotated, isPointInPath will hit-test the rotated path for you. This means you don't have to code the math to unrotate the mouse coordinates to do the hit testing--it's done for you!
mousemove 處理程序以旋轉(zhuǎn)句柄指定的角度重繪可旋轉(zhuǎn)圖像:
- 如果未設(shè)置 isDown 標(biāo)志，則返回(用戶未拖動(dòng)旋轉(zhuǎn)手柄).
- 計(jì)算當(dāng)前的 mouseX 和 mouseY.
- 計(jì)算旋轉(zhuǎn)手柄的當(dāng)前角度.
- 以當(dāng)前角度重繪可旋轉(zhuǎn)圖像.
mousemove 代碼如下所示:
The mousemove code looks like this:
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();
}
使用上下文的變換方法在指定的旋轉(zhuǎn)處繪制圖像
function drawRect(){
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(r);
ctx.drawImage(img,0,0);
ctx.restore();
}
最后，mouseup 和 mouseout 處理程序通過清除 isDown 標(biāo)志來停止拖動(dòng)操作.
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>
這篇關(guān)于使用鼠標(biāo)旋轉(zhuǎn)畫布中的圖像的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！