applyToNode(node: HTMLElement);
node. DOM-элемент, к которому применяется кисть.
Метод applyToNode применяет кисть с линейной градиентной заливкой к указанному DOM-элементу.
Для выполнения примера необходимо наличие на html-странице ссылок на файл сценария PP.js и файл стилей PP.css. Создадим div-элемент применим для него линейную градиентную заливку. В консоль браузера выведем параметры точки перехода градиента в CSS-формате:
// Создаём div-элемент
var divElem = PP.createElement(document.body);
// Настраиваем стили для данного элемента
divElem.style.cssText = "width: 100px; height: 100px; border: 1px solid rgb(102,102, 102);";
// Создаем линейную градиентную заливку
var gradientSettings = {
GradientType: 0
}
var gradientBrush = new PP.LinearGradientBrush(gradientSettings);
// Устанавливаем точки перехода градиента
var stop1 = new PP.GradientStop({
Color: "#e6e6fa",
Offset: 0.5
});
var stop2 = new PP.GradientStop({
Color: "#abdaff"
});
gradientBrush.setGradientStops([stop1, stop2]);
// Устанавливаем начальную и конечную относительные точки градиента
var startPoint = new PP.Point({
X: 0,
Y: 0
});
var endPoint = new PP.Point({
X: 0,
Y: 0
});
gradientBrush.setStartPoint(startPoint);
gradientBrush.setEndPoint(endPoint);
// Применяем кисть
gradientBrush.applyToNode(divElem);
// Выводим параметры точки перехода градиента в CSS-формате
console.log("Параметры точки перехода градиента в CSS-формате: " + stop1.toCSSFormat());
В результате для div-элемента была установлена кисть с линейной градиентной заливкой:
Также в консоли браузера были выведены параметры точки перехода градиента в CSS-формате:
Параметры точки перехода градиента в CSS-формате: rgba(230, 230, 250, 1) 50%
См. также: