diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index b94cd9e..207c0d1 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -386,11 +386,6 @@ export default { } } }, - // onBeforeEngineUpdate (event) { - // if (this.opened) { - // // Matter.Body.setPosition(this.body, this.pos); - // } - // }, openClose(open) { // console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`); if (this.tween) { @@ -537,7 +532,7 @@ export default { // contours if (!this.opened - || (this.opened && this.map_mode !== "puissancedagir")) { + || (this.opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) { this.drawContour(); } @@ -560,7 +555,7 @@ export default { } } - if (this.map_mode !== 'puissancedagir') { + if (this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer') { this.drawEntites() } @@ -763,7 +758,92 @@ export default { this.ctx.stroke(); }, drawDoleancerBG(){ + var r = this.ray * this.scale; // ray + var dr = r/2; // demi ray + var d = r*2; // diameter + var pcr = 2*this.scale; // petits cercle rayon + // cercle exterieur + this.ctx.beginPath(); + this.ctx.lineWidth = 2; + this.ctx.strokeStyle = `#FFF`; + this.ctx.arc(this.pos.x, this.pos.y, r, 0, 2 * Math.PI, false); + this.ctx.stroke(); + + // cercle interieur + this.ctx.beginPath(); + this.ctx.lineWidth = 2; + this.ctx.strokeStyle = `#FFF`; + this.ctx.arc(this.pos.x, this.pos.y, dr, 0, 2 * Math.PI, false); + this.ctx.stroke(); + + // petit cercles + this.ctx.beginPath(); + this.ctx.lineWidth = 2; + this.ctx.strokeStyle = `#FFF`; + this.ctx.arc(this.pos.x, this.pos.y - r, pcr, 0, 2 * Math.PI, false); + this.ctx.stroke(); + + this.ctx.beginPath(); + this.ctx.lineWidth = 2; + this.ctx.strokeStyle = `#FFF`; + this.ctx.arc(this.pos.x, this.pos.y + r, pcr, 0, 2 * Math.PI, false); + this.ctx.stroke(); + + this.ctx.beginPath(); + this.ctx.lineWidth = 2; + this.ctx.strokeStyle = `#FFF`; + this.ctx.arc(this.pos.x + r, this.pos.y, pcr, 0, 2 * Math.PI, false); + this.ctx.stroke(); + + this.ctx.beginPath(); + this.ctx.lineWidth = 2; + this.ctx.strokeStyle = `#FFF`; + this.ctx.arc(this.pos.x - r, this.pos.y, pcr, 0, 2 * Math.PI, false); + this.ctx.stroke(); + + // axes + this.ctx.beginPath(); + this.ctx.lineWidth = 2; + this.ctx.strokeStyle = `#FFF`; + // vertical + this.ctx.moveTo(this.pos.x, this.pos.y - r); + this.ctx.lineTo(this.pos.x , this.pos.y - dr); + this.ctx.moveTo(this.pos.x, this.pos.y + r); + this.ctx.lineTo(this.pos.x , this.pos.y + dr); + // this.ctx.moveTo(this.pos.x, this.pos.y - r); + // this.ctx.lineTo(this.pos.x , this.pos.y + r); + + // horizontal + this.ctx.moveTo(this.pos.x - r, this.pos.y); + this.ctx.lineTo(this.pos.x - dr, this.pos.y); + this.ctx.moveTo(this.pos.x + r, this.pos.y); + this.ctx.lineTo(this.pos.x + dr, this.pos.y); + // this.ctx.moveTo(this.pos.x - r, this.pos.y); + // this.ctx.lineTo(this.pos.x + r, this.pos.y); + + // diagonale + // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg + // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9 + // radians = degrees * (pi/180) + // degrees = radians * (180/pi) + let m,n; + m = Math.sin(45*(Math.PI/180)) * r; + n = Math.sin(45*(Math.PI/180)) * r/2; + // console.log('m', m); + this.ctx.moveTo(this.pos.x + m, this.pos.y + m); + this.ctx.lineTo(this.pos.x + n, this.pos.y + n); + // + this.ctx.moveTo(this.pos.x - m, this.pos.y + m); + this.ctx.lineTo(this.pos.x - n, this.pos.y + n); + // + this.ctx.moveTo(this.pos.x + m, this.pos.y - m); + this.ctx.lineTo(this.pos.x + n, this.pos.y - n); + // + this.ctx.moveTo(this.pos.x - m, this.pos.y - m); + this.ctx.lineTo(this.pos.x - n, this.pos.y - n); + + this.ctx.stroke(); }, drawDoleanceSteps(){