From 343b01977f334eea09626f96a0c3113f71af06db Mon Sep 17 00:00:00 2001 From: bach Date: Mon, 12 Jun 2023 16:50:33 +0200 Subject: [PATCH] #2143 legende boussole --- src/components/ConcernementMapItem.vue | 113 ++++++++++++++++++++----- 1 file changed, 93 insertions(+), 20 deletions(-) diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index f82fa98..41fd432 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -404,31 +404,47 @@ export default { let children = []; - // // exterieur circle - children.push(new paper.Path.Circle({ - center: [this.pos.x, this.pos.y], - radius: this.ray*this.scale*0.92, - strokeWidth: 2 - })); + // // // exterieur circle + // children.push(new paper.Path.Circle({ + // center: [this.pos.x, this.pos.y], + // radius: this.ray*this.scale*0.92, + // strokeWidth: 2 + // })); - // interieur circle - children.push(new paper.Path.Circle({ - center: [this.pos.x, this.pos.y], - radius: this.ray/2*this.scale, - strokeWidth: 2 - })); + // // interieur circle + // children.push(new paper.Path.Circle({ + // center: [this.pos.x, this.pos.y], + // radius: this.ray/2*this.scale, + // strokeWidth: 2 + // })); + + // cercles pointillés + for (let i = 1; i < 9; i++) { + let sw = i === 4 || i === 8 ? 2 : 1; + let da = i === 4 || i === 8 ? null : [5,5]; + children.push(new paper.Path.Circle({ + center: [this.pos.x, this.pos.y], + radius: this.ray*0.92/8*i*this.scale, + strokeColor: '#fff', + strokeWidth: sw, + dashArray: da + })); + + } // axes // vertical children.push(new paper.Path.Line({ from: [this.pos.x, this.pos.y - this.ray*this.scale], to: [this.pos.x, this.pos.y + this.ray*this.scale], + strokeColor: '#fff', strokeWidth: 2 })); // horizontal children.push(new paper.Path.Line({ from: [this.pos.x - this.ray*this.scale, this.pos.y], to: [this.pos.x + this.ray*this.scale, this.pos.y], + strokeColor: '#fff', strokeWidth: 2 })) @@ -440,7 +456,8 @@ export default { [this.pos.x, this.pos.y - this.ray*this.scale*0.92], [this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)], ], - strokeWidth: 2 + strokeWidth: 2, + strokeColor: '#fff', })); // milieu children.push(new paper.Path({ @@ -449,7 +466,8 @@ export default { [this.pos.x, this.pos.y], [this.pos.x + (8*this.scale), this.pos.y + (8*this.scale)], ], - strokeWidth: 2 + strokeWidth: 2, + strokeColor: '#fff', })); @@ -459,13 +477,15 @@ export default { children.push(new paper.Path.Line({ from: [this.pos.x + this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale], to: [this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale], - strokeWidth: 8 + strokeWidth: 8, + strokeColor: '#fff', })) // vertical children.push(new paper.Path.Line({ from: [this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale - (5 * this.scale)], to: [this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale)], - strokeWidth: 8 + strokeWidth: 8, + strokeColor: '#fff', })) // MOINS @@ -473,17 +493,70 @@ export default { children.push(new paper.Path.Line({ from: [this.pos.x - this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale], to: [this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale], - strokeWidth: 8 + strokeWidth: 8, + strokeColor: '#fff', })) + let fontsize = 4; + + children.push(new paper.PointText({ + point: [this.pos.x + 5, this.pos.y - this.ray*this.scale - 5], + content: "entités qui menacent <-> entités qui maintinennent", + fontSize: fontsize, + justification: 'center', + fillColor: '#000', + })) + + children.push(new paper.PointText({ + point: [this.pos.x - this.ray*this.scale - 5, this.pos.y + 1], + content: "axe d'intensité", + fontSize: fontsize, + justification: 'right', + fillColor: '#000', + })) + + children.push(new paper.PointText({ + point: [this.pos.x + this.ray*this.scale + 5, this.pos.y - 4], + content: "Situation future", + fontSize: fontsize, + justification: 'left', + fillColor: '#000', + })) + + children.push(new paper.PointText({ + point: [this.pos.x + this.ray*this.scale + 5, this.pos.y + 6], + content: "Situation actuelle", + fontSize: fontsize, + justification: 'left', + fillColor: '#000', + })) + + let t1 = new paper.PointText({ + point: [this.pos.x + this.ray/8*2.3*this.scale, this.pos.y + this.ray/8*2.3*this.scale], + content: "avec prise", + fontSize: fontsize, + justification: 'center', + fillColor: '#000', + }) + t1.rotate(-45) + children.push(t1) + + let t2 = new paper.PointText({ + point: [this.pos.x + this.ray/8*2.95*this.scale, this.pos.y + this.ray/8*2.95*this.scale], + content: "sans prise", + fontSize: fontsize, + justification: 'center', + fillColor: '#000', + }) + t2.rotate(-45) + children.push(t2) + + return new paper.Group({ children: children, pivot: new paper.Point(this.pos), name: 'boussole_bg', locked: true, - style: { - strokeColor: '#fff' - } }); },