So I have an image I'm trying to use as a step indicator, I have it displaying correctly but I want to fill the background of said image. I cannot use fillRectangle due to its odd shape and I've tried mapping out all the indices into an array to use fillPolygon but that's not working either. Is there another way to go about doing this? Attached is the image, if someone can point me in the right direction that would be great. Thanks!
Do you just want to fill inside the edges of the foot, but not outside? Is there some reason that you don't use your image editor to fill in the color there? Are you trying to get the image to be displayed with different fill color without having to make multiple images?
If you want to have the image change color, one way to do it without have a number of different colored images is to make your images a custom font. (so "S" could be your "steps" image, for example).
Then you set the color and display that "character".
Yes, my desire is to fill the inner part of the foot w/ different colors (i.e. red for the first 50%, yellow for the next 49% and finally green for 100%). I really don't want to make individual images as this may take up a lot of memory in what should be a simple update to an already created watchface. I've seen some faces out there where they are doing something similar to what I'd like to do such as the doctor who and valentine's watch faces. Just haven't figured this bit out yet. Thanks for replying
How about an image that has the full foot transparent and then use fillRectangle() to color in the appropriate level? If you draw the image on top of the rectangle it would mask the rectangle and I think you'd get the desired affect.
Awesome, thanks guys! I am currently using the image in a layout file but I can easily move it out and draw it separetly like I have in the past. I'll give this a shot tonight.
While you could use transparency as suggested above, it shouldn't be necessary.
I was under the impression that you could have many different image resources and that wouldn't affect the memory used by the application until you loaded them. If you had resource A loaded, unloaded A (by assigning it to null) and then loaded B, the memory used by the application wouldn't change. Is this incorrect?
While you could use transparency as suggested above, it shouldn't be necessary.
I was under the impression that you could have many different image resources and that wouldn't affect the memory used by the application until you loaded them. If you had resource A loaded, unloaded A (by assigning it to null) and then loaded B, the memory used by the application wouldn't change. Is this incorrect?
Travis
This approach should work too. It's really a matter of preference when coding it.
I think if I were implementing it I would include a custom Drawable in the layout and inside of that Drawable I would use fillRectangle() and the transparent foot image to draw things. That would prevent having to create/maintain a bunch of different images for different levels.
And the custom Drawable class being:
class StepIndicator extends Toybox.WatchUi.Drawable {
function initialize(params) {
Drawable.initialize(params);
}
function draw(dc) {
// Draw the rectangle here using locX/locY
// Then draw the masking image here
}
}
Again, both ways would work. It's just a matter of how you'd want to handle it.
