Zeichnen überlappender halbtransparenter Linien ohne sichtbare Überlappung
Ich entwickle ein Malprogramm mit HTML5 Canvas. Ich habe ein Zeichenwerkzeug erstellt, wo der Benutzer die Maus zieht und bewegt.
Ich habe einen Listener auf mousemove event, der kurze Zeilen zeichnet:
Alles funktioniert gut, bis ich das globale Alpha auf & lt; 1. Wenn Sie diese Methode zum Zeichnen verwenden, ist der Endpunkt auch Startpunkt. Der Punkt wird also zweimal gezeichnet. Und weil wir eine transparente Farbe haben, hat der Punkt jetzt eine andere Farbe als andere Punkte in der Reihe.
Ich habe eine andere Methode ausprobiert, die beim Mausfeuern nur lineTo() und stroke() verwendet, wenn mouseup ausgelöst wird.
Dies löst das Problem der doppelten Zeichnung, bringt aber auch ein neues Problem mit sich: Wenn der Benutzer denselben Punkt zweimal zeichnen möchte, dh eine Linie ohne Mouse-Up, wird der Punkt nicht zweimal gezeichnet. Weil lineTo() function keinen Punkt zweimal ohne Strich zwischenzeichnet.
1 Antwort
(Wiederherstellung Ihres Problems) Ihr ursprüngliches Problem bestand darin, dass Sie durch Aufruf von beginPath() und stroke() für jedes Segment viele überlappende halbtransparente Pfade hatten. Ihr neues "Problem" besteht darin, dass Sie alle Ihre lineTo() -Befehle als Teil des gleichen Pfades erstellen und dann am Ende stroke() einmal aufrufen und alle sich selbst schneidenden Pfade, die der Benutzer beabsichtigt, nicht anzeigen eine sichtbare Überlappung.
Hier ist ein Beispiel, das den Unterschied zwischen dem Erstellen von
zeigt- viele semitransparente Zeilen in einem einzelnen Pfad und einmal streichend (oben links), im Gegensatz zu
- viele semitransparente Linien in verschiedenen Pfaden und streichen jeweils (unten rechts)
Ссылка
Ich würde sagen, dass Ihre aktuelle Lösung (ein einzelner Pfad) der richtige Weg ist, dies zu tun, obwohl ein einziger sich selbst kreuzender Pfad die Opazität nicht verdoppelt. Dies ist, was Sie in Adobe Photoshop und Illustrator sehen, wenn Sie halbtransparente Pfade zeichnen: Alle Zeichnungen mit der Maus nach unten sind Teil des gleichen, sich nicht überlappenden transparenten Objekts. Nur wenn der Benutzer die Maustaste loslässt und erneut drückt, akkumulieren Sie mehr Transparenz:
-
Zwei Photoshop Pinselstriche mit einer Opazität von 50%:
-
Zwei Illustrator-Pfade mit 50% Deckkraft:
Beachten Sie insbesondere, dass der sich selbst schneidende Strich und Pfad die Opazität beim Überfahren nicht verdoppelt, sondern ein separater neuer Pfad.
Ich empfehle Ihnen, bei Ihrer aktuellen Lösung zu bleiben, da sich diese traditionellen, gut durchdachten Anwendungen so verhalten. Ich sage das sowohl, weil Sie wollen, dass Ihr Paket die Erwartungen der Benutzer nachahmt, als auch, weil, wenn diese Pakete es so machen, gibt es wahrscheinlich einen sehr guten Grund dafür: das genaue Problem, das Sie ursprünglich hatten! :)
Tags und Links html5 canvas vector-graphics