3 ms·

Do you know of any systems which allow for a background picture that it can be plotted on top of? This is useful for pediatric growth charts, marking up pictur

Do you know of any systems which allow for a background picture that it can be plotted on top of? This is useful for pediatric growth charts, marking up pictures of teeth or rehabilitation planning and many other medical images.

tomcam 4y ago
All of them. Just set the background element in HTML and use these to draw over it. Look at the historical kitchen with overlaid dots on the page at https://scrawl-v8.rikweb.org.uk/ https://scrawl-v8.rikweb.org.uk/
- solardev 4y ago
  Some of them also allow imports of raster images as shapes, or sometimes even HTML DOM objects (like a div). I remember this as a somewhat common feature, but it wasn't universal. I suspect that the hard part here is if you need to be able to do transforms on it, like responsive canvases when the viewport changes (but still keep the dots in the right place, for example), or if you need to compose multiple rasters on top of each other while allowing arbitrary scaling and rotation on each. The graphics lib needs to be able to maintain the relative coordinates of each one, which you can't do if you just overlay the entire canvas on top of a static HTML div. At a higher level of abstraction, the mapping libraries (openlayers and leaflet) handle this use case very well out of the box with a virtual coordinate system. Their intended use case is to be able to overlay roads and such on top of aerial photos, but the same math can be used on any set of images and layers, not necessarily in the coordinate space of Earth. The basic idea is just that the lib needs to know where every shape is relative to each other, regardless of each shape's transform or the overall canvas size and rotation and zoom. Whitten, if you can provide some examples (even just sketched out on a piece of paper), we can maybe suggest a few?

3 ms·

Do you know of any systems which allow for a background picture that it can be plotted on top of? This is useful for pediatric growth charts, marking up pictur

by whitten 4y ago

tomcam 4y ago
All of them. Just set the background element in HTML and use these to draw over it. Look at the historical kitchen with overlaid dots on the page at https://scrawl-v8.rikweb.org.uk/ https://scrawl-v8.rikweb.org.uk/
- solardev 4y ago
  Some of them also allow imports of raster images as shapes, or sometimes even HTML DOM objects (like a div). I remember this as a somewhat common feature, but it wasn't universal. I suspect that the hard part here is if you need to be able to do transforms on it, like responsive canvases when the viewport changes (but still keep the dots in the right place, for example), or if you need to compose multiple rasters on top of each other while allowing arbitrary scaling and rotation on each. The graphics lib needs to be able to maintain the relative coordinates of each one, which you can't do if you just overlay the entire canvas on top of a static HTML div. At a higher level of abstraction, the mapping libraries (openlayers and leaflet) handle this use case very well out of the box with a virtual coordinate system. Their intended use case is to be able to overlay roads and such on top of aerial photos, but the same math can be used on any set of images and layers, not necessarily in the coordinate space of Earth. The basic idea is just that the lib needs to know where every shape is relative to each other, regardless of each shape's transform or the overall canvas size and rotation and zoom. Whitten, if you can provide some examples (even just sketched out on a piece of paper), we can maybe suggest a few?