Traducir un elemento con lienzo

Question

Estoy tratando de aprender el lienzo implementando un gráfico circular. He logrado analizar mis datos, dibujar las rodajas y calcular el centro de cada arco, como lo señaló los círculos negros. Pero ahora estoy tratando de dibujar una de las rodajas como si hubiera sido "deslizado". No animarlo (todavía), simplemente dibuja la porción como si se hubiera deslizado.

Pensé que la forma más fácil sería calcular primero el punto en el que debería ser la nueva esquina de la porción (de mano libre dibujada con la X roja), traducir allí, dibujar mi porción y luego traducir el origen de nuevo. Pensé que podría calcular esto fácilmente, ya que conozco el centro del gráfico circular y el punto del centro del arco (conectado con una línea negra de mano libre en la rebanada beige). Pero después de preguntar esta pregunta, parece que esto implicará resolver un sistema de ecuaciones, una de las cuales es el segundo orden. Eso es fácil con un bolígrafo y papel, desalentadoramente duro en JavaScript.

¿Existe un enfoque más simple? ¿Debo dar un paso atrás y darme cuenta de que hacer esto es realmente lo mismo que hacer XYZ?

Sé que no he proporcionado ningún código, pero solo estoy buscando ideas / pseudocódigo. (JQuery está etiquetado en el caso de que hay un complemento de alguna manera ayudará en este esfuerzo)

Answer 1

Obteniendo el x y y de la traducción es bastante fácil.

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

Conéctelo al código que Simon Sarris le dio y ya está. Sugeriría un off valor de 0.25.

Answer 2

Simplemente traducir un elemento en un lienzo es muy fácil y no debería haber ecuaciones difíciles aquí. En el sentido más básico es:

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

Aquí hay un ejemplo rudimentario de un pastel cuadrado y el mismo pastel con una de las cuatro "rebanadas" traducidas:

http://jsfiddle.net/xqwy2/

Para hacer que la pieza del pastel "se deslice", lo único que necesita para calcular es qué tan lejos desea que esté. En mi simple ejemplo, el bloque azul se desliza 10, -10.

Si se pregunta simplemente cómo obtener el X e Y que desea en primer lugar, bueno, esa no es una pregunta de JavaScript/Canvas. Para puntos en una línea dada una distancia esta pregunta: Encontrar puntos en una línea con una distancia dada parece el más claro

Editar, aquí estás (de comentarios):

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

Esto te daría un px, py de (104.24, 95.76) para mis entradas inventadas.