Frage an html5-canvas, canvas, html5 – HTML5 canvas drawImage mit Punkten?

2

Ich muss ein Bild mit 4 Punkten zeichnen. Ich habe diese 4 Punkte in einem Array gespeichert, diese Positionen ändern sich. Jetzt muss ich ein Bild zeichnen, das diese Positionen widerspiegelt. Das context.drawImage akzeptiert nur 1 Position.

Es sollte so sein, 4 Positionen:

x,y----------x,y
 |            |
 |            |
 |            |
 |            |
 |            |
x,y----------x,y
Um zu verdeutlichen, dass ich Sie richtig verstehe, besteht die Möglichkeit, dass das Bild schief und nicht perfekt quadratisch ist. Daedalus
Nicht perfekt quadratisch, richtig. Forested

Deine Antwort

2   die antwort
4

Normalerweise teilen Sie Ihre Form in zwei Dreiecke (Flächen) auf und zeichnen sie einzeln mit einer Texturfüllung.

Hier ist eine (komplexe) Lösung für das Problem:https://github.com/mrdoob/three.js/blob/master/src/renderers/CanvasRenderer.js#L838 Three.js 3D Engine mit 2D<canvas> als Rendering-Engine.

Da die Sache nicht so einfach ist, schlage ich vor, dass Sie Three.js oder einen ähnlichen Wrapper verwenden, der eine Abstraktion auf hoher Ebene über texturierte Gesichtsoperationen bietet. Schauen Sie sich andere Three.js 2D an<canvas> Beispiele und Sie bekommen die Idee, wie es funktioniert:

http://mrdoob.github.com/three.js/

Behobener Link (Ich habe überprüft, ob der ursprüngliche Link auf eine Funktion namens patternPath zeigte, als er gepostet wurde):github.com/mrdoob/three.js/blob/r91/examples/js/renderers/… Shaun Lebron
5
Quad Warping ist das, was Sie brauchen, kein komplexes 3D

Quadrat rendern.

Die korrekte Methode hierfür ist die Berechnung der Transformationsmatrix, ohne dass echte 3D-Inhalte gerendert werden müssen. Dies erfolgt durch Berechnen einer Homographiematrix. Dazu müssen Sie Transformationsmatrizen verstehen und Code zum Lösen einiger Gleichungen implementieren.

Dieser Prozess ist gut verstanden und erfordert die ursprünglichen vier Koordinaten und die vier Zielpunkte, und Sie haben sie, sodass Sie nur einen Prozess zum Berechnen der Transformationsmatrix benötigen. Diese Matrix wird im Wesentlichen durch Gauß-Jordan-Eliminierung berechnet.

Überprüfen Sie dies über den Matrixlöser und die allgemeine Vorgehensweise. Sobald Sie Transformationen verstehen, wird es trivial, dies zu tun. EbenfallsÜberprüfen Sie dies, um zu verstehen, was eine Homographie ist. UndHier wird erklärt, wie es berechnet wird, mit Beispielen für Javascript und CSS.

Demo

Hier ist eine großartige Demo mit Quelle und Erklärung.

Toller Demo-Link +1 Tolles Zeug: o Fidel90
Es gibt (zumindest) zwei Möglichkeiten, ein Quad einem Rechteck zuzuordnen. Der andere, den ich kenne, istbilineare Interpolation. Das ist es, was Menschen ohne genügend mathematische Logik manchmal finden, wenn sie versuchen, es intuitiv zu implementieren, aber es verzerrt Diagonalen in Kurven. hippietrail

Verwandte Fragen