Open hamishlawson opened 2 years ago
This does look nice. I'm not sure if it's feasible to modify user defined images like that but definitely worth looking into.
I think an approach might be to create respectively transparent and white images of the appropriate size and combine these with the user's image to give a new image to be used for the flag. This Stack Overflow question discusses combining images in JavaScript.
The top comment is using a canvas based solution, which is what I had in mind anyway, neat.
I've noticed that the flag gets slightly truncated at the hoist, presumably because the flag is treated as being affixed directly to the axis of the flagpole and so some of it is effectively hidden within the flagpole; this is more noticeable with some flag designs. To compensate for this I suggest that FlagWaver adds a transparent strip or a white strip or both to the hoist edge of the flag image. In addition to solving the issue of part of the flag being lost, an added transparent strip would more realistically simulate the appearance of a flag hoisted by ropes, while an added white strip would simulate hoist tape.
Mockups:
transparent strip
white strip
both