finished paperjs refactoring
This commit is contained in:
parent
f314ff11f2
commit
6021809ce3
@ -381,7 +381,11 @@ export default {
|
||||
if (this.concernement.has_agissantes) {
|
||||
this.paper_objects.addChild(this.setPaperAgissantes());
|
||||
}
|
||||
|
||||
if (this.concernement.has_doleance) {
|
||||
this.paper_objects.addChild(this.setPaperDoleanceBG());
|
||||
this.paper_objects.addChild(this.setPaperDoleanceICON());
|
||||
this.paper_objects.addChild(this.setPaperDoleanceSteps());
|
||||
}
|
||||
console.log('initPaperObjects', this.paper_objects);
|
||||
|
||||
this.initPaperEvents()
|
||||
@ -467,6 +471,7 @@ export default {
|
||||
children: children,
|
||||
pivot: new paper.Point(this.pos),
|
||||
name: 'boussole_bg',
|
||||
locked: true,
|
||||
style: {
|
||||
strokeColor: '#fff'
|
||||
}
|
||||
@ -567,6 +572,7 @@ export default {
|
||||
children: children,
|
||||
pivot: new paper.Point(this.pos),
|
||||
name: 'puissanceagir_bg',
|
||||
locked: true,
|
||||
style: {
|
||||
strokeColor: '#fff'
|
||||
}
|
||||
@ -623,6 +629,7 @@ export default {
|
||||
children: children,
|
||||
pivot: new paper.Point(this.pos),
|
||||
name: 'puissanceagir_icon',
|
||||
locked: true,
|
||||
style: {
|
||||
strokeColor: '#000',
|
||||
strokeWidth: 1
|
||||
@ -700,6 +707,292 @@ export default {
|
||||
}
|
||||
}
|
||||
return g;
|
||||
},
|
||||
setPaperDoleanceBG(){
|
||||
let children = [];
|
||||
|
||||
var r = this.ray * this.scale * 0.8; // ray
|
||||
var dr = r/2; // demi ray
|
||||
var d = r*2; // diameter
|
||||
var pcr = 2*this.scale; // petits cercle rayon
|
||||
var lr = r*1.1; // legendes rayon
|
||||
|
||||
// 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)
|
||||
// Points for 45° axes
|
||||
let m,n;
|
||||
m = Math.sin(45*(Math.PI/180)) * r; // x = y for rayon
|
||||
n = Math.sin(45*(Math.PI/180)) * r/2; // x = y for demi rayon
|
||||
// console.log('m', m);
|
||||
|
||||
// points for legende arcs
|
||||
let o = Math.cos(22.5*(Math.PI/180)) * lr; // x
|
||||
let p = Math.sin(22.5*(Math.PI/180)) * lr; // y
|
||||
let q = Math.sin(45*(Math.PI/180)) * lr; // x = y for legende rayon
|
||||
|
||||
let style = {
|
||||
strokeColor: '#fff',
|
||||
strokeWidth: 1
|
||||
}
|
||||
|
||||
let legende_style = {
|
||||
strokeColor: '#000',
|
||||
strokeWidth: 1
|
||||
}
|
||||
|
||||
// arcs exterieur
|
||||
// haut gauche
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x - r, this.pos.y - pcr],
|
||||
through: [this.pos.x - m, this.pos.y - m],
|
||||
to: [this.pos.x - pcr, this.pos.y - r],
|
||||
style: style
|
||||
}));
|
||||
// haut droite
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x + pcr, this.pos.y - r],
|
||||
through: [this.pos.x + m, this.pos.y - m],
|
||||
to: [this.pos.x + r, this.pos.y - pcr],
|
||||
style: style
|
||||
}));
|
||||
// bas droite
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x + r, this.pos.y + pcr],
|
||||
through: [this.pos.x + m, this.pos.y + m],
|
||||
to: [this.pos.x + pcr, this.pos.y + r],
|
||||
style: style
|
||||
}));
|
||||
// bas gauche
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x - pcr, this.pos.y + r],
|
||||
through: [this.pos.x - m, this.pos.y + m],
|
||||
to: [this.pos.x - r, this.pos.y + pcr],
|
||||
style: style
|
||||
}));
|
||||
|
||||
// arcs legendes
|
||||
// bas gauche 1
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x - pcr, this.pos.y + lr],
|
||||
through: [this.pos.x - p, this.pos.y + o],
|
||||
to: [this.pos.x - q + pcr/2, this.pos.y + q + pcr/2],
|
||||
style: legende_style
|
||||
}));
|
||||
|
||||
// bas gauche 2
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x - q - pcr/2, this.pos.y + q - pcr/2],
|
||||
through: [this.pos.x - o, this.pos.y + p],
|
||||
to: [this.pos.x - lr, this.pos.y + pcr],
|
||||
style: legende_style
|
||||
}));
|
||||
|
||||
// haut gauche
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x - lr, this.pos.y - pcr],
|
||||
through: [this.pos.x - q, this.pos.y - q],
|
||||
to: [this.pos.x - pcr, this.pos.y - lr],
|
||||
style: legende_style
|
||||
}));
|
||||
// haut droite
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x + pcr, this.pos.y - lr],
|
||||
through: [this.pos.x + q, this.pos.y - q],
|
||||
to: [this.pos.x + lr, this.pos.y - pcr],
|
||||
style: legende_style
|
||||
}));
|
||||
// bas droite 1
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x + lr, this.pos.y + pcr],
|
||||
through: [this.pos.x + o, this.pos.y + p],
|
||||
to: [this.pos.x + q + pcr/2, this.pos.y + q - pcr/2],
|
||||
style: legende_style
|
||||
}));
|
||||
// bas droite 2
|
||||
children.push(new paper.Path.Arc({
|
||||
from: [this.pos.x + q - pcr/2, this.pos.y + q + pcr/2],
|
||||
through: [this.pos.x + p, this.pos.y + o],
|
||||
to: [this.pos.x + pcr, this.pos.y + lr],
|
||||
style: legende_style
|
||||
}));
|
||||
|
||||
|
||||
// cercle interieur
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y],
|
||||
radius: dr,
|
||||
style: style
|
||||
}));
|
||||
|
||||
// petit cercles
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y -r],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}));
|
||||
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y + r],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}));
|
||||
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [this.pos.x + r, this.pos.y],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}));
|
||||
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [this.pos.x -r, this.pos.y],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}));
|
||||
|
||||
// axes
|
||||
// vertical
|
||||
// haut
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x, this.pos.y - r + pcr],
|
||||
to: [this.pos.x , this.pos.y - dr],
|
||||
style: style
|
||||
}));
|
||||
// bas
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x, this.pos.y + r - pcr],
|
||||
to: [this.pos.x , this.pos.y + dr],
|
||||
style: style
|
||||
}));
|
||||
|
||||
// horizontal
|
||||
// gauche
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x - r + pcr, this.pos.y],
|
||||
to: [this.pos.x - dr, this.pos.y],
|
||||
style: style
|
||||
}));
|
||||
// droite
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x + r - pcr, this.pos.y],
|
||||
to: [this.pos.x + dr, this.pos.y],
|
||||
style: style
|
||||
}));
|
||||
|
||||
// diagonales
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x + m, this.pos.y + m],
|
||||
to: [this.pos.x + n, this.pos.y + n],
|
||||
style: style
|
||||
}));
|
||||
//
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x - m, this.pos.y + m],
|
||||
to: [this.pos.x - n, this.pos.y + n],
|
||||
style: style
|
||||
}));
|
||||
//
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x + m, this.pos.y - m],
|
||||
to: [this.pos.x + n, this.pos.y - n],
|
||||
style: style
|
||||
}));
|
||||
//
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x - m, this.pos.y - m],
|
||||
to: [this.pos.x - n, this.pos.y - n],
|
||||
style: style
|
||||
}));
|
||||
|
||||
return new paper.Group({
|
||||
children: children,
|
||||
pivot: new paper.Point(this.pos),
|
||||
name: 'doleance_bg',
|
||||
locked: true
|
||||
});
|
||||
},
|
||||
setPaperDoleanceICON(){
|
||||
let children = [];
|
||||
|
||||
var r = 20 * this.scale; // ray
|
||||
var dr = r/2; // demi ray
|
||||
var d = r*2; // diameter
|
||||
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y],
|
||||
radius: r
|
||||
}));
|
||||
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y],
|
||||
radius: dr
|
||||
}));
|
||||
|
||||
|
||||
// axes
|
||||
// vertical
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x, this.pos.y - r],
|
||||
to: [this.pos.x , this.pos.y - dr],
|
||||
}));
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x, this.pos.y + r],
|
||||
to: [this.pos.x , this.pos.y + dr],
|
||||
}));
|
||||
|
||||
// horizontal
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x - r, this.pos.y],
|
||||
to: [this.pos.x - dr, this.pos.y],
|
||||
}));
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x + r, this.pos.y],
|
||||
to: [this.pos.x + dr, 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);
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x + m, this.pos.y + m],
|
||||
to: [this.pos.x + n, this.pos.y + n],
|
||||
}));
|
||||
//
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x - m, this.pos.y + m],
|
||||
to: [this.pos.x - n, this.pos.y + n],
|
||||
}));
|
||||
//
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x + m, this.pos.y - m],
|
||||
to: [this.pos.x + n, this.pos.y - n],
|
||||
}));
|
||||
//
|
||||
children.push(new paper.Path.Line({
|
||||
from: [this.pos.x - m, this.pos.y - m],
|
||||
to: [this.pos.x - n, this.pos.y - n],
|
||||
}));
|
||||
|
||||
return new paper.Group({
|
||||
children: children,
|
||||
pivot: new paper.Point(this.pos),
|
||||
name: 'doleance_icon',
|
||||
locked: true,
|
||||
style: {
|
||||
strokeColor: '#000',
|
||||
strokeWidth: 1
|
||||
}
|
||||
});
|
||||
},
|
||||
setPaperDoleanceSteps(){
|
||||
|
||||
},
|
||||
// PAPER EVENTS
|
||||
initPaperEvents(){
|
||||
@ -994,6 +1287,9 @@ export default {
|
||||
if (this.concernement.has_puissancedagir) {
|
||||
this.paper_objects.children.puissanceagir_bg.visible = false;
|
||||
}
|
||||
if (this.concernement.has_doleance) {
|
||||
this.paper_objects.children.doleance_bg.visible = false;
|
||||
}
|
||||
// choose wich one to show, if one
|
||||
switch (this.map_mode) {
|
||||
case 'terraindevie':
|
||||
@ -1005,7 +1301,9 @@ export default {
|
||||
}
|
||||
break;
|
||||
case 'doleancer':
|
||||
// this.drawDoleancerBG();
|
||||
if (this.concernement.has_doleance) {
|
||||
this.paper_objects.children.doleance_bg.visible = true;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}else{
|
||||
@ -1013,6 +1311,9 @@ export default {
|
||||
if (this.concernement.has_puissancedagir) {
|
||||
this.paper_objects.children.puissanceagir_bg.visible = false;
|
||||
}
|
||||
if (this.concernement.has_doleance) {
|
||||
this.paper_objects.children.doleance_bg.visible = false;
|
||||
}
|
||||
}
|
||||
|
||||
// entites
|
||||
@ -1052,7 +1353,22 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// doleance
|
||||
if (this.concernement.has_doleance) {
|
||||
if (this.map_mode === "doleancer") {
|
||||
if (!this.is_opened) {
|
||||
this.paper_objects.children.doleance_icon.visible = true;
|
||||
// this.paper_objects.children.doleance_steps.visible = false;
|
||||
} else {
|
||||
this.paper_objects.children.doleance_icon.visible = false;
|
||||
// this.paper_objects.children.doleance_steps.visible = true;
|
||||
// this.drawBesoins();
|
||||
}
|
||||
} else {
|
||||
this.paper_objects.children.doleance_icon.visible = false;
|
||||
// this.paper_objects.children.doleance_steps.visible = false;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
isFocused(){
|
||||
@ -1061,477 +1377,6 @@ export default {
|
||||
|| (this.map_mode === 'puissancedagir' && this.concernement.has_puissancedagir)
|
||||
|| (this.map_mode === 'doleancer' && this.concernement.has_doleance);
|
||||
},
|
||||
draw() {
|
||||
|
||||
// if (!this.ctx) return;
|
||||
|
||||
// record the position from the main matter body
|
||||
// this.pos = this.body.position;
|
||||
|
||||
// drawing backgrounds
|
||||
// if (this.is_opened) {
|
||||
// switch (this.map_mode) {
|
||||
// case 'terraindevie':
|
||||
// this.drawBoussoleBG();
|
||||
// break;
|
||||
// case 'puissancedagir':
|
||||
// this.drawPuissanceagirBG();
|
||||
// break;
|
||||
// case 'doleancer':
|
||||
// this.drawDoleancerBG();
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// map mode puissance d'agir
|
||||
// if (this.concernement.has_puissancedagir && this.map_mode === "puissancedagir") {
|
||||
// if (!this.is_opened) {
|
||||
// this.drawPuissanceagirIcon(); // if not opened and has_puissancedagir draw the puissance d'agir icone
|
||||
// } else {
|
||||
// this.drawBesoins();
|
||||
// }
|
||||
// }
|
||||
|
||||
// map mode doleancer
|
||||
// if not opened and has_doleance draw the doleance icone
|
||||
if (this.concernement.has_doleance && this.map_mode === "doleancer") {
|
||||
if (!this.is_opened) {
|
||||
this.drawDoleanceIcon(); // if not opened and has_puissancedagir draw the puissance d'agir icone
|
||||
} else {
|
||||
this.drawDoleanceSteps();
|
||||
}
|
||||
}
|
||||
|
||||
// if (this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer') {
|
||||
// // this.drawEntites()
|
||||
// }
|
||||
|
||||
|
||||
},
|
||||
// drawPuissanceagirBG(){
|
||||
|
||||
// for (let i = 1; i < 6; i++) {
|
||||
// this.ctx.beginPath();
|
||||
// this.ctx.lineWidth = 0.5;
|
||||
// this.ctx.strokeStyle = `rgba(255,255,255,1)`;
|
||||
// this.ctx.arc(this.pos.x, this.pos.y, ((this.ray*this.scale)/5)*i, 0, 2 * Math.PI, false);
|
||||
// this.ctx.stroke();
|
||||
// }
|
||||
|
||||
// this.ctx.beginPath();
|
||||
// this.ctx.lineWidth = 1;
|
||||
// this.ctx.strokeStyle = `rgba(255,255,255,1)`;
|
||||
// this.ctx.setLineDash([5,5]);
|
||||
// for (let j = 0; j < 4; j++) {
|
||||
// let a = (90 / 4) * j;
|
||||
// // 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 x = Math.cos(a*(Math.PI/180)) * this.ray * this.scale;
|
||||
// let y = Math.sin(a*(Math.PI/180)) * this.ray * this.scale;
|
||||
// // console.log('m', m);
|
||||
// this.ctx.moveTo(this.pos.x + x, this.pos.y + y);
|
||||
// this.ctx.lineTo(this.pos.x - x, this.pos.y - y);
|
||||
// //
|
||||
// this.ctx.moveTo(this.pos.x - y, this.pos.y + x);
|
||||
// this.ctx.lineTo(this.pos.x + y, this.pos.y - x);
|
||||
// }
|
||||
// this.ctx.stroke();
|
||||
// this.ctx.setLineDash([]);
|
||||
|
||||
// this.ctx.beginPath();
|
||||
// this.ctx.fillStyle = `rgba(255,255,255,0.6)`;
|
||||
// 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.fill();
|
||||
// this.ctx.stroke()
|
||||
// this.ctx.closePath();
|
||||
// },
|
||||
// drawPuissanceagirIcon(){
|
||||
// var r = 20 * this.scale; // ray
|
||||
// var dr = r/2; // demi ray
|
||||
// var d = r*2; // diameter
|
||||
|
||||
// this.ctx.beginPath();
|
||||
// this.ctx.lineWidth = 1;
|
||||
// this.ctx.strokeStyle = `#000`;
|
||||
// this.ctx.arc(this.pos.x, this.pos.y, r, 0, 2 * Math.PI, false);
|
||||
// this.ctx.stroke();
|
||||
|
||||
// this.ctx.beginPath();
|
||||
// this.ctx.lineWidth = 1;
|
||||
// this.ctx.strokeStyle = `#000`;
|
||||
// this.ctx.arc(this.pos.x, this.pos.y, dr, 0, 2 * Math.PI, false);
|
||||
// this.ctx.stroke();
|
||||
|
||||
// this.ctx.beginPath();
|
||||
// this.ctx.lineWidth = 1;
|
||||
// this.ctx.strokeStyle = `#000`;
|
||||
// this.ctx.fillStyle = '#000';
|
||||
// this.ctx.arc(this.pos.x, this.pos.y, 2*this.scale, 0, 2 * Math.PI, false);
|
||||
// this.ctx.fill();
|
||||
// this.ctx.stroke();
|
||||
|
||||
// // axes
|
||||
// this.ctx.beginPath();
|
||||
// this.ctx.lineWidth = 1;
|
||||
// this.ctx.strokeStyle = `#000`;
|
||||
// // 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)
|
||||
// var m = Math.sin(45*(Math.PI/180)) * r;
|
||||
// // console.log('m', m);
|
||||
// this.ctx.moveTo(this.pos.x + m, this.pos.y + m);
|
||||
// this.ctx.lineTo(this.pos.x - m, this.pos.y - m);
|
||||
// //
|
||||
// this.ctx.moveTo(this.pos.x - m, this.pos.y + m);
|
||||
// this.ctx.lineTo(this.pos.x + m, this.pos.y - m);
|
||||
|
||||
// this.ctx.stroke();
|
||||
// },
|
||||
// drawBesoins(){
|
||||
// for (let i = 0; i < this.body.parts.length; i++) {
|
||||
// if (this.body.parts[i].item_type === 'besoin' || this.body.parts[i].item_type === 'reponse') {
|
||||
// let part = this.body.parts[i];
|
||||
|
||||
// switch (part.item_type) {
|
||||
// case 'besoin':
|
||||
// this.ctx.beginPath();
|
||||
// this.ctx.fillStyle = "#000";
|
||||
// this.drawDiamond(part.position.x, part.position.y, 4);
|
||||
// this.ctx.fill();
|
||||
// break;
|
||||
// case 'reponse':
|
||||
// this.ctx.beginPath();
|
||||
// this.ctx.fillStyle = "#eee";
|
||||
// this.ctx.strokeStyle = "#000";
|
||||
// this.ctx.lineWidth = 1;
|
||||
// // this.ctx.arc(this.pos.x + rx, this.pos.y + ry, 2*(f+1), 0, 2 * Math.PI, false);
|
||||
// this.drawDiamond(part.position.x, part.position.y, 5);
|
||||
// this.ctx.fill();
|
||||
// this.ctx.stroke();
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// drawDiamond(x,y,r){
|
||||
// this.ctx.moveTo(x, y - r);
|
||||
// this.ctx.lineTo(x + r, y);
|
||||
// this.ctx.lineTo(x, y + r);
|
||||
// this.ctx.lineTo(x - r, y);
|
||||
// this.ctx.lineTo(x, y - r);
|
||||
// },
|
||||
drawDoleanceIcon(){
|
||||
var r = 20 * this.scale; // ray
|
||||
var dr = r/2; // demi ray
|
||||
var d = r*2; // diameter
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.lineWidth = 1;
|
||||
this.ctx.strokeStyle = `#000`;
|
||||
this.ctx.arc(this.pos.x, this.pos.y, r, 0, 2 * Math.PI, false);
|
||||
this.ctx.stroke();
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.lineWidth = 1;
|
||||
this.ctx.strokeStyle = `#000`;
|
||||
this.ctx.arc(this.pos.x, this.pos.y, dr, 0, 2 * Math.PI, false);
|
||||
this.ctx.stroke();
|
||||
|
||||
|
||||
// axes
|
||||
this.ctx.beginPath();
|
||||
this.ctx.lineWidth = 1;
|
||||
this.ctx.strokeStyle = `#000`;
|
||||
// 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();
|
||||
},
|
||||
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(){
|
||||
|
||||
},
|
||||
// drawBoussoleBG_OLD(){
|
||||
// // BOUSSOLE
|
||||
// // exterieur circle
|
||||
// this.ctx.beginPath();
|
||||
// this.ctx.lineWidth = 2;
|
||||
// this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;
|
||||
// // external circle is %8 less than max ray = (*0.92)
|
||||
// this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale*0.92, 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*0.92 + (8*this.scale));
|
||||
// this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale*0.92);
|
||||
// this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (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();
|
||||
// },
|
||||
// drawEntites(){
|
||||
// // IF OPENED
|
||||
// if (this.is_opened) {
|
||||
// // place all entities points
|
||||
// // OR using entitées matter bodies
|
||||
// for (let i = 0; i < this.body.parts.length; i++) {
|
||||
// if (this.body.parts[i].item_type === 'entite'
|
||||
// // draw only entite agissante if map mode is action
|
||||
// && ((this.map_mode === 'action' && this.body.parts[i].agissante) || this.map_mode !== "action")) {
|
||||
// let part = this.body.parts[i];
|
||||
// this.ctx.beginPath();
|
||||
// this.ctx.arc(part.position.x, part.position.y, 0.3*this.scale, 0, 2 * Math.PI, false);
|
||||
// // console.log(part.id, this.opened_entite_id);
|
||||
// if (part.id === this.opened_entite_id) {
|
||||
// this.ctx.fillStyle = "#01ffe2";
|
||||
// } else {
|
||||
// this.ctx.fillStyle = "#000";
|
||||
// }
|
||||
// this.ctx.fill();
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// // IF CLOSED
|
||||
// else {
|
||||
// // map mode action
|
||||
// // if not opened and has_agissantes draw only entites agissantes
|
||||
// if (this.concernement.has_agissantes && this.map_mode === "action") {
|
||||
// for (let i = 0; i < this.body.parts.length; i++) {
|
||||
// if (this.body.parts[i].item_type === 'entite' && this.body.parts[i].agissante) {
|
||||
// let part = this.body.parts[i];
|
||||
// this.ctx.beginPath();
|
||||
// this.ctx.arc(part.position.x, part.position.y, 1*this.scale, 0, 2 * Math.PI, false);
|
||||
// // console.log(part.id, this.opened_entite_id);
|
||||
// if (part.id === this.opened_entite_id) {
|
||||
// this.ctx.fillStyle = "#01ffe2";
|
||||
// } else {
|
||||
// this.ctx.fillStyle = "#000";
|
||||
// }
|
||||
// this.ctx.fill();
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// }
|
||||
// },
|
||||
// drawContour_OLD(){
|
||||
// if (this.salientPoints.length > 3) {
|
||||
// // // test draw contour from body part
|
||||
// // for (let i = 0; i < this.body.parts.length; i++) {
|
||||
// // if (this.body.parts[i].item_type === 'concernement-contours'){
|
||||
// // // console.log('concernement contours', this.body.parts[i]);
|
||||
// // this.ctx.beginPath();
|
||||
// // this.ctx.lineWidth = 1;
|
||||
// // this.ctx.strokeStyle = "#F00";
|
||||
// // this.ctx.moveTo(this.body.parts[i].vertices[0].x, this.body.parts[i].vertices[0].y);
|
||||
// // for (let j = 1; j < this.body.parts[i].vertices.length; j++) {
|
||||
// // this.ctx.lineTo(this.body.parts[i].vertices[j].x, this.body.parts[i].vertices[j].y);
|
||||
// // }
|
||||
// // this.ctx.lineTo(this.body.parts[i].vertices[0].x, this.body.parts[i].vertices[0].y);
|
||||
// // this.ctx.stroke();
|
||||
|
||||
// // // for (let k = 0; k < this.body.parts[i].parts.length; k++) {
|
||||
// // // let part = this.body.parts[i];
|
||||
// // // let partpart = part.parts[k];
|
||||
// // // debugger;
|
||||
// // // this.ctx.beginPath();
|
||||
// // // this.ctx.lineWidth = 1;
|
||||
// // // this.ctx.strokeStyle = "#F00";
|
||||
// // // this.ctx.moveTo(this.body.parts[i].parts[k].vertices[0].x, this.body.parts[i].parts[k].vertices[0].y);
|
||||
// // // for (let j = 1; j < this.body.parts[i].parts[k].vertices.length; j++) {
|
||||
// // // this.ctx.lineTo(this.body.parts[i].parts[k].vertices[j].x, this.body.parts[i].parts[k].vertices[j].y);
|
||||
// // // }
|
||||
// // // this.ctx.lineTo(this.body.parts[i].parts[k].vertices[0].x, this.body.parts[i].parts[k].vertices[0].y);
|
||||
// // // this.ctx.stroke();
|
||||
|
||||
// // // }
|
||||
// // }
|
||||
// //
|
||||
// }
|
||||
// }
|
||||
},
|
||||
render() {
|
||||
// console.log('render()', this.ctx);
|
||||
|
||||
@ -47,7 +47,7 @@ export default {
|
||||
engine: null,
|
||||
world: null,
|
||||
// render: null,
|
||||
mouse: null,
|
||||
// mouse: null,
|
||||
mapPopupData: null,
|
||||
// PAPERJS
|
||||
paper: null
|
||||
@ -109,7 +109,7 @@ export default {
|
||||
|
||||
// add mouse control
|
||||
// https://github.com/liabru/matter-js/issues/491#issuecomment-331329404
|
||||
this.mouse = Matter.Mouse.create(this.canvasMap.canvas);
|
||||
// this.mouse = Matter.Mouse.create(this.canvasMap.canvas);
|
||||
|
||||
this.animate()
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user