Как получить координаты каждого круга из этого холста - PullRequest
Новая
       5

Как получить координаты каждого круга из этого холста

2 голосов
/ 27 февраля 2020

Мне нужно создать шаблон, в котором 5 кругов соединены линиями со средним основным кругом. Таким образом, я создал динамически, вращаясь в некотором определенном углу. Теперь мне нужны координаты осей x и y каждого круга для захвата событий щелчка на каждом круге.

Помогите, пожалуйста, как узнать координаты каждого круга? 

var canvas, ctx;
function createCanvasPainting() {
    
    canvas = document.getElementById('myCanvas');
    if (!canvas || !canvas.getContext) {
        return false;
    }
    canvas.width = 600;
    canvas.height = 600;
    ctx = canvas.getContext('2d');           
    ctx.strokeStyle = '#B8D9FE';
    ctx.fillStyle = '#B8D9FE';
    ctx.translate(300, 250);
    ctx.arc(0, 0, 50, 0, Math.PI * 2); //center circle
    ctx.stroke();
    ctx.fill();
    drawChildCircles(5);
    fillTextMultiLine('Test Data', 0, 0);
    drawTextInsideCircles(5);
  }

  function drawTextInsideCircles(n) {
    let ang_unit = Math.PI * 2 / n;
    ctx.save();
    for (var i = 0; i < n; i++) {
      ctx.rotate(ang_unit);
      //ctx.moveTo(0,0);
      fillTextMultiLine('Test Data', 200, 0);
      ctx.strokeStyle = '#B8D9FE';
      ctx.fillStyle = '#B8D9FE';
    }
    ctx.restore();
  }

  function drawChildCircles(n) {
    let ang_unit = Math.PI * 2 / n;
    ctx.save();
    for (var i = 0; i < n; ++i) {
      ctx.rotate(ang_unit);
      ctx.beginPath();
      ctx.moveTo(0,0);
      ctx.lineTo(100,0);
      
      ctx.arc(200, 0, 40, 0, Math.PI * 2);
      let newW = ctx.fill();
      
      ctx.stroke();
    }
    
    ctx.restore();
  }

  function fillTextMultiLine(text, x, y) {
    ctx.font = 'bold 13pt Calibri';
    ctx.textAlign = 'center';
    ctx.fillStyle = "#FFFFFF";
    // Defining the `textBaseline`… 
    ctx.textBaseline = "middle";
    var lineHeight = ctx.measureText("M").width * 1.2;
    var lines = text.split("\n");
    
    for (var i = 0; i < lines.length; ++i) {
      // console.log(lines);
      if (lines.length > 1) {
        if (i == 0) {
          y -= lineHeight;
        } else {
          y += lineHeight;
        }
      }
      ctx.fillText(lines[i], x, y);
    }
  }

  createCanvasPainting();
<canvas id="myCanvas"></canvas>

1 Ответ

0 голосов
/ 27 февраля 2020

Проблема здесь в том, что вы вращаете матрицу холста, и ваши круги не знают об их абсолютных позициях.

Почему бы вам не использовать простую тригонометрию для определения центра вашего круга и окончания из соединительных линий? 

function lineToAngle(ctx, x1, y1, length, angle) {

    angle *= Math.PI / 180;

    var x2 = x1 + length * Math.cos(angle),
        y2 = y1 + length * Math.sin(angle);

    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();

    return {x: x2, y: y2};
}

Ссылка: Поиск координат после холста Поворот

После этого, учитывая xy центр ваших кругов, вычисляется, находится ли координата внутри круг, вы можете применить следующую формулу: 

Math.sqrt((x1-x0)*(x1-x0) + (y1-y0)*(y1-y0)) < r

Ref: Определить, если пользователь нажимает внутри круга

...