HTML5 -Leinwand - Binden mit niedrigem Alpha?

Question

Einführung

Ich entwickle derzeit eine kleine Zeichnungsanwendung ähnlich wie Mugtugs Sketchpad. Es gibt jedoch ein ziemlich ärgerliches Problem, das ich noch nicht geschafft habe, um mich fortzubewegen.

Zeichnungsalgorithmus

Mein grundlegender Zugalgorithmus ähnelt dem von Mugtug verwendeten. Grundsätzlich stempelt es nur Bilder mit Drawage, während der Benutzer zeichnet. Es gibt ein ernstes Handicap. Der Algorithmus scheitert mit niedrigem Alpha.

Sie können dies einfach im Werkzeug des Mugtugs sehen, indem Sie die Pinseleinstellungen auf folgende Weise einstellen: Durchmesser -> 100, Härte -> 1, Fluss -> 100, Deckkraft -> 2 (1 ist zu klein! Fehler in der App?).

Es gibt zwei Hauptprobleme: 1. sichtbare Banding. 2. Farbverschiebungen (geben Sie verschiedene Farben an, um zu sehen, wie dies funktioniert ...)

Fragen

Könnte das Problem etwas mit Farbpräzision zu tun haben? Es scheint mir, dass die Canvas-API Farben mit 8-Bit-Kanälen (dh 0-255) behandelt. Gibt es eine Möglichkeit mit dieser Einschränkung? Ich würde es vorziehen, wenn möglich reine Float-Farben (0,0-1.0) zu verwenden.

Alle Ideen, wie man damit umgeht, sind willkommen. Wenn die Farbe in der Tat auf 8 -Bit -Kanäle begrenzt ist, habe ich wohl kein Glück mehr ...

Answer 1

Dieses Problem scheint ausschließlich auf Farbgenauigkeit zurückzuführen. Ich denke, die meisten Canvas -API -Implementierungen verwenden 8 -Bit -RGBA -Kanäle. 1% oder 2% Opazität bedeutet, dass Sie eine sehr kleine Menge Farbe auf das Bild anwenden, nur etwa 2-5 Differenzniveaus. Selbst nach vielen wiederholten Anwendungen des Pinsels werden alle Farben, die Sie verwenden quantisiert auf eine kleinere Zahl.

Sie können Ihre eigenen zu einer schwimmenden Punkte machen und nach jeder Änderung in eine normale Leinwand kopieren. Dies macht das Problem für die meisten Operationen völlig unbemerkt. Sie müssten Ihre eigenen Zeichenvorgänge implementieren (nicht schlecht, wenn Sie nur verwenden drawImage) und sie sind wahrscheinlich langsamer als die Leinwand.

Answer 2

Sehen Sie ähnliche Probleme in Mugtugs Sketchpad? Ich habe es mit einem 4% Alpha -blauen Pinsel über einem orangefarbenen Hintergrund ausprobiert, und es gibt Bande und so. Wenn es besser ist als Ihr Code, dann machen Sie etwas falsch.

Ich habe immer gesehen, wie Leinwand mit 32 -Bit -Grafiken arbeitet (24 für Farbe + 8 für Alpha), daher bezweifle ich, dass dies gelöst werden kann.