HTML5画布调整了绘制线的大小

Question

我正在使用HTML5帆布白板。

我将所有元素存储在舞台上。

现在我添加了一个绘图功能。我可以绘制并选择绘制对象。 现在我想调整对象的大小。

我的油漆

class Paint {
    constructor(
        id="", coordinates =[], color = '', type="paint", x=0, y=0, width=0, height=0
    ) {
        this.id = id;
        this.coordinates = coordinates,
        this.fillColor = color;
        this.type = type;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        
    }

    update() {
        let { coordinates, color,x,y,width,height} = this;
        ctx.save();
        let xx;
        let yy;
      
        
        coordinates.map((dot,index) =>{

            if(index == 0)
            {
                x = dot.startX;
                y = dot.startY;
                xx = dot.mouseX;
                yy = dot.mouseY;
            }

            if(dot.startX < x)
            {
                x=dot.startX; 
            }
            if(dot.startY < y)
            {
                y=dot.startY; 
            }
            if(dot.mouseX>xx)
            {
                xx=dot.mouseX;
            }
            if(dot.mouseY>yy)
            {
                yy=dot.mouseY;
            }

            let startX =  (dot.startX - dx);
            let startY =  (dot.startY - dy);
            let mouseX =  (dot.mouseX - dx);
            let mouseY =  (dot.mouseY - dy);

            ctx.beginPath();
            ctx.lineWidth = 5;
            ctx.lineCap = 'round';
            ctx.strokeStyle = '#ACD3ED';
            ctx.moveTo(startX, startY);
            ctx.lineTo(mouseX, mouseY);
            ctx.stroke();

        });
        this.x = x;
        this.y = y;
        this.width = xx-x;
        this.height = yy-y;
    
        ctx.restore();
    }
}

A类结果看起来像这样：

位置以这种格式存储：

如果要调整图形比例大小，如果我拖动计算的矩形角。

我希望有人可以帮助我解决这个问题。

提前致谢 坦率

Answer 1

我认为我接近解决方案，但是现在我得到了一些形式的变形。

我计算图纸的中心，然后检查每个点，如果其位置是较低或更高的中心，然后我通过我' m拖动。

stageObjects[i].coordinates.map(dot=>{
    // upper left corner
    if(dot.startX<stageObjects[i].xCenter && dot.startY<stageObjects[i].yCenter)
    {
        dot.startX -= distance;
        dot.startY -= distance;
    }
    if(dot.mouseX<stageObjects[i].xCenter && dot.mouseY<stageObjects[i].yCenter)
    {
        dot.mouseX -= distance;
        dot.mouseY -= distance;
    }
    // upper right corner
    if(dot.startX>stageObjects[i].xCenter && dot.startY<stageObjects[i].yCenter)
    {
        dot.startX += distance;
        dot.startY -= distance;
    }
    if(dot.mouseX>stageObjects[i].xCenter && dot.mouseY<stageObjects[i].yCenter)
    {
        dot.mouseX += distance;
        dot.mouseY -= distance;
    }
    // lower left corner 
    if(dot.startX<stageObjects[i].xCenter && dot.startY>stageObjects[i].yCenter)
    {
        dot.startX -= distance;
        dot.startY += distance;
    }
    if(dot.mouseX<stageObjects[i].xCenter && dot.mouseY>stageObjects[i].yCenter)
    {
        dot.mouseX -= distance;
        dot.mouseY += distance;
    }
    // lower right corner 
    if(dot.startX>stageObjects[i].xCenter && dot.startY>stageObjects[i].yCenter)
    {
        dot.startX += distance;
        dot.startY += distance;
    }
    if(dot.mouseX>stageObjects[i].xCenter && dot.mouseY>stageObjects[i].yCenter)
    {
        dot.mouseX += distance;
        dot.mouseY += distance;
    }
})