diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index aebc375..ab004ce 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -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; }, }