Gradient ein Parallelogramm

Question

Ich arbeite in JavaScript auf einer Leinwand zeichnen und vier Koordinaten haben, um ein Parallelogramm zu zeichnen, genannt A, B, C und D, beginnend von oben links, oben rechts, unten links, und unten rechts.

Ein Beispiel einiger Koordinaten sein könnte:

A: (3, 3)

B: (4, 3)

C: (1, 0)

D : (2, 0)

Ich kann das Parallelogramm gut zeichnen, aber ich möchte es mit einem Gradienten füllen. Ich möchte, dass der Verlauf von links nach rechts ausgefüllt wird, aber der Winkel der Form angepasst wird. Die verwendete Bibliothek (CAKE) benötigt eine Start- und Stoppkoordinate für den Farbverlauf. Mein Stop und Start würde irgendwo auf halbem Weg zwischen A und C liegen und irgendwo auf halbem Wege zwischen B und D enden. Natürlich ist es nicht einfach GENAU halb, weil die Winkel bei A, B, C und D keine rechten Winkel sind . Also nach dieser Information (die Koordinaten), wie finde ich den Punkt auf der Linie A -> C zu starten, und den Punkt auf der Linie B -> D zu stoppen?

Denken Sie daran, ich mache das in JavaScript, also habe ich einige gute Math-Tools zur Berechnung zur Verfügung.

Answer 1

Was Sie in Ihrem Kommentar angegeben haben, ist mit weiteren Informationen machbar (z.

Stattdessen nehmen die zum Beispiel nach, was ich denke, ist näher an, was Sie anstreben:

Wie Sie sehen können, die Gradienten für das oben Parallelogramm machen ignorieren wir die AC und BD Seiten und machen den Gradienten relativ zu AB und CD. Sie können entscheiden, welches Paar Seiten verwendet werden soll, aber ich würde wahrscheinlich nach Länge gehen, so dass die Anzeige über alle Ihre Parallelogramme konsistent ist (entweder möchten Sie den Gradienten relativ zu dem Paar längerer Seiten oder den kürzeren, Ihrer Wahl, aber persönlich Ich würde mit den längeren Seiten gehen).

Nehmen wir an, Sie wählen AB. Die Steigung der Linie senkrecht zu AB ist der umgekehrte Kehrwert der Steigung von AB, die (ax-bx)/(by-ay) ist (Vorsicht bei der Division durch Null hier!).

Als nächstes müssen Sie 2 Gradientenpunkte finden, die zwei geeignete Punkte auf jeder Linie mit dieser Steigung sein werden. Eine Möglichkeit ist, die Linie durch gehen zu holen A verwendet A als Ausgangspunkt, und verwenden Sie den Punkt, an dem es mit CD schneidet als Endpunkt (Sie this page als Leitfaden für herauszufinden, die Kreuzung verwenden können Punkt). Ansonsten behalte die Steigung, aber passe die Punkte nach deinem Geschmack an, um den gewünschten Farbverlauf zu erhalten.

Sobald Sie Ihre Punkte für Ihre Steigung haben, schließen Sie sie an und es ist ein Stück KUCHEN!