Tradurre un elemento con tela

Question

Sto cercando di imparare tela mediante l'attuazione di un grafico a torta. Sono riuscito a analizzare i miei dati, disegnare le fette, e calcolare il centro di ogni arco, come notato dai cerchi neri. Ma ora sto cercando di disegnare una delle fette come se fosse stato "scivolare fuori". Non animarla (ancora), semplicemente disegnare la fetta come se fosse stato fatto scorrere fuori.

ho pensato che il modo più semplice sarebbe quella di prima calcolare il punto in cui il nuovo angolo della fetta dovrebbe essere (disegnato con la X rossa a mano libera), tradurre lì, disegnare la mia fetta, quindi tradurre la schiena origine. Ho pensato che avrei potuto calcolare questo facilmente, perché so il centro del grafico a torta, e il punto del centro dell'arco (collegata con una linea nera a mano libera sulla fetta beige). Ma dopo aver chiesto questa domanda , sembra questo comporterà risolvendo un sistema di equazioni, uno dei quali è secondo ordine. Che è facile con carta e penna, scoraggiante duro in JavaScript.

C'è un approccio più semplice? Dovrei fare un passo indietro e rendersi conto che fare questo è davvero lo stesso di fare XYZ?

so che non hanno fornito alcun codice, ma sto solo cercando idee / pseudocodice. (JQuery è etichettato nella remota possibilità c'è un plugin in qualche modo di aiuto in questo sforzo)

Answer 1

Come la x e y della traduzione è abbastanza facile.

// 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;

Plug che nel codice Simon Sarris ti ha dato e il gioco è fatto. Io suggerirei un valore off di 0,25.

Answer 2

La semplice traduzione di un elemento su una tela è molto semplice e non dovrebbe esserci alcuna equazioni difficili qui. Nel senso più semplice è:

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

Ecco un esempio rudimentale di una torta quadrata e la stessa torta con uno dei quattro "fette", tradotto:

http://jsfiddle.net/XqwY2/

per rendere il pezzo di torta "slide out" l'unica cosa che devi calcolare è quanto si vuole che sia. Nel mio semplice esempio il blocco blu è scivolato 10, -10.

Se vi state chiedendo semplicemente come ottenere il X e Y si desidera, in primo luogo, bene, che non è del tutto una domanda javascript / tela. Per i punti su una linea data a questa domanda una distanza: punti Trovare su una linea con una data distanza sembra la più chiara

Modifica , qui si sono (da commenti):

  // 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);

Questo darebbe un px, py di (104.24, 95.76) per i miei ingressi inventate.