ImageBrush.Source

Syntax

Source: String

Description

The Source property determines brush data source.

Comments

Property value can be set from JSON or using the setSource method, property value is returned by the getSource method.

Example

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 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: