Перевод элемента с холста

Question

Я пытаюсь выучить холст, используя круговую диаграмму.Мне удалось проанализировать мои данные, нарисовать срезы и вычислить центр каждой дуги, как отмечено черными кругами.Но сейчас я пытаюсь нарисовать один из кусочков, как если бы он был «выдвинут».Не анимируйте его (пока), просто нарисуйте срез, как если бы он был выдвинут.

Я подумал, что самым простым способом будет сначала вычислить точку, в которой должен быть новый угол среза (свободный-черка, нарисованная красным X), переведите туда, нарисуйте мой срез, затем переведите начало координат обратно.Я думал, что мог бы легко рассчитать это, так как я знаю центр круговой диаграммы и точку центра дуги (связана с черной линией свободной руки на бежевом срезе).Но после того, как он задает этот вопрос , кажется, что это потребует решения системы уравнений, одним из которых является второй порядок.Это легко с ручкой и бумагой, пугающе сложно в JavaScript.

Есть ли более простой подход?Должен ли я сделать шаг назад и понять, что это действительно то же самое, что и XYZ?

Я знаю, что не предоставил никакого кода, но я просто ищу идеи / псевдокод.(jQuery помечен на случай, если плагин как-то поможет в этом деле)

Answer 1

Получение x и y перевода достаточно просто.

// cx and cy are the coordinates of the centre of your pie
// px and py are the coordinates of the black circle on your diagram
// off is the amount (range 0-1) by which to offset the arc
//      adjust off as needed.
// rx and ry will be the amount to translate by

var dx = px-cx, dy = py-cy,
    angle = Math.atan2(dy,dx),
    dist = Math.sqrt(dx*dx+dy*dy);
rx = Math.cos(angle)*off*dist;
ry = Math.sin(angle)*off*dist;

Включите это в код, который дал вам Саймон Саррис, и все готово.Я бы предложил off значение 0,25.

Answer 2

Простой перевод элемента на холсте очень прост, и здесь не должно быть сложных уравнений. В самом простом смысле это:

ctx.save();
ctx.translate(x, y);
// Draw the things you want offset by x, y
ctx.restore();

Вот элементарный пример квадратного пирога и того же пирога с одним из четырех переведенных кусочков:

http://jsfiddle.net/XqwY2/

Чтобы заставить кусок пирога "выскользнуть", единственное, что вам нужно рассчитать, это то, насколько вы хотите, чтобы он был. В моем простом примере синий блок выдвинут 10, -10.

Если вам просто интересно, как получить X и Y, которые вы хотите, во-первых, это не совсем вопрос javascript / canvas. Для точек на линии с заданным расстоянием этот вопрос: Поиск точек на линии с заданным расстоянием кажется наиболее понятным

Редактировать , вот вы (из комментариев):

  // Center point of pie
  var x1 = 100;
  var y1 = 100;

  // End of pie slice (your black dot)
  var x2 = 200;
  var y2 = 0;

  // The distance you want
  var distance = 3;

  var vx = x2 - x1; // x vector
  var vy = y2 - y1; // y vector
  var mag = Math.sqrt(vx*vx + vy*vy); // length
  vx = mag/vx;
  vy = mag/vy;

  // The red X location that you want:
  var px = x1 + vx * ( distance);
  var py = y1 + vy * ( distance);

Это даст вам px, py (104.24, 95.76) для моих вымышленных входов.