在html5畫布上拖動圖像並調整其大小

我正在構建HTML5畫布圖像編輯器。將圖像上傳到畫布後，我需要拖動並在畫布上調整大小。我設法上傳一個圖像，並使其在畫布上可拖動。但是我需要在畫布上調整大小。提前致謝。在html5畫布上拖動圖像並調整其大小

var Img = new Image(); 
Img.src = file; 
Img.onload = function() { 
    context.drawImage(Img, 50, 0, 200, 200); 
} 
mouseMove = function (event){ 
if (down) 
{ 
context.clearRect(0,0,800,500); 
context.translate(0, -50); 
context.drawImage(Img, (event.clientX - offsetX), 
(event.clientY - offsetY), 200, 200); 
context.translate(0, 50); 
} 
} 
mouseUp = function() { 
    down = false; 
} 
mouseDown = function() { 
    down = true; 
} 
canvas.addEventListener('mousedown', mouseDown, false); 
canvas.addEventListener('mouseup', mouseUp, false); 
canvas.addEventListener('mousemove',mouseMove, false);

我試過動力學js，但它不適合用帆布。

來源

2013-09-30 Deepu S A

下面是示例代碼，允許您使用Canvas拖動和調整圖像大小。

調整大小

enter image description here

如何調整圖像以4個拖動錨

上的圖像的每個角落繪製可拖動的錨。
如果用戶mousedown的一個錨點，則開始拖動該錨點。
在mousemove處理程序中，使用拖動錨點的位置（下面的註釋）調整圖像的大小。
作爲mousemove中的最後一個動作，重新繪製調整後的圖像和4個新的錨點。
在mouseup上，停止錨點的拖動。

注於用於調整圖像大小的數學：

調整大小後的寬度是mouseX位置和對角的X.
調整大小後的高度之間的差值是mouseY的之間的差位置和對面角落裏的Y.

拖動

enter image description here

如何拖動圖像

如果用戶鼠標按下的圖像裏面，保存鼠標開始XY開始拖動。
在mousemove處理程序中，將圖像移動當前mouseXY減去開始的xY。
同樣在mousemove中，將startingXY重置爲當前mouseXY以準備繼續拖動。
在mouseup上，停止圖像的拖動。

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/LAS8L/

<!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>

另外：

西蒙薩里斯做了關於如何拖動和縮放的HTML畫布「元素」一個很好的教程。

http://simonsarris.com/blog/225-canvas-selecting-resizing-shape

來源

2013-09-30 19:05:02 markE

我試着用它，但不能讓它使用「context.DrawImage」繪畫圖像的工作。你可以通過編輯simson sarris代碼來幫助我繪製圖像而不是矩形。 –

我添加到我的答案與一些示例拖/調整大小的代碼。 – markE

非常感謝您的幫助。你總是非常有幫助。願上帝保佑你。 –

在html5畫布上拖動圖像並調整其大小

回答

相關問題