PP.Ui.CanvasSVGRenderer(settings: Object);
settings. JSON object that contains values of class properties.
The CanvasSVGRenderer constructor creates an instance of the PP.Ui.CanvasSVGRenderer 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. Specify name of the Ready() function in the <body> tag as the value of the onLoad attribute.
Create a SVG object with image, transform it to canvas object, zoom 5 times and a add to the page:
// Path to image
var IMAGE_SOURCE = "../build/img/app/oldie_ie.jpg";
// Create a SVG object with image
var createSVGImage = function(imageSrc, width, height) {
// Create a SVG element
var svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgElem.setAttribute("width", width);
svgElem.setAttribute("height", height);
var imageElem = document.createElementNS("http://www.w3.org/2000/svg", "image");
imageElem.setAttributeNS(null, "width", width);
imageElem.setAttributeNS(null, "height", height);
imageElem.setAttributeNS("http://www.w3.org/1999/xlink", "href", imageSrc);
imageElem.setAttributeNS(null, "visibility", "visible");
svgElem.appendChild(imageElem);
return svgElem;
};
// Transform SVG object to canvas object
var renderSVGToCanvas = function(sender, svgElem) {
var renderer = new PP.Ui.CanvasSVGRenderer({
ImagePreloader: sender,
ScaleX: 5,
ScaleY: 5
});
return renderer.render(svgElem);
};
// Load SVG element with image to the specified node
var loadImage = function(node, imageSrc, svgElem) {
var imagePreloader = new PP.Ui.ImagePreloader();
imagePreloader.Preloaded.add(function() {
var canvas = renderSVGToCanvas(imagePreloader, svgElem);
node.appendChild(canvas);
});
imagePreloader.preload(imageSrc);
};
function Ready() {
// Create a SVG element
var svgElem = createSVGImage(IMAGE_SOURCE, 50, 50);
loadImage(document.body, IMAGE_SOURCE, svgElem);
}
After executing the example an image placed in the <canvas> element and zoomed 5 times is added to the page:
See also: