在 fabricjs 的嵌套圆圈内不显示重叠文本

Question

我正在尝试在 fabricjs 5 个嵌套圆圈内显示文本（在我的例子中是数字）canvas 但是因为圆圈彼此嵌套并且文本位置与圆圈位置文本相同相互重叠因此我尝试将文本向左移动一定量像素，但结果不是我想要的。这是片段。

(function()
{
    const canvas = new fabric.Canvas('fabricCanvas', {selection: false});
    fabric.Object.prototype.transparentCorners = false;

    document.addEventListener('DOMContentLoaded', function(){

      drawRectangle();
      drawCircles()
      
    });

    function drawRectangle()
    {
        const rect = new fabric.Rect({
          left: 200,
          top: 100,
          width: 200,
          height: 200,
          fill: 'green',
          angle: 0,
          padding: 0,
          class: 'rectangle',
          opacity: 0.6,
          originX:'left',
          originY:'top'
        });
        canvas.add(rect);
    }
    
    

    function drawCircles()
    {
         let my_radius = 65;

         for(let i = 0; i < 5; i++)
         {
                  
                let circle =  new fabric.Circle({
                    left: 300,
                    top: 200,
                    radius: my_radius,
                    strokeWidth: 1,
                    stroke: '#000',
                    fill: '#cca',
                    originX:'center',
                    originY:'center'
                });
                  let text_shift = circle.left + 0; //change 60 to 0 to ses the results
                  const text = new fabric.Text((i + 1).toString(), {
                    left: (i !== 4) ? text_shift : circle.left,
                    top: circle.top,
                    fontFamily: 'Arial',
                    fontWeight: 'bold',
                    fontSize: 10,
                    fill: 'white',
                    originX: 'center',
                    originY: 'center'
                    
                });

                  const group = new fabric.Group([circle, text], {
                    left: circle.left,
                    top: circle.top,
                    originX: 'center',
                    originY: 'center',
                    selectable: false,
                  
                });

                canvas.add(group);

                my_radius -= 10;
         }
    }

    
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="fabricCanvas" width="500" height="400" style="border: 2px solid green;"></canvas>

如有任何帮助，我将不胜感激

Answer 1

要获得正确的角点位置，您可以将圆半径添加到中心位置。

left: circle.left + circle.radius - 5,

演示版

(function() {
  const canvas = new fabric.Canvas('fabricCanvas', {
    selection: false
  });
  fabric.Object.prototype.transparentCorners = false;
  drawRectangle();
  drawCircles()

  function drawRectangle() {
    const rect = new fabric.Rect({
      left: 200,
      top: 100,
      width: 200,
      height: 200,
      fill: 'green',
      angle: 0,
      padding: 0,
      class: 'rectangle',
      opacity: 0.6,
      originX: 'left',
      originY: 'top'
    });
    canvas.add(rect);
  }

  function drawCircles() {
    let my_radius = 65;
    for (let i = 0; i < 5; i++) {
      let circle = new fabric.Circle({
        left: 300,
        top: 200,
        radius: my_radius,
        strokeWidth: 1,
        stroke: '#000',
        fill: '#cca',
        originX: 'center',
        originY: 'center'
      });
      let text_shift = circle.left + 60; //change 60 to 0 to ses the results
      const text = new fabric.Text((i + 1).toString(), {
        left: circle.left + circle.radius - 5,//5px padding,else use text width
        top: circle.top,
        fontFamily: 'Arial',
        fontWeight: 'bold',
        fontSize: 10,
        fill: 'white',
        originX: 'center',
        originY: 'center'

      });

      const group = new fabric.Group([circle, text], {
        left: circle.left,
        top: circle.top,
        originX: 'center',
        originY: 'center',
        selectable: false,
      });
      canvas.add(group);
      my_radius -= 10;
    }
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="fabricCanvas" width="500" height="400" style="border: 2px solid green;"></canvas>

在 fabricjs 的嵌套圆圈内不显示重叠文本

Display no overalapping texts inside nested circles on fabricjs

javascript

fabricjs