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