Background images for tracing
Closed this issue · 5 comments
The ability to import a background image to trace over would be a huge boon for e.g. translating orthographic drawings into FTD replicas.
Some auxiliary features for usability:
- The ability to set and change the image scale (in source image pixels per grid square).
- The ability to set and change the X/Y offset for the image.
- An opacity slider.
- The ability to save the background image name and settings to the project file.
Nothing about this feature request is all that difficult. I wanted to be able to adjust the background and grid colors anyway, which would also be helpful.
The only thing I might need is an example of the sort of image you're talking about so I know what other UI work might need to be done (do I need to be able to set the color of grid lines or the background not covered by the image and such?). Does this image search for orthographic drawing boat give back the sort of stuff you work with?
I'm not sure that manual scaling is as desirable as you think, since odds are you just want to have the drawing scale and line up to the grid, and be able to resize the grid as needed to scale the image. So implementing this would also probably mean implementing #39, which is fine.
Notes for my own reference
How to access and transform the pixels of a SKBitmap object. Note that some methods of accessing all the pixels are much faster than others. This is important, since zooming in and out on the page doesn't actually zoom in and out. It simulates that by making each square bigger and smaller, so this could get slow if I'm not careful.
Exactly those kind of drawings.
The point on scale is essentially that it's not always possible to do an exactly 100% scale replica, and that it could be useful to sweep through and find the scale where things best align to the grid, whether that be at 97% or 120% or whatever. Similarly with x/y offset, since any origin point is going to be a compromise. But this is a set once and never touch it again kind of thing, so it could always be done in an external tool.
This is what I have so far. When you go to make a new grid or resize your canvas, there's a new option to use a background image, and set its opacity. There's also a text box with pixel information about your canvas.
I'm probably going to add offsets at some point.
Once this happens, the image is drawn behind the grid lines at the set opacity. The image is automatically scaled to fit the grid you have, and will rescale as you zoom in and out. Because zooming in and out actually redraws the canvas at a bigger square size, it would look strange if I didn't scale the image as I go. That said, I'm looking into making it so the grid background almost never completely re-renders, instead simply scaling its image up to make the code faster for large canvases.
The initial implementation has been merged into the main branch.
The implementation I have has been released with VGraph 1.9. Feel free to create a new issue if the background image feature needs some adjusting.