The problem is that the drag zone of the rectangle shape is somewhere around and outside the rectangle shape whether partially or completely instead of being within the range of the rectangle itself completely.
The part responsible for creating shape is drawshape function and the one responsible for the shape movement is mousemove function.
This is my code:
<template>
<v-app>
<v-main>
<v-app-bar color="red"></v-app-bar>
<canvas ref="canvas"></canvas>
</v-main>
</v-app>
</template>
<script>
export default{
data(){
return{
shapes:[],
current_shape_index: null,
is_drag:false,
startX: null,
startY: null,
}
},
mounted(){
const canvas=this.$refs.canvas;
console.log(canvas);
const context= canvas.getContext("2d");
canvas.width = window.innerWidth-35;
canvas.height = window.innerHeight-85;
canvas.style.border= '10px solid blue';
this.shapes.push({ type: 'rectangle', x: 100, y: 100, width: 100, height: 100,color:'red', initZoneColor: 'green'});
this.shapes.push({ type: 'rectangle', x: 100, y: 100, width: 200, height: 50,color:'orange', initZoneColor: 'green'});
this.shapes.push({ type: 'rectangle', x: 100, y: 100, width: 200, height: 5,color:'green', initZoneColor: 'green'});
this.drawShape(context);
canvas.onmousedown=this.mousedown;
canvas.onmouseup=this.mouseup;
canvas.onmouseout=this.mouseout;
canvas.onmousemove=this.mousemove;
},
methods:{
drawShape(context){
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
// Draw each shape
this.shapes.forEach(shape => {
context.fillStyle = shape.color;
if (shape.type === 'rectangle') {
context.fillRect(shape.x, shape.y, shape.width, shape.height);
} else if (shape.type === 'circle') {
context.beginPath();
context.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
context.fill();
}
// Draw text if available
if (shape.text) {
context.fillStyle = 'black';
context.font = '14px Arial';
context.fillText(shape.text, shape.x, shape.y);
}
})
},
is_shape(x,y,shape){
const sl=shape.x;
const sr=shape.x + shape.width;
const st=shape.y;
const sb=shape.y+shape.height;
if(x>sl && x<sr && y>st && y<sb){
return true;
}
return false;
},
mousedown(event){
event.preventDefault();
this.startX=parseInt(event.clientX);
this.startY=parseInt(event.clientY);
let index=0;
for (let shape of this.shapes){
if(this.is_shape(this.startX,this.startY,shape)){
console.log("INIT");
this.current_shape_index=index;
this.is_drag=true;
return;
}else{
console.log("No");
}
index++
}
},
mouseup(event){
if(!this.is_drag){
console.log("Not moving")
return;
}
event.preventDefault();
this.is_drag=false;
},
mouseout(event){
if(!this.is_drag){
console.log("Out of Bound")
return;
}
event.preventDefault();
this.is_drag=false;
},
mousemove(event){
if(!this.is_drag){
return;
}else if(this.is_drag){
event.preventDefault();
let mouseX=parseInt(event.clientX);
let mouseY=parseInt(event.clientY);
let dx=mouseX-this.startX;
let dy=mouseY-this.startY;
console.log(dx,dy);
let current_shape=this.shapes[this.current_shape_index];
console.log(current_shape);
current_shape.x+=dx;
current_shape.y+=dy;
const canvas = this.$refs.canvas;
const context = canvas.getContext("2d");
this.drawShape(context);
this.startX=mouseX;
this.startY=mouseY;
}
},
}
}
</script>
