PP.Ui.DropShadow (settings: Object);
settings. JSON object that contains values of class properties.
The DropShadow constructor creates an instance of the DropShadow class.
To execute the example, the HTML page must contain the GaugeBox component named gaugeBox (see Example of Creating the GaugeBox Component). Create and display third scale shadow of speedometer with the offset of 5 pixels by increasing its by 1.5 times and set a new color and pen width for it:
var createShadow = function(element, offset) {
var dropShadow = new PP.Ui.DropShadow({
Offset: offset // Offset
});
// Render shadow for speedometer visualizer
dropShadow.render(element);
return dropShadow;
};
var applyStrokeSettings = function(shadow, color, width) {
// Set pen width
dropShadow.setAttr({
"stroke": color
});
// Set pen width
if (dropShadow.getShadowElement()) {
dropShadow.getShadowElement().setAttribute("stroke-width", width);
};
};
var showOndlyShadow = function(shadow, parentNode, scale) {
// Transform speedometer scale shadow from SVG format to canvas format
var renderer = new PP.Ui.CanvasSVGRenderer({
ScaleX: scale,
ScaleY: scale
});
parentNode.appendChild(renderer.render(shadow.getShadowElement()));
// Delete speedometer container
gaugeBox.dispose();
}
if (gaugeBox && gaugeBox.getInstance() && gaugeBox.getInstance().getScales()[2]) {
// Create third scale shadow of speedometer
var dropShadow = createShadow(gaugeBox.getInstance().getScales()[2].getDomNode(), new PP.Point(5, 5));
// Apply pen settings
applyStrokeSettings(dropShadow, (new PP.Color(0, 0, 0)).toString(), 0.5);
// Display only shadow for speedometer third scale
showOndlyShadow(dropShadow, document.body, 1.5);
}
After executing the example the third scale shadow of speedometer is created and displayed with the offset of 5 pixels. The scale is increased by 1.5 times, a new color and pen width are set for it:
See also: