Bild wie Kreisdiagramm zuschneiden
Ich möchte das Bild über ein anderes Bild wie ein Kreisdiagramm zuschneiden, um eine Ladeanimation zu erstellen. Ich dachte daran, Raphaeljs zu verwenden, konnte aber keine Informationen zum Bildausschnitt im Tortendiagramm finden.
Hier sind die Beispielbilder:
Anfangszustand:
Endstatus:
Wie es aussehen sollte:
2 Antworten
Zeichnen Sie einfach einen halbtransparenten gefüllten Bogen über das Bild (stellen Sie den Alpha-Wert auf Ihren Wert ein):
Methode zwei - Compositing
Verwenden Sie zwei Schritte, um den gleichen Bogen oben zu schneiden, um stattdessen Bilder zu verwenden:
- Bogen zeichnen, dies sind die zusammengesetzten Daten
- Ändern comp. mode to
source-atop- nächste Zeichnung ersetzt den gezeichneten Bogen - Zeichnen Sie sekundäres Bild in
- Ändern comp. Modus zu
destination-atop- nächste Zeichnung füllt alle Nicht-Pixel - Zeichnen Sie das Hauptbild in
Demo:
Sie werden einen Algorithmus nach folgenden Kriterien benötigen:
- Zeichnen Sie Bild A auf Leinwand 1
- Leinwand 2 löschen
- Zeichnen Sie auf Canvas 2 einen Teilkreis für den aktuellen Zustand des Spinner, gefüllt mit weiß
- Blit Bild B auf Leinwand 2, mit dem multiplikativen Mischmodus
- Blit Canvas 2 auf Canvas 1 mit Standard (Ersetzen) Blending
Canvas 2 sollte das zweite Bild enthalten, das durch den Abschnitt maskiert wird, den Sie verwenden möchten. Wenn Sie dies auf Canvas 1 überlagern, vorausgesetzt, dass Sie mit der Transparenz richtig umgehen, sollten Sie den gewünschten Effekt erzielen.
Sie können auch zwei SVG-Kreise mit Bildhintergründen verwenden und dies trivial tun, vorausgesetzt, Ihre Zielbrowser unterstützen SVG.
Tags und Links javascript canvas raphael html5-canvas