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: