6角落圖像的大小調整用帆布

Question

有，我有2個問題：

1. 的topcenter，bottomcenter，左，右都沒有得到cliked
2. 我沒有得到邏輯改變的大小圖片。
   1. 角錨應成比例地調整大小（高度和寬度，兩者都應該減小由相同的速率/增加。
   2. 非角的那些應該調整相應像在下面的圖片。

這是我預期的執行：

我有創建了一個畫布，我可以在其上繪製圖像並調整大小。這是我的HTML（很簡單：P）：

<canvas width="700px" height="700px" id="canvas"></canvas> 

而這裏的腳本：

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

//var canvasOffset = $("#canvas").offset(); 
var offsetX = canvas.offsetLeft; 
var offsetY = canvas.offsetTop; 

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 = 'img/' + localStorage["bgimgname"]; 


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); //topleft 
     drawDragAnchor((imageRight+imageX)/2, imageY); //topcenter 
     drawDragAnchor(imageRight, imageY); //topright 

     drawDragAnchor(imageX, (imageBottom+imageY)/2); //left 
     drawDragAnchor(imageRight, (imageBottom+imageY)/2); //right 

     drawDragAnchor(imageX, imageBottom); //bottomleft 
     drawDragAnchor((imageRight+imageX)/2, imageBottom); //bottom center 
     drawDragAnchor(imageRight, imageBottom); //bottomright 
    } 

    // 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-center 
    dx = (imageRight+imageX)/2 
    dy = imageY 
    if (dx/2 * dx/2 + dy * dy <= rr) { 
     return (1); 
    } 

    // top-right 
    dx = x - imageRight; 
    dy = y - imageY; 
    if (dx * dx + dy * dy <= rr) { 
     return (2); 
    } 

    //left 
    dx = imageX; 
    dy = (imageBottom+imageY)/2 
    if (dx * dx + dy/2 * dy/2 <= rr) { 
     return (3); 
    } 

    //right 
    dx = imageRight; 
    dy = (imageBottom+imageY)/2 
    if (dx * dx + dy/2 * dy/2 <= rr) { 
     return (4); 
    } 

    // bottom-right 
    dx = x - imageRight; 
    dy = y - imageBottom; 
    if (dx * dx + dy * dy <= rr) { 
     return (5); 
    } 

    // bottom-center 
    dx = (imageRight+imageX)/2; 
    dy = imageBottom; 
    if (dx/2 * dx/2 + dy * dy <= rr) { 
     return (6); 
    } 

    // bottom-left 
    dx = x - imageX; 
    dy = y - imageBottom; 
    if (dx * dx + dy * dy <= rr) { 
     return (7); 
    } 


    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) { 
    e = window.event; 
    if (draggingResizer > -1) { 

     mouseX = parseInt(e.clientX - offsetX); 
     mouseY = parseInt(e.clientY - offsetY); 

     // resize the image 
     switch (draggingResizer) { 
      case 0: 
       //top-left 
       console.log("topleft"); 
       break; 
      case 1: 
       //top-center 
       console.log("topcenter"); 
       break; 
      case 2: 
       //top-right 
       console.log("topright"); 
       break; 
      case 3: 
       //left 
       console.log("left"); 
       break; 
      case 4: 
       //right 
       console.log("right"); 
       break; 
      case 5: 
       //bottom-left 
       console.log("bottomleft"); 
       break; 
      case 6: 
       //center 
       console.log("bottomcenter"); 
       break; 
      case 7: 
       //bottom-right 
       console.log("bottomright"); 
       break; 
     } 

     if(imageWidth<25){imageWidth=25;} 
     if(imageHeight<25){imageHeight=25;} 
     if(imageWidth>700){imageWidth=700;} 
     if(imageHeight>700){imageHeight=700;} 
     // set the image right and bottom 
     imageRight = imageX + imageWidth; 
     imageBottom = imageY + imageHeight; 

     // redraw the image with resizing anchors 
     draw(true, true); 

    } 


} 

canvas.addEventListener('mousedown', handleMouseDown); 
canvas.addEventListener('mousemove', handleMouseMove); 
canvas.addEventListener('mouseup', handleMouseUp); 
canvas.addEventListener('mouseout', handleMouseOut); 

輸出是這樣的：Output。

請你解釋一下爲什麼非角度錨點沒有被點擊，請告訴我按照上面所述和圖片中顯示的錨點調整圖片大小的邏輯。請幫忙。 :)

**注意：** jQuery不允許。

Answer 1

見我的答案在這裏：Change origin of canvas drawn image

我重複下面的答案也萬一有人網上搜尋到這個答案，而不是其他。

根據需要調整大小的一種有效方法是固定對面（s）位置並讓選定邊浮動並帶有拖動邊或邊角。

這種方法的一個好處是你並不需要錨點！

這是操作系統窗口的工作方式。

調整窗口大小時，您沒有可見的錨點進行拖動，只需拖動窗口的一側或一角。

甲演示：http://jsfiddle.net/m1erickson/keZ82/

• 左：原始圖像，
• 中間：從左下角&保持高寬比調整大小（右上角保持固定）
• 右：從底部調整&圖像僅在y方向縮放（圖像頂部保持固定）

注：該演示和實例顯示錨但他們是嚴格的化妝品。您可以關閉錨點顯示，並通過拖動圖像的邊或角來調整圖像大小。

示例代碼：

<!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 $canvas=$("#canvas"); 
    var canvasOffset=$canvas.offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var isDown=false; 

    var iW; 
    var iH; 
    var iLeft=50; 
    var iTop=50; 
    var iRight,iBottom,iOrientation; 

    var img=new Image(); 
    img.onload=function(){ 
     iW=img.width; 
     iH=img.height; 
     iRight=iLeft+iW; 
     iBottom=iTop+iH; 
     iOrientation=(iW>=iH)?"Wide":"Tall"; 
     draw(true); 
    } 
    img.src="facesSmall.png"; 

    var border=10; 
    var isLeft=false; 
    var isRight=false; 
    var isTop=false; 
    var isBottom=false; 
    var iAnchor; 

    canvas.onmousedown=handleMousedown; 
    canvas.onmousemove=handleMousemove; 
    canvas.onmouseup=handleMouseup; 
    canvas.onmouseout=handleMouseup; 


    function hitResizeAnchor(x,y){ 

     // which borders are under the mouse 
     isLeft=(x>iLeft && x<iLeft+border); 
     isRight=(x<iRight && x>iRight-border); 
     isTop=(y>iTop && y<iTop+border); 
     isBottom=(y<iBottom && y>iBottom-border); 

     // return the appropriate anchor 
     if(isTop && isLeft){ return(iOrientation+"TL"); } 
     if(isTop && isRight){ return(iOrientation+"TR"); } 
     if(isBottom && isLeft){ return(iOrientation+"BL"); } 
     if(isBottom && isRight){ return(iOrientation+"BR"); } 
     if(isTop){ return("T"); } 
     if(isRight){ return("R"); } 
     if(isBottom){ return("B"); } 
     if(isLeft){ return("L"); } 
     return(null); 
    } 

    var resizeFunctions={ 

     T: function(x,y){ iTop=y; }, 
     R: function(x,y){ iRight=x; }, 
     B: function(x,y){ iBottom=y; }, 
     L: function(x,y){ iLeft=x; }, 

     WideTR: function(x,y){ 
      iRight=x; 
      iTop=iBottom-(iH*(iRight-iLeft)/iW); 
     }, 
     TallTR: function(x,y){ 
      iTop=y; 
      iRight=iLeft+(iW*(iBottom-iTop)/iH); 
     }, 

     WideBR: function(x,y){ 
      iRight=x; 
      iBottom=iTop+(iH*(iRight-iLeft)/iW); 
     }, 
     TallBR: function(x,y){ 
      iBottom=y; 
      iRight=iLeft+(iW*(iBottom-iTop)/iH); 
     }, 

     WideBL: function(x,y){ 
      iLeft=x; 
      iBottom=iTop+(iH*(iRight-iLeft)/iW); 
     }, 
     TallBL: function(x,y){ 
      iBottom=y; 
      iLeft=iRight-(iW*(iBottom-iTop)/iH); 
     }, 

     WideTL: function(x,y){ 
      iLeft=x; 
      iTop=iBottom-(iH*(iRight-iLeft)/iW); 
     }, 
     TallTL: function(x,y){ 
      iBottom=y; 
      iLeft=iRight-(iW*(iBottom-iTop)/iH); 
     } 
    }; 

    function handleMousedown(e){ 
     // tell the browser we'll handle this mousedown 
     e.preventDefault(); 
     e.stopPropagation(); 
     var mouseX=e.clientX-offsetX; 
     var mouseY=e.clientY-offsetY; 
     iAnchor=hitResizeAnchor(mouseX,mouseY); 
     isDown=(iAnchor); 
    } 

    function handleMouseup(e){ 
     // tell the browser we'll handle this mouseup 
     e.preventDefault(); 
     e.stopPropagation(); 
     isDown=false; 
     draw(true); 
    } 

    function handleMousemove(e){ 
     // tell the browser we'll handle this mousemove 
     e.preventDefault(); 
     e.stopPropagation(); 
     // return if we're not dragging 
     if(!isDown){return;} 
     // get MouseX/Y 
     var mouseX=e.clientX-offsetX; 
     var mouseY=e.clientY-offsetY; 

     // reset iLeft,iRight,iTop,iBottom based on drag 
     resizeFunctions[iAnchor](mouseX,mouseY); 

     // redraw the resized image 
     draw(false); 
    } 


    function draw(withAnchors){ 
     var cx=iLeft+(iRight-iLeft)/2; 
     var cy=iTop+(iBottom-iTop)/2; 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.drawImage(img,iLeft,iTop,iRight-iLeft,iBottom-iTop); 
     if(withAnchors){ 
      ctx.fillRect(iLeft,iTop,border,border); 
      ctx.fillRect(iRight-border,iTop,border,border); 
      ctx.fillRect(iRight-border,iBottom-border,border,border); 
      ctx.fillRect(iLeft,iBottom-border,border,border); 
      ctx.fillRect(cx,iTop,border,border); 
      ctx.fillRect(cx,iBottom-border,border,border); 
      ctx.fillRect(iLeft,cy,border,border); 
      ctx.fillRect(iRight-border,cy,border,border); 
     } 
    } 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <h4>Drag image anchors</h4> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>