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

started to draw doleance background boussole

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-06-02 14:02:53 +02:00
parent c8aaf2591b
commit b72b488b8a
1 changed files with 87 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/ConcernementMapItem.vue
View File

@ -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(){