Issue: after painting on canvas, when we change the slice and back to the drawing slice, all paints will disappear. This is because every time when we switch to a painted slice the threejs will re-paint to canvas based on volume data. But when we paint on the canvas we cannot change the volume data.
Do not paint directly on slice’s canvas, we should create an empty div to display it.
On the same area (slice canvas position), we can create an empty canvas on it and set the position to absolute and zindex should be higher than the slice’s canvas.
So when mouse down we can draw lines on the empty canvas. when the mouse moves we can update the line pixels on the empty canvas to slice’s canvas.
Create a paint image object, the data structure should be like this:
Every time when we switch back to the painted slice, we can judge whether the slice index has painted image data, if yes, we can paint the image on the current slice canvas.
Issue: after painting on canvas, when we change the slice and back to the drawing slice, all paints will disappear. This is because every time when we switch to a painted slice the threejs will re-paint to canvas based on volume data. But when we paint on the canvas we cannot change the volume data.