PP.Ui.CanvasHTMLRenderer(settings);
settings. JSON object that contains values of component properties.
The CanvasHTMLRenderer constructor creates an instance of the CanvasHTMLRenderer class.
To execute the example, the HTML page must contain links to the PP.js, PP.Util.js script files, and the PP.css styles file. It is required to add calling of the createHTMLRenderer() function to the "onload" event of the <body> tag. Create a button and a class for rendering DOM tree, get graphic view of button DOM node:
function createHTMLRenderer() {
// Create a button
var button = new PP.Ui.Button({
// Set parent element
ParentNode: document.getElementById("button"),
// Set button contents
Content: "Button",
// Set button width
Width: 60
});
// Create a class for rendering DOM tree
var canvas = new PP.Ui.CanvasHTMLRenderer({
// Set image loader
ImagePreloader: new PP.Ui.ImagePreloader(),
// Disable autocalculation of render area size and position
RecursiveBoundsCalc: False,
// Disable validation test start
TaintTest: False,
// Y coordinate of top left area corner
Top: 14,
// X coordinate of top left area corner
Left: 19,
// Area width
Width: 60,
// Area height
Height: 25,
// Scale by the X axis
ScaleX: 2,
// Scale by the Y axis
ScaleY: 2,
// Set handler of the event that is fired after rendering is finished
Rendered: function (sender, args) {
// After rendering is finished, add image to the page
button.getDomNode().insertAdjacentElement("afterEnd", args.Canvas);
console.log("Rendering is finished");
},
// Set handler for the event that is fired after image loading
Preloaded: function (sender, args) {
console.log("Image loading is finished");
},
});
// Render DOM tree
canvas.render(button.getDomNode());
}
As a result a button two times larger that the normal one is rendered:
The console displays a message about loading of images and finishing of rendering:
Image loading is finished
Rendering is finished
Decrease the scale to 1 and rerender the image:
// Decrease scale canvas.setScale(1); // Render DOM tree canvas.render(button.getDomNode());
As a result the button with normal size is rendered:
See also: