#2143 legende boussole

src/components/ConcernementMapItem.vue

@@ -404,31 +404,47 @@ export default {
       let children = [];
 
 
-      // // exterieur circle
+      // // // exterieur circle
-      children.push(new paper.Path.Circle({
+      // children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
+      //   center: [this.pos.x, this.pos.y],
-        radius: this.ray*this.scale*0.92,
+      //   radius: this.ray*this.scale*0.92,
-        strokeWidth: 2
+      //   strokeWidth: 2
-      }));
+      // }));
 
-      // interieur circle
+      // // interieur circle
-      children.push(new paper.Path.Circle({
+      // children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
+      //   center: [this.pos.x, this.pos.y],
-        radius: this.ray/2*this.scale,
+      //   radius: this.ray/2*this.scale,
-        strokeWidth: 2
+      //   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'
-        }
       });
 
     },