var canvas = new fabric.Canvas(document.querySelector('#my-canvas'));

​

var circleConfig = {

  radius: 200,

  fill: '',

  stroke: '#333',  

  originX: 'center',

  originY: 'center'

};

​

drawCircle(circleConfig);

​

var count = 10;

var commonRectConfig = {

  width: 25,

  height: 110,

  fill: '',

  stroke: '#333'

};

​

var innerRadius = circleConfig.radius - commonRectConfig.height;

var innerCircum = innerRadius * 2 * Math.PI;

​

​

var angleStep = 360 / count;

var angle = 0;

var rectRadius = circleConfig.radius - commonRectConfig.height / 2;

​

for(var i = 0; i < count; i++) {

  var radAngle = angle * Math.PI / 180;

  var rectConfig = Object.assign({

    left: canvas.getHeight() / 2 + rectRadius * Math.cos(radAngle),

    top: canvas.getWidth() / 2 + rectRadius * Math.sin(radAngle),

    aLeft: canvas.getHeight() / 2 + (rectRadius-10) * Math.cos(radAngle),

    aTop: canvas.getWidth() / 2 + (rectRadius-10) * Math.sin(radAngle),

    angle: angle + 90,

    originX: "center",

    originY: "center"

  }, commonRectConfig)

  angle += angleStep;

  drawRectangle(rectConfig);

}

​

numberRect();

markAsterisk();

​

function markAsterisk() {

   canvas.getObjects('text').forEach(number => {

     addAsterisk(number, '*')

   })

}

​

function numberRect() {

  let currentNumber = 1;

  canvas.getObjects('rect').forEach((rect) => {

            addNumber(rect, currentNumber);

            currentNumber++;

        });

}

​

function addAsterisk(fnumber, value) {

  let numberConfig = getNumberConfig(fnumber);

  let number = createText(value, numberConfig);

  let rect = canvas.getObjects('rect').find(r=> {

    return r.number.text  ===fnumber.text;

  })

  number.set('top', rect.aTop);

  number.set('left', rect.aLeft);

​

  this.canvas.add(number);

  this.canvas.bringToFront(number);

}

​

function addNumber(rect, value) {

  let numberConfig = getNumberConfig(rect);

  let number = createText(value, numberConfig);

  rect.number = number;

  this.canvas.add(number);

  this.canvas.bringToFront(number);

}

​

​

 function getNumberConfig(rect) {

        let top, left;

        let centerPoint = rect.getCenterPoint();

        top = centerPoint.y;

        left = centerPoint.x;

​

        let scaleX = rect.scaleX || 1;

        let scaleY = rect.scaleY || 1;

        let angle = rect.angle || 0;

​

        return {           

            top: top,

            left: left,

            originX: 'center',

            originY: 'center',

            fontSize: 12,

            fill: 'red',

            selectable: false,

            scaleX: scaleX,

            scaleY: scaleY,

            angle: angle  

        }

    }

​

function createText(text, config) {

        let textF = new fabric.Text(text.toString(), config);

        return textF;

    }

​

function drawCircle(config) {

  var circle = new fabric.Circle(config);

  canvas.add(circle);

  circle.center();

}

​

function drawRectangle(config) {

  var rect  = new fabric.Rect(config);

  canvas.add(rect);

}