ShowPrintPreview and Background Image

[monkielu]

Hi Isomorphic, would like to ask for some help on showPrintPreview customizationby using PrintProperties or any other alternatives.

Below is my print preview code where editCanvas is the one highlighted in red color in the first screenshot:

Object[] components = {editCanvas };
PrintCanvas.showPrintPreview(components);

The second screenshot is the print preview which only shows the DrawingEditContext inside the editCanvas without background-image.

[Isomorphic]

By design, background images are removed from printed output by default, because typically, they are just decorative gradients and such and would reduce legibility when printed.

Obviously this is an image you want printed. By using an Img Canvas for it, you can avoid it being omitted when printing.

[monkielu]

By design, background images are removed from printed output by default, because typically, they are just decorative gradients and such and would reduce legibility when printed.

Obviously this is an image you want printed. By using an Img Canvas for it, you can avoid it being omitted when printing.

Hi Isomorphic , i did try using Img Canvas but the result produced is not what I want, the canvas position is not same as the original one before print preview , there are all aligned in vertical.

                            Img img = new Img();
                            img.setWidth("100%");
                            img.setHeight("100%");
                            img.setAlign(Alignment.CENTER);
                            img.setTop(0);
                            img.setLeft(0);
                            img.setZIndex(-1);
                            img.setSrc(record[0].getAttribute(DiagramDs.D_Background));

                            img.draw();
                            editCanvas.addChild(img);

The outcome of the print preview as below:

[monkielu]

Hi Isomorphic , i did try using Img Canvas but the result produced is not what I want, the canvas position is not same as the original one before print preview , there are all aligned in vertical.

 Img img = new Img();
img.setWidth("100%");
img.setHeight("100%");
img.setAlign(Alignment.CENTER);
img.setTop(0);
img.setLeft(0);
img.setZIndex(-1);
img.setSrc(record[0].getAttribute(DiagramDs.D_Background));

img.draw();
editCanvas.addChild(img);

The outcome of the print preview as below:

If i use the code below,the Img canvas is in the front and the DrawingEditContext is at the back (seems like the z-index is not working at here ), which is shown in the screenshow below :

editCanvas.setPrintChildrenAbsolutelyPositioned(true);

[Isomorphic]

That's not a valid zIndex setting, use moveAbove() and moveBelow().

[monkielu]

That's not a valid zIndex setting, use moveAbove() and moveBelow().

Thank you for the reply Isomorphic ,however, I could not move EditContext below of the Img(canvas) as moveAbove and moveBelow only supports canvas, is there any other solution?

[Isomorphic]

An EditContext is not a Canvas, but in your own code, the editCanvas obviously is.

[monkielu]

An EditContext is not a Canvas, but in your own code, the editCanvas obviously is.

Inside editCanvas, there are two components which are the Img and EditContext, so I am trying to do is move the Img to the back. Are we able to do so via moveAbove/moveBelow settings?

[Isomorphic]

We're not sure what you think is wrong here as we don't have the complete hierarchy. You want some container component, the DrawPane (which is presumably where you are drawing these shapes) and the Img behind that. Print the container component in that arrangement and you should get what you want. If you've arranged that hierarchy and still the print output is surprising, then please show a minimal, ready-to-run test case demonstrating the problem, and we can take a look.