bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bodies are scaling

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-03-28 16:03:36 +02:00
parent 5e489f074e
commit 2d7f7e5499
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/ConcernementMapItem.vue
View File

@ -41,6 +41,8 @@ export default {
ray: 60,
time: 0,
salientPoints: [],
scale: 1,
oldScale: 1,
// matter
body: null
}
@ -187,8 +189,6 @@ export default {
},
animate (event) {
if (this.ctx) {
// this var is only here to trigger the render()
// this.time = Date.now();
this.pos = this.body.position;
}
}
@ -198,14 +198,19 @@ export default {
if (!this.ctx) return;
// this var is only here to trigger the render() from animate()
// let time = this.time;
this.scale = this.concernement.opened ? 5 : 1;
if (this.scale !== this.oldScale) {
Matter.Body.scale(this.body, this.scale, this.scale)
}
// exterieur circle
this.ctx.beginPath();
this.ctx.lineWidth = 0.5;
this.ctx.strokeStyle = this.concernement.opened ? "#ff0000" : "#888";
this.ctx.arc(this.pos.x, this.pos.y, this.ray, 0, 2 * Math.PI, false);
this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
this.ctx.stroke();
// // interieur circle
@ -221,11 +226,11 @@ export default {
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = "#000";
this.ctx.fillStyle = "rgba(255,255,255,0.4)";
this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x, this.pos.y+this.salientPoints[0].pos.y)
this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale, this.pos.y+this.salientPoints[0].pos.y*this.scale)
for (let j = 1; j < this.salientPoints.length; j++) {
this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x, this.pos.y+this.salientPoints[j].pos.y)
this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x*this.scale, this.pos.y+this.salientPoints[j].pos.y*this.scale)
}
this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x, this.pos.y+this.salientPoints[0].pos.y)
this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale, this.pos.y+this.salientPoints[0].pos.y*this.scale)
this.ctx.fill();
this.ctx.stroke();
}
@ -235,7 +240,7 @@ export default {
let entite = this.entites[i];
// console.log('entite', entite);
this.ctx.beginPath();
this.ctx.arc(this.pos.x+entite.display.pos.x, this.pos.y+entite.display.pos.y, 2, 0, 2 * Math.PI, false);
this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 2, 0, 2 * Math.PI, false);
this.ctx.fillStyle = "#F00";
this.ctx.fill();
}
@ -248,7 +253,7 @@ export default {
this.ctx.fillText(this.concernement.id, this.pos.x, this.pos.y)
this.ctx.fill();
this.oldScale = this.scale;
},
}