#2143 better boussole bg

src/components/ConcernementMapItem.vue

@@ -402,12 +402,12 @@ export default {
     setPaperBoussoleBG(){
       // BOUSSOLE
       let children = [];
-
+      let ray = this.ray*0.92*this.scale;
 
       // // // exterieur circle
       // children.push(new paper.Path.Circle({
       //   center: [this.pos.x, this.pos.y],
-      //   radius: this.ray*this.scale*0.92,
+      //   radius: ray,
       //   strokeWidth: 2
       // }));
 
@@ -424,7 +424,7 @@ export default {
         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,
+          radius: ray/8*i,
           strokeColor: '#fff',
           strokeWidth: sw,
           dashArray: da
@@ -435,15 +435,15 @@ export default {
       // 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],
+        from: [this.pos.x, this.pos.y - ray],
+        to: [this.pos.x, this.pos.y + ray],
         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],
+        from: [this.pos.x - ray, this.pos.y],
+        to: [this.pos.x + ray, this.pos.y],
         strokeColor: '#fff',
         strokeWidth: 2
       }))
@@ -452,9 +452,9 @@ export default {
       // haute
       children.push(new paper.Path({
         segments: [
-          [this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)],
-          [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)],
+          [this.pos.x - (8*this.scale), this.pos.y - ray + (8*this.scale)],
+          [this.pos.x, this.pos.y - ray],
+          [this.pos.x + (8*this.scale), this.pos.y - ray + (8*this.scale)],
         ],
         strokeWidth: 2,
         strokeColor: '#fff',
@@ -475,15 +475,15 @@ export default {
       // PLUS
       // horizontal
       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],
+        from: [this.pos.x + ray - (5 * this.scale), this.pos.y - ray],
+        to: [this.pos.x + ray + (5 * this.scale), this.pos.y - ray],
         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)],
+        from: [this.pos.x + ray, this.pos.y - ray - (5 * this.scale)],
+        to: [this.pos.x + ray, this.pos.y - ray + (5 * this.scale)],
         strokeWidth: 8,
         strokeColor: '#fff',
       }))
@@ -491,8 +491,8 @@ export default {
       // MOINS
       // horizontal
       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],
+        from: [this.pos.x - ray - (5 * this.scale), this.pos.y - ray],
+        to: [this.pos.x - ray + (5 * this.scale), this.pos.y - ray],
         strokeWidth: 8,
         strokeColor: '#fff',
       }))
@@ -500,15 +500,15 @@ export default {
       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",
+        point: [this.pos.x + 4.5, this.pos.y - ray - 5],
+        content: `entités qui menacent \u2194 entités qui maintiennent`,
         fontSize: fontsize,
         justification: 'center',
         fillColor: '#000',
       }))
 
       children.push(new paper.PointText({
-        point: [this.pos.x - this.ray*this.scale - 5, this.pos.y + 1],
+        point: [this.pos.x - ray - 5, this.pos.y + 1],
         content: "axe d'intensité",
         fontSize: fontsize,
         justification: 'right',
@@ -516,23 +516,23 @@ export default {
       }))
 
       children.push(new paper.PointText({
-        point: [this.pos.x + this.ray*this.scale + 5, this.pos.y - 4],
-        content: "Situation future",
+        point: [this.pos.x + ray + 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",
+        point: [this.pos.x + ray + 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],
+        point: [this.pos.x - ray/8*2.3, this.pos.y - ray/8*2.3],
         content: "avec prise",
         fontSize: fontsize,
         justification: 'center',
@@ -542,7 +542,7 @@ export default {
       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],
+        point: [this.pos.x - ray/8*2.95, this.pos.y - ray/8*2.95],
         content: "sans prise",
         fontSize: fontsize,
         justification: 'center',