getMix(brush2: PP.LinearGradientBrush, part: Number, point1 : PP.Point, point2 : PP.Point)
brush2. A brush with linear gradient fill, which should be mixed.
part. Part of use of the specified brush. Value can vary from 0 (brush is not applied) to 1 (only this brush is applied).
point1. Start point of output brush.
point2. End point of output brush.
The getMix method returns the linear fill brush obtained after mixing with the specified brush in the certain ratio.
GradientStops must differ only in color.
The method returns value of the PP.LinearGradientBrush type.
To execute the example, the HTML page must contain links to the PP.js scenario file and the PP.css styles file. Create a new brush and output its color values to the console:
// Create a div element
var divElem = PP.createElement(document.body);
// Set up styles for this element
divElem.style.cssText = "border-radius: 50%; width: 100px; height: 100px; border: 1px solid rgb(102,102,102);";
// Create the first gradient
gBrush1 = new PP.LinearGradientBrush({
StartPoint : "0, 1",
EndPoint : "1, 0",
GradientStops:
{
"GradientStop":
[
{"Offset" : "0","Color" : "#aa3311"},
{"Offset" : "0.7","Color" : "#22aacc"}
]
}
});
// Create the second gradient
gBrush2 = new PP.LinearGradientBrush({
StartPoint : "1, 0",
EndPoint : "0, 1",
GradientStops:
{
"GradientStop":
[
{"Offset" : "0","Color" : "#44cc00"},
{"Offset" : "0.7","Color" : "#3355aa"}
]
}
});
// Create start and end points of the new gradient
sPoint = new PP.Point({
X: 0,
Y: 0
});
ePoint = new PP.Point({
X: 1,
Y: 1
});
// Mix both brushes and get a new one
gBrush3 = gBrush1.getMix(gBrush2, 0.2, sPoint, ePoint);
// Output new gradient colors to the console
clr1 = gBrush1.getMixColor(gBrush2, 0.2, 0);
clr2 = gBrush1.getMixColor(gBrush2, 0.2, 1);
console.debug(clr1 + " -> " + clr2);
// Apply brush mixture to DOM element by a single method
gBrush1.applyMixToNode(divElem, gBrush2, 0.2);
As a result a new brush is created for gradient linear fill, and color values are output to the console:
#96520e -> #2599c5
On applying to canvas, mixing of the first two brushes results in the third one:
The applyMixToNode() method was used to apply an alternative method of applying linear gradient to DOM element.
See also: