图层是在JavaFX canvas上合成图形的唯一方法吗？

Question

I am working on a gui in JavaFX which needs to composite a large number of objects (often using alpha masks and similar) on the canvas.

For comparison on the HTML5 canvas this can easily be done by the drawImage function with the help of a temporary canvas object outside the DOM structure. For example to draw an image on the canvas with an alpha mask, I first draw the image on the temporary canvas, draw (ie blit) the mask over it using globalCompositeOperation = "destination-in" , then draw the temporary canvas on the original one using composite mode source-over . The temporary canvas can be re-used for each such operation. Easy as pie.

However, from what I can see so far the recommended way of doing this in JavaFX is the use of grouped layers , ie multiple overlayed canvas nodes which never get "flattened".

I could have done it like this in HTML5 too but in my most recent project this would have resulted in dozens or hundreds of visible layers which is obviously extremely silly. My approach gave me excellent performance.

That being said, is there a reasonable way to do the same thing on the JavaFX canvas? I consider manually performing pixel-by-pixel copying to be a clunky last-resort thing.

What am I missing? Am I thinking about JavaFX in a wrong way?

Answer 1

I have done this before on JavaFx and Android I didn't know they do so on HTML 5 so anyway
you can do the same as you do on HTML 5 you can create what is called mainCanvas that canvas contains the finished version of another one let's say tempCanvas in the temp canvas you draw what ever you want and apply the masks you want too then you take a snapshot of the canvas ( as Canvas is a Node you can use this code to take a snap shot of it)

WritableImage writableImage = new WritableImage(mainCanvas.getWidth(), mainCanvas.getHeight());
tempCanvas.snapshot(null, writableImage);

GraphicsContext context = mainCanvas.getGraphicsContext2D();
context.drawImage(writableImage,mainCanvas.getWidth(), mainCanvas.getHeight());