Source: String
The Source property determines brush data source.
Property value can be set from JSON or using the setSource method, property value is returned by the getSource method.
To execute the example, the HTML page must contain links to the PP.js scenario file and the PP.css styles file. The file folder must also contain an example of picture named layout.png. Create a div element and place the child svg element in it, for which set a picture brush. Output parameters of the created brush in the CSS format to the browser console:
// Create a div element var divElem = PP.createElement(document.body); // Set up styles for this element divElem.style.cssText = "width: 100px; height: 100px; border: 1px solid rgb(102,102,102);"; // Create an SVG element with a rectangle var svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svgElem.setAttribute("width", "100"); svgElem.setAttribute("height", "100"); var rectElem = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rectElem.setAttribute("x", "2"); rectElem.setAttribute("y", "2"); rectElem.setAttribute("width", "96"); rectElem.setAttribute("height", "96"); svgElem.appendChild(rectElem); divElem.appendChild(svgElem); // Create a picture brush var brush = new PP.ImageBrush(); // Set a brush data source var brushSource = "layout.png"; brush.setSource(brushSource); // Apply brush parameters to the SVG element brush.toSVGFormat(rectElem); // Output brush settings in the CSS format console.log("Brush settings in the CSS format: " + brush.toCSSFormat());
After executing the example a div element is created in the document, in which an SVG element is placed, for which a picture brush is set:
The browser console also displays brush parameters in the CSS format:
Brush settings in the CSS format: background:url(layout.png);
Create brushes and apply their mixed color to DOM element, output mixed color code to the console:
// Create brushes and set colors var brush1 = new PP.SolidColorBrush(); brush1.setColor("#e6e6fa"); var brush2 = new PP.SolidColorBrush(); brush2.setColor("#d5d5d5"); // Apply mixed color to DOM node brush1.applyMixToNode(divElem, brush2, 0.5); // Output mixed color code var mixBrush = brush1.getMix(brush2, 0.5); console.log("Mixed color code: " + mixBrush.getColor());
As a result, mixed color is set for the DOM element:
The mixed color code is also displayed in the browser console:
Mixed color code: #DEDEE8
Apply brush parameters to the DOM element:
// Apply brush to the DOM element brush1.applyToNode(divElem);
As a result, DOM element background color is changed:
Apply brush parameters to the SVG element:
// Apply brush parameters to the SVG element brush1.toSVGFormat(rectElem);
As a result, brush parameters are applied to the SVG element:
Create a brush with gradient linear fill and apply it the SVG element:
// Create a gradient linear brush gBrush1 = new PP.LinearGradientBrush({ StartPoint: "0, 1", EndPoint: "1, 0", GradientStops: { "GradientStop": [ { "Offset": "0", "Color": "#aa3311" }, { "Offset": "0.7", "Color": "#22aacc" } ] } }); // Apply brush parameters to the SVG element gBrush1.toSVGFormat(rectElem);
As a result, gradient brush parameters are applied to the SVG element:
See also: