search

vintage / scratcher

Scratch card widget which temporarily hides content from user.
https://pub.dev/packages/scratcher
MIT License
572 stars 67 forks source link

Support image transparency in scratching progress #16

Closed dariobrux closed 1 month ago

dariobrux commented 4 years ago

Hi @vintage ,

When I scratch on the Scratcher widget composed by an image that covers a Container child, I noticed that the percentage is not correctly updated: the image I'm using is a .png with transparency, but the percentage retrieved by the onChange: (value) {} callback, is updating when I also scratch any transparent part of the image. So, it seems that I reach 100% by onThreshold: () {} after scratching all the image.

Instead, in this case, I was expecting to get the percentage progression only on the not transparent png.

Do you know any suggestions about this?

Thank you very much,

Dario

vintage commented 4 years ago

Well, that's definitely not possible in current implementation. It doesn't matter what color is located at given coordinates of the image - could be black, yellow, or mentioned transparent. The scratch checkpoints are evenly distributed across the whole area and it would be tricky to handle different scenarios.

For now (depends on what exact image are you working on) you could use multiple scratch widgets and cover them with non-transparent parts of the images, but again - that would require extra work by dividing the image into multiple chunks, won't be as accurate as single one and in some cases would require enormous number of widgets to position everything correctly. Well, who said that's gonna be easy ;)

In the scratcher itself I should be able to expose some ignoreTransparency (TODO: find better naming) and do not generate checkpoints there. Not yet sure about performance of such solution as it would require some extra sampling work to discover whether the point is transparent or not. Will need to research it, but it should be probably enclosed within https://github.com/vintage/scratcher/blob/master/lib/widgets.dart#L250

Just a note - I'm on holidays right now and would be back online around mid of September to pick it up. If you want to play around with the concept - feel free to fork ;)

wenxiangjiang commented 3 years ago

This is really a great idea, and I also need this feature now. Thanks!

vintage commented 3 years ago

It's much tricker to implement than I've expected. Got some early prototype, but it doesn't play well with the fact that the image can have various BoxFit applied which determines how it would be rendered on the screen. Fetching the pixel colors through the underlying canvas could be the way to go, didn't yet investigate it. Too bad the Flutter itself do not yet expose built-in functionality for fetching color from the canvas (in custom painter) https://github.com/flutter/flutter/issues/44117