• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Canvas rotate Eckpunkte

bosko

bosko

Member
Hallo,

In mein Canvas Script habe ich mir eine Rechteck erstellt.

BS1.jpg

der Rote Punkt zeigt die Mitte des Objektes wo es sich Drehen soll,
hier soll die Eckpunkte (x,y,) ermittelt werden, so noch ganz leicht...

BS2.jpg

Wenn ich nun um 30Crad drehe, kann ich die leichte Berechnung von
"ecke1.x = center.xy + (breite.rechteck / 2)"
"ecke1.y = center.xy + (hoehe.rechteck / 2)"
für ein Punkt nicht mehr wirklich verwenden, wie berechnet man dies
nach einer Rotation?

Gruß
 
bosko schrieb:
wie berechnet man dies
nach einer Rotation?
Zum Vergrößern anklicken....
na idr drehst du ja das koordinatensystem und nicht das rechtek.
wenn du also
das koordinatensystem um 30° drehst: ctx.rotate(30);
und dein rechteck zeichnest: ctx.fillRect(0,0,100,100);
sind dieses punkte in deinem transformierten koordinatensystem.
mit ctx.setTransform(1, 0, 0, 1, 0, 0); kommst du wieder in das ursprungskoordinatensystem
und kannst mit ctx.rotate(30); jederzeit wieder in das transformierte wechseln
 
Guten Morgen,

nicht ganz das was ich meinte, denken wir man Canvas weg und gehen auf eine
neue Ausgangssituation aus.

Ich habe ein Pixel der auf x1 = 550 und y1 = 420 ligt,
nun verschiebe ich den Pixel von x2 = x1-20 und y2 = y1-10,
solle ja eigendlich nun x2y2 sein: 530 und 410
wenn ich nun die Position x1y1 um 30° drehe wo befinden sich
dann die Koordinaten x2y2?

Wie berechne ich das?
 
bosko schrieb:
nicht ganz das was ich meinte, denken wir man Canvas weg und gehen auf eine
neue Ausgangssituation aus.
Zum Vergrößern anklicken....
aber warum, wenn das canvas genau das bietet?

bosko schrieb:
Wie berechne ich das?
Zum Vergrößern anklicken....
der stichpunkt koordinatentransformation sollte eigentlich genug liefern
Code: 
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script>
      function trafo(p, a, b, c, d, e, f)
      {
        return { x: a * p.x + c * p.y + e, y: b* p.x + d * p.y + f };
      }
      // translate(p, x, y) = trafo(p, 1 0 0 1 x y)
      // rotate(p, a) = trafo(p, cos(a), sin(a), -sin(a), cos(a), 0, 0)
      
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      
      // KS transformieren
      ctx.translate(50, 50);
      ctx.rotate((30 * Math.PI) / 180);
      ctx.fillRect(0,0,100,100);
      
      // ins ursprungs KS
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      // ...
      
      // wieder ins transformierte KS
      ctx.translate(50, 50);
      ctx.rotate((30 * Math.PI) / 180);
      ctx.fillStyle = 'green';
      ctx.fillRect(5,5,90,90);
      
      
      // ins ursprungs KS
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      // ...
      
      // per Hand
      ctx.strokeStyle = 'red';
      ctx.beginPath();
      var p = { x: 0, y: 0 };
      p = trafo(p, Math.cos((30 * Math.PI) / 180), Math.sin((30 * Math.PI) / 180), -Math.sin((30 * Math.PI) / 180), Math.cos((30 * Math.PI) / 180), 50, 50);
      ctx.moveTo(p.x, p.y);
      var p = { x: 0, y: 100 };
      p = trafo(p, Math.cos((30 * Math.PI) / 180), Math.sin((30 * Math.PI) / 180), -Math.sin((30 * Math.PI) / 180), Math.cos((30 * Math.PI) / 180), 50, 50);
      ctx.lineTo(p.x, p.y);
      var p = { x: 100, y: 100 };
      p = trafo(p, Math.cos((30 * Math.PI) / 180), Math.sin((30 * Math.PI) / 180), -Math.sin((30 * Math.PI) / 180), Math.cos((30 * Math.PI) / 180), 50, 50);
      ctx.lineTo(p.x, p.y);
      var p = { x: 100, y: 0 };
      p = trafo(p, Math.cos((30 * Math.PI) / 180), Math.sin((30 * Math.PI) / 180), -Math.sin((30 * Math.PI) / 180), Math.cos((30 * Math.PI) / 180), 50, 50);
      ctx.lineTo(p.x, p.y);
      var p = { x: 0, y: 0 };
      p = trafo(p, Math.cos((30 * Math.PI) / 180), Math.sin((30 * Math.PI) / 180), -Math.sin((30 * Math.PI) / 180), Math.cos((30 * Math.PI) / 180), 50, 50);
      ctx.lineTo(p.x, p.y);
      ctx.stroke();
    </script>
  </body>
</html>

- - - Aktualisiert - - -

https://de.wikipedia.org/wiki/Koordinatentransformation
https://www.lernhelfer.de/schuelerlexikon/mathematik-abitur/artikel/koordinatentransformationen
http://www.mathepedia.de/Koordinatentransformation.aspx
 
Danke,

hab dein script mal durch geteste und etwas verändert...

Code: 
    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
      </head>
      <body>
			x <span id="px">0</span> y <span id="py"></span>
        <script>
          function trafo(p, a, b, c, d, e, f)
          {
            return { y: b* p.x + d * p.y + f, x: a * p.x + c * p.y + e };
          }
          
          elPX     = document.getElementById('px');
          elPY     = document.getElementById('py');

          var p = { x: 870, y: 370 };
          var r = 30;
          
          ps = trafo(p, Math.cos(r * Math.PI/180), Math.sin(r * Math.PI/180), -Math.sin(r * Math.PI/180), Math.cos(r * Math.PI/180), -8, -50);
          
          elPX.innerHTML = Math.floor(ps.x);
          elPY.innerHTML = Math.floor(ps.y);
        </script>
      </body>
    </html>

Leider ist das ergebnis nicht das was ich erwartet habe...

Wenn ich "r = 0" setze kommt alles richtig raus, setzte ich "r = 30"
sind die xy Koordinaten unrealistisch...

- - - Aktualisiert - - -

ok so wie es aussieht muss ich:

var r = 30 / 100;

setzen um auf ein richtiges ergebniss zu kommen
 
bosko schrieb:
Wenn ich "r = 0" setze kommt alles richtig raus, setzte ich "r = 30"
sind die xy Koordinaten unrealistisch...
Zum Vergrößern anklicken....
dann hast du was nicht beachtet, mit einem richtigen beispiel würde man auch sehen was
Code: 
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="1000" height="1000"></canvas>
    <script>
      function trafo(p, a, b, c, d, e, f)
      {
        return { x: a * p.x + c * p.y + e, y: b* p.x + d * p.y + f };
      }
      // translate(p, x, y) = trafo(p, 1 0 0 1 x y)
      // rotate(p, a) = trafo(p, cos(a), sin(a), -sin(a), cos(a), 0, 0)
      
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      
      // KS transformieren
      ctx.translate(-8, -50);
      ctx.rotate((30 * Math.PI) / 180);
      ctx.beginPath();
      ctx.arc(870, 370, 1, 0, 2 * Math.PI);
      ctx.stroke();
      
      // ins ursprungs KS
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      // ...
      
      // per Hand
      ctx.strokeStyle = 'red';
      var p = { x: 870, y: 370 };
      p = trafo(p, Math.cos((30 * Math.PI) / 180), Math.sin((30 * Math.PI) / 180), -Math.sin((30 * Math.PI) / 180), Math.cos((30 * Math.PI) / 180), -8, -50);
      ctx.beginPath();
      ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI);
      ctx.stroke();
    </script>
  </body>
</html>
wenn ich raten müsste, würde ich auf den centerpoint der rotation tippen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben