I'm working on a HTML5 Canvas whiteboard.
I store all my elements on the stage in an array.
Now I added a drawing function. I can draw and select the drawn object. Now I want to resize the object.
My Paint Class
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 result could look like this:

Positions are stored in this format:

If want to resize the drawing proportional if I drag a corner of the calculated rectangle.
I hope someone can help me with that problem.
thanks in advance Frank
I think I'm close to a solution, but now I get some form deformations.
I calculate the center of the drawing and then I check each point, if it's position is lower or higher of the center and then I increase or decrease the position by the value of the distance between the start and end position of the corner that I'm dragging.
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;
}
})