PP.Ui.DropShadow (settings: Object);
settings. JSON-объект со значениями свойств класса.
Конструктор DropShadow создает экземпляр класса DropShadow.
Для выполнения примера необходимо наличие на html-странице компонента GaugeBox с наименованием «gaugeBox» (см. «Пример создания компонента GaugeBox»). Создадим и отобразим тень третьей шкалы спидометра со смещением, равным 5 пикселям, увеличим её в 1,5 раза и установим для неё новый цвет и толщину пера:
var createShadow = function(element, offset) {
var dropShadow = new PP.Ui.DropShadow({
Offset: offset // Смещение
});
// Отрисовываем тень для визуального элемента спидометра
dropShadow.render(element);
return dropShadow;
};
var applyStrokeSettings = function(shadow, color, width) {
// Устанавливаем цвет пера
dropShadow.setAttr({
"stroke": color
});
// Устанавливаем толщину пера
if (dropShadow.getShadowElement()) {
dropShadow.getShadowElement().setAttribute("stroke-width", width);
};
};
var showOndlyShadow = function(shadow, parentNode, scale) {
// Преобразуем тень шкалы спидометра из формата SVG в формат канвы
var renderer = new PP.Ui.CanvasSVGRenderer({
ScaleX: scale,
ScaleY: scale
});
parentNode.appendChild(renderer.render(shadow.getShadowElement()));
// Удаляем контейнер для спидометра
gaugeBox.dispose();
}
if (gaugeBox && gaugeBox.getInstance() && gaugeBox.getInstance().getScales()[2]) {
// Создаём тень для третьей шкалы спидометра
var dropShadow = createShadow(gaugeBox.getInstance().getScales()[2].getDomNode(), new PP.Point(5, 5));
// Применяем настройки пера
applyStrokeSettings(dropShadow, (new PP.Color(0, 0, 0)).toString(), 0.5);
// Отображаем только тень для третьей шкалы спидометра
showOndlyShadow(dropShadow, document.body, 1.5);
}
В результате выполнения примера была создана и отображена тень третьей шкалы спидометра со смещением, равным 5 пикселям. Данная шкала увеличена в 1,5 раза, для неё установлены новый цвет и толщина пера:
См. также: