Übersetzen eines Elements mit Leinwand

Question

Ich versuche, Leinwand durch die Implementierung eines Kreisdiagramms zu lernen. Ich habe es geschafft, meine Daten zu analysieren, die Scheiben zu zeichnen und die Mitte jedes Bogens zu berechnen, wie in den schwarzen Kreisen angegeben. Aber jetzt versuche ich, eines der Scheiben zu zeichnen, als wäre es "herausgeschlagen". Noch nicht animieren (noch), zeichne einfach das Scheiben, als wäre es herausgefahren worden.

Ich dachte, der einfachste Weg wäre es, zuerst den Punkt zu berechnen, an dem die neue Ecke des Schichts sein sollte (freie Hand mit dem roten x), dort übersetzt, meine Scheibe zeichne und dann den Ursprung zurücksetzen. Ich dachte, ich könnte das leicht berechnen, da ich die Mitte des Kreisdiagramms und den Punkt der Mitte des Bogens kenne (verbunden mit einer freien schwarzen Linie auf der Beige-Slice). Aber nachdem er gefragt hatte diese Frage, Es scheint, dass dies die Lösung eines Gleichungssystems beinhaltet, von denen eines zweiter Ordnung ist. Das ist einfach mit einem Stift und Papier, die in JavaScript entmutig hart sind.

Gibt es einen einfacheren Ansatz? Sollte ich einen Schritt zurücktreten und erkennen, dass dies wirklich dasselbe ist wie XYZ?

Ich weiß, dass ich keinen Code bereitgestellt habe, aber ich suche nur nach Ideen / Pseudocode. (JQuery ist mit dem Off -Chance mit einem Plugin versehen, das in diesem Bestreben irgendwie hilft)

Answer 1

Das bekommen x und y der Übersetzung ist leicht genug.

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

Stecken Sie das in den Code, den Simon Sarris Ihnen gegeben hat und Sie sind fertig. Ich würde einen vorschlagen off Wert von 0,25.

Answer 2

Es ist sehr einfach, nur ein Element auf eine Leinwand zu übersetzen, und es sollte hier keine kniffligen Gleichungen geben. Im grundlegendsten Sinne ist es:

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

Hier ist ein rudimentäres Beispiel für einen quadratischen Kuchen und denselben Kuchen mit einer der vier "Scheiben" übersetzt:

http://jsfiddle.net/xqwy2/

Damit das Kuchenstück "herausrutschen", müssen Sie nur berechnen, wie weit Sie es möchten. In meinem einfachen Beispiel wird der blaue Block herausgezogen 10, -10.

Wenn Sie sich nur fragen, wie Sie das X und Y erhalten, das Sie überhaupt wollen, ist das keine JavaScript/Canvas -Frage. Für Punkte in einer Zeile, die eine Entfernung in dieser Frage bezeichnet: Punkte in einer Linie mit einer bestimmten Entfernung finden scheint am klarsten zu sein

Bearbeiten, hier bist du (aus Kommentaren):

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

Dies würde Ihnen einen PX geben, Py von (104.24, 95.76) für meine erfundenen Eingaben.