From 592f358cabd1da04c62683c34a82db1e9d7816e4 Mon Sep 17 00:00:00 2001 From: bach Date: Fri, 14 Apr 2023 15:31:54 +0200 Subject: [PATCH] reactivated background, better opening animation --- src/components/ConcernementMapItem.vue | 219 +++++++++++++------------ src/components/MapBackground.vue | 4 +- 2 files changed, 116 insertions(+), 107 deletions(-) diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 56e6861..b4be018 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -43,6 +43,7 @@ export default { time: 0, salientPoints: [], scale: 1, + opacity: 0, // anim: null, tween: null, // matter @@ -144,7 +145,7 @@ export default { // listen for afterUpdate event from Matter.Engine object Matter.Events.on(this.matterEngine, "beforeUpdate", this.onBeforeEngineUpdate) - // Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate); + Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate); }, parsePoints (){ // converts data (menace/maintien, actuel/future, prise) into atcual position x,y @@ -220,11 +221,12 @@ export default { } if (open) { // opening tweening - this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y}) + this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y, o: 0}) .to({ s: 7, x: (this.canvas.width - 450) / 2, - y: this.canvas.height / 2 + y: this.canvas.height / 2, + o: 0.8 }, 800) .onUpdate((obj) => { // https://github.com/liabru/matter-js/issues/986#issuecomment-812488873 @@ -234,6 +236,7 @@ export default { Matter.Body.scale(this.body, obj.s, obj.s) // record new scale this.scale = obj.s; + this.opacity = obj.o; Matter.Body.setPosition(this.body, {x:obj.x, y:obj.y}); this.pos = {x:obj.x, y:obj.y}; @@ -253,8 +256,8 @@ export default { if(this.constraint){ Matter.Composite.remove(this.matterEngine.world, this.constraint); } - this.tween = new Tween.Tween({s: this.scale}) - .to({s: 1}, 500) + this.tween = new Tween.Tween({s: this.scale, o: 1}) + .to({s: 1, o: 0}, 500) .onUpdate((obj) => { // https://github.com/liabru/matter-js/issues/986#issuecomment-812488873 // revert to the original size (by reverting the previous scale) @@ -263,6 +266,7 @@ export default { Matter.Body.scale(this.body, obj.s, obj.s) // record new scale this.scale = obj.s; + this.opacity = obj.o; }); } this.tween.easing(Tween.Easing.Quadratic.InOut).start(); @@ -271,110 +275,115 @@ export default { if (this.tween) { this.tween.update(); } + }, + onAfterEngineUpdate (event) { + this.draw() + }, + draw() { + + if (!this.ctx) return; + + this.pos = this.body.position; + + // this.ctx.clearRect( + // this.pos.x - this.ray*this.scale, this.pos.y - this.ray*this.scale, + // this.ray*this.scale*2, this.ray*this.scale*2 + // ); + + if (this.opened) { + // BOUSSOLE + // exterieur circle + this.ctx.beginPath(); + this.ctx.lineWidth = 2; + this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`; + this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false); + // this.ctx.stroke(); + + // interieur circle + this.ctx.arc(this.pos.x, this.pos.y, this.ray/2*this.scale, 0, 2 * Math.PI, false); + // this.ctx.stroke(); + + // axes + // vertical + this.ctx.moveTo(this.pos.x, this.pos.y - this.ray*this.scale); + this.ctx.lineTo(this.pos.x, this.pos.y + this.ray*this.scale); + // horizontal + this.ctx.moveTo(this.pos.x - this.ray*this.scale, this.pos.y); + this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y); + // this.ctx.stroke(); + + // fleches + // haute + this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale)); + this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale); + this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale)); + // milieu + this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y + (8*this.scale)); + this.ctx.lineTo(this.pos.x, this.pos.y); + this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y + (8*this.scale)); + + this.ctx.stroke(); + + // MOINS - PLUS + this.ctx.beginPath(); + this.ctx.lineWidth = 8; + this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;; + // PLUS + // horizontal + this.ctx.moveTo(this.pos.x + this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale); + this.ctx.lineTo(this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale); + // vertical + this.ctx.moveTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale - (5 * this.scale)); + this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale)); + + // MOINS + // horizontal + this.ctx.moveTo(this.pos.x - this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale); + this.ctx.lineTo(this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale); + // vertical + + this.ctx.stroke(); + } + + // contours + if (this.salientPoints.length > 3) { + + this.ctx.beginPath(); + this.ctx.lineWidth = 1; + this.ctx.strokeStyle = "#000"; + this.ctx.fillStyle = "rgba(255,255,255,0.8)"; + this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15) + for (let j = 1; j < this.salientPoints.length; j++) { + this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[j].pos.y*this.scale*1.15) + } + this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15) + this.ctx.fill(); + this.ctx.stroke(); + } + + if (this.opened) { + // place all entities points + for (let i = 0; i < this.entites.length; i++) { + let entite = this.entites[i]; + // console.log('entite', entite); + this.ctx.beginPath(); + 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 = "#000"; + this.ctx.fill(); + } + } + + // concernement id @center + this.ctx.beginPath(); + // this.ctx.arc(this.pos.x, this.pos.y, 4, 0, 2 * Math.PI, false); + this.ctx.fillStyle = "#000"; + this.ctx.fillText(this.concernement.id, this.pos.x, this.pos.y) + this.ctx.fill(); + } }, render() { // console.log('render()', this.ctx); - - if (!this.ctx) return; - - // if (this.opened) { - // Matter.Body.setPosition(this.body, this.pos); - // } - - this.pos = this.body.position; - - if (this.opened) { - // BOUSSOLE - // exterieur circle - this.ctx.beginPath(); - this.ctx.lineWidth = 2; - this.ctx.strokeStyle = "#fff"; - this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false); - // this.ctx.stroke(); - - // interieur circle - this.ctx.arc(this.pos.x, this.pos.y, this.ray/2*this.scale, 0, 2 * Math.PI, false); - // this.ctx.stroke(); - - // axes - // vertical - this.ctx.moveTo(this.pos.x, this.pos.y - this.ray*this.scale); - this.ctx.lineTo(this.pos.x, this.pos.y + this.ray*this.scale); - // horizontal - this.ctx.moveTo(this.pos.x - this.ray*this.scale, this.pos.y); - this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y); - // this.ctx.stroke(); - - // fleches - // haute - this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale)); - this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale); - this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale)); - // milieu - this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y + (8*this.scale)); - this.ctx.lineTo(this.pos.x, this.pos.y); - this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y + (8*this.scale)); - - this.ctx.stroke(); - - // MOINS - PLUS - this.ctx.beginPath(); - this.ctx.lineWidth = 8; - this.ctx.strokeStyle = "#fff"; - // PLUS - // horizontal - this.ctx.moveTo(this.pos.x + this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale); - this.ctx.lineTo(this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale); - // vertical - this.ctx.moveTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale - (5 * this.scale)); - this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale)); - - // MOINS - // horizontal - this.ctx.moveTo(this.pos.x - this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale); - this.ctx.lineTo(this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale); - // vertical - - this.ctx.stroke(); - } - - // contours - if (this.salientPoints.length > 3) { - - this.ctx.beginPath(); - 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.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15) - for (let j = 1; j < this.salientPoints.length; j++) { - this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[j].pos.y*this.scale*1.15) - } - this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15) - this.ctx.fill(); - this.ctx.stroke(); - } - - if (this.opened) { - // place all entities points - for (let i = 0; i < this.entites.length; i++) { - let entite = this.entites[i]; - // console.log('entite', entite); - this.ctx.beginPath(); - 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 = "#000"; - this.ctx.fill(); - } - } - - // concernement id @center - this.ctx.beginPath(); - // this.ctx.arc(this.pos.x, this.pos.y, 4, 0, 2 * Math.PI, false); - this.ctx.fillStyle = "#000"; - this.ctx.fillText(this.concernement.id, this.pos.x, this.pos.y) - this.ctx.fill(); - - }, } diff --git a/src/components/MapBackground.vue b/src/components/MapBackground.vue index 71b1eb1..d2242ef 100644 --- a/src/components/MapBackground.vue +++ b/src/components/MapBackground.vue @@ -10,8 +10,8 @@ export default { } }, mounted() { - // this.initGradients() - // this.initTrame() + this.initGradients() + this.initTrame() }, // computed: { // },