Javascript 使用画布调整6角图像大小

我有两个问题：

上止点、下止点、左止点和右止点没有被剪掉

我没有得到改变图像大小的逻辑。

角锚点应按比例调整大小（高度和宽度，两者应以相同的速率减少/增加）

非转弯的应相应调整大小，如下图所示

这是我预期的实施：

我已经创建了一个画布，在上面我画了一个图像并调整了它的大小

下面是脚本：

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);

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvas.offsetLeft；
var offsetY=canvas.offsetTop；
var-startX；
var startY；
var isDown=假；
var pi2=Math.PI*2；
var resizerRadius=8；
var rr=resizerRadius*resizerRadius；
变量拖动器={
x:0,，
y:0
};
var-imageX=50；
var imageY=50；
变量imageWidth、imageHeight、imageRight、imageBottom；
var draggingImage=false；
var-startX；
var startY；
var img=新图像（）；
img.onload=函数（）{
imageWidth=img.width；
图像高度=图像高度；
imageRight=imageX+imageWidth；
imageBottom=imageY+imageHeight
画（真、假）；
}
img.src='img/'+localStorage[“bgimgname”]；
函数绘制（带锚定、带边框）{
//清理画布
clearRect（0，0，canvas.width，canvas.height）；
//画图像
ctx.drawImage（img，0，0，img.width，img.height，imageX，imageY，imageWidth，imageHeight）；
//（可选）绘制可拖动的锚点
如果（带锚）{
drawDragAnchor（imageX，imageY）；//左上角
drawDragAnchor（（imageRight+imageX）/2，imageY）；//topcenter
drawDragAnchor（imageRight，imageY）；//右上角
drawDragAnchor（imageX，（imageBottom+imageY）/2）；//左
drawDragAnchor（imageRight，（imageBottom+imageY）/2）；//右
drawDragAnchor（imageX，imageBottom）；//左下角
drawDragAnchor（（imageRight+imageX）/2，imageBottom）；//底部中心
drawDragAnchor（imageRight，imageBottom）；//bottomright
}
//（可选）绘制连接锚定线
如果（带边框）{
ctx.beginPath（）；
ctx.moveTo（imageX，imageY）；
ctx.lineTo（imageRight，imageY）；
ctx.lineTo（图像右侧，图像底部）；
ctx.lineTo（imageX，imageBottom）；
ctx.closePath（）；
ctx.stroke（）；
}
}
函数drawDragAnchor（x，y）{
ctx.beginPath（）；
ctx.弧（x，y，resizerRadius，0，pi2，false）；
ctx.closePath（）；
ctx.fill（）；
}
功能测试（x，y）{
var-dx，dy；
//左上角
dx=x-图像x；
dy=y-imageY；
如果（dx*dx+dy*dy见我的答案：

我在重复下面的答案，以防有人用谷歌搜索这个答案而不是另一个

根据需要调整大小的一种有效方法是保持相对侧的位置固定，并让选定侧与拖动侧或角一起浮动

这种方法的一个附带好处是，您实际上不需要锚

这就是操作系统windows的工作方式

调整窗口大小时，如果没有可拖动的可见定位点，只需拖动窗口的边或角即可

演示：


左：原始图像
中间：从左下角调整大小并保持纵横比（右上角保持固定）
右侧：从底部调整大小&图像仅沿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>


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
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=假；
var-iW；
var-iH；
var iLeft=50；
var-iTop=50；
var iRight、iBottom、iOrientation；
var img=新图像（）；
img.onload=函数（）{
iW=img.宽度；
iH=img.高度；
iRight=iLeft+iW；
iBottom=iTop+iH；
I方向=（iW>=iH）？“宽”：“高”；
画（真）；
}
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；
函数hitResizeAnchor（x，y）{
//鼠标下有哪些边框
isLeft=（x>iLeft&&xiTop&&y有什么方法可以使它也可以移动吗？当然——很简单！图像的位置也由iLeft/iRight和iTop/iBottom变量控制。例如，如果要将图像向右移动10个像素：iLeft+=10；iRight+=10；draw（）；
<!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>