So fügen Sie einem transparenten PNG-Bild in JavaScript-Canvas Strich / Umriss hinzu
Was ist der einfachste Weg, um einem transparenten PNG-Bild mithilfe von JavaScript-Canvas einen Outline / Stroke-Effekt hinzuzufügen?
Beliebtestes Bild Effekt Bibliotheken, die ich gefunden habe, hat keinen Schlaganfall-Effekt. Die nächste Lösung auf StackOverflow, die ich gefunden habe, ist Verwenden Sie die Weichzeichnung, um einen Glow-Effekt zu erzielen statt eines Konturstrichs.
Originalbild
Transparentes PNG-Bild, das mehrere getrennte Formen haben kann:
Resultierendes Bild
Transparentes Bild mit Konturstrich und Schatten angewendet.
Die Suche wird fortgesetzt ...
Ich werde diese Liste aktualisieren, wenn ich nach dem einfachsten Weg suche, um den Schlaganfall-Effekt zu erreichen. Verwandte Fragen:
1 Antwort
Hier ist eine Möglichkeit, Ihrem Bild einen "Aufklebereffekt" hinzuzufügen ...
Eine Demo: Ссылка
Beginnen Sie, indem Sie Ihr Originalbild auf die Hauptarbeitsfläche zeichnen.
Zerlegen Sie das Bild in "diskrete Elemente".
Diskrete Elemente bestehen aus Gruppen von Pixeln, die miteinander verbunden sind, aber nicht mit anderen Elementen verbunden sind. Zum Beispiel wäre jedes einzelne Sprite auf einem Spritesheet ein eigenständiges Element.
Sie können diskrete Pixelgruppen mit einem Kantenerkennungsalgorithmus wie "marschierende Quadrate" finden.
Legen Sie jedes einzelne Element auf seine eigene Leinwand für die weitere Verarbeitung. Löschen Sie auch dieses diskrete Element aus dem Hauptbereich (damit es nicht erneut verarbeitet wird).
Ermitteln Sie den Outline-Pfad jedes einzelnen Elements.
Sie können erneut den Algorithmus "Marching Squares" verwenden, um Kantenerkennung durchzuführen. Das Ergebnis von Marschquadraten ist ein Array von x / y-Koordinaten, die den äußeren Umriss des Elements bilden.
Erstellen Sie den "Sticker-Effekt"
Sie können einen Sticker-Effekt erstellen, indem Sie um jedes Element einen weißen Strich ziehen. Tun Sie dies, indem Sie den oben berechneten Outline-Pfad streichen. Sie können dem Strich optional einen Schatten hinzufügen.
Hinweis: Canvas-Striche werden immer halb-innen & amp; halb außerhalb des Pfades. Dies bedeutet, dass der Aufkleber-Strich in das Element eindringt. Um das Problem zu beheben: Nachdem Sie den Stickstrich gezeichnet haben, sollten Sie das Element wieder nach oben ziehen. Dies überschreibt den eindringenden Teil des Aufkleberstrichs.
Das endgültige Bild einschließlich des Sticker-Effekts neu zusammenstellen
Legen Sie das endgültige Bild erneut zusammen, indem Sie die Arbeitsfläche jedes Elements auf der Hauptarbeitsfläche überlagern.
Hier ist ein annotierter Beispielcode:
%Vor%Dies ist ein marschierender Quadrate-Kantenerkennungsalgorithmus (aus der ausgezeichneten Open-Source-d3-Bibliothek):
%Vor% Hinweis: Dieser Code trennt den Vorgang des Anbringens der Aufkleberkontur in einer separaten Funktion. Dies ist der Fall, wenn Sie mehrere Ebenen um Ihr diskretes Element herum haben möchten. Zum Beispiel möchten Sie möglicherweise einen zweiten grauen Rand außerhalb des Aufkleberstrichs. Wenn Sie keine "Ebenen" anwenden müssen, können Sie den Stickstrich in der Funktion moveDiscreteElementToNewCanvas anwenden.
Tags und Links javascript canvas image-processing