If you need to create bevel effects for any of chart objects,
you need to use the Bevel style with the following list of properties: |
Properties |
Description |
angle
|
The
angle of the bevel. Valid values are from 0 to 360 degrees. The
default value is 45. |
distance
|
The
offset distance of the bevel. Valid values are in pixels (floating
point). The default value is 4. |
shadowColor |
The
shadow color of the bevel. Valid values are in hexadecimal format
RRGGBB (without #). The default value is 000000. |
shadowAlpha |
The
alpha transparency value of the shadow color. This value is specified
as a normalized value from 0 to 100. For example, 25 set a transparency
value of 25%. The default value is 50. |
highlightColor |
The
highlight color of the bevel. Valid values are in hexadecimal format
RRGGBB (without #). The default value is FFFFFF. |
highlightAlpha |
The
alpha transparency value of the highlight color. The value is specified
as a normalized value from 0 to 100. For example, 25 sets a transparency
value of 25%. The default value is 50. |
blurX |
The
amount of horizontal blur in pixels. Valid values are from 0 to
255 (floating point). The default value is 4. Values that are a
power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render
more quickly than other values |
blurY |
The
amount of vertical blur in pixels. Valid values are from 0 to 255
(floating point). The default value is 4. Values that are a power
of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more
quickly than other values |
strength
|
The
strength of the imprint or spread. Valid values are from 0 to 255.
The larger the value, the more color is imprinted and the stronger
the contrast between the bevel and the background. The default value
is 1 |
quality
|
The
number of times to apply the filter. The default value is 1, which
is equivalent to low quality. A value of 2 is medium quality, and
a value of 3 is high quality. Filters with lower values are rendered
more quickly |
|
|
To set the bevel for any object of the chart, you
just need to define a Bevel style and apply it as under:
|
<style name='MyFirstBevel'
type='Bevel' />
…
<apply toObject='DataPlot' styles='MyFirstBevel' /> |
|
When applied, it gives the following effect: |
|
|
Setting angle and distance |
You can set the bevel angle and distance. To do this use the following code:
<style name='MyFirstBevel' type='Bevel' distance='7'
angle='200'/>
|
Property |
Format |
Example |
distance
|
distance='value
(in pixels)' |
distance='7'
|
angle
|
angle='value
(between 0 to 360)' |
angle='200' |
|
|
When applied, it gives the following result: |
|
|
Setting shadow colors |
To change shadow color and alpha, use the following
parameters:
<style name='MyFirstBevel' type='Bevel' shadowColor='000000'
shadowAlpha='80' distance='5' angle='45'/> |
|
Property |
Format |
Example |
shadowColor
|
shadowColor='Hex
Value (without #)' |
shadowColor='000000'
|
shadowAlpha |
shadowAlpha='value
(between 0 to 100)' |
shadowAlpha='80' |
|
|
It will change the shadow color as shown below: |
|
|
Controlling blur amount |
You can also change the blur amount to get a smoother
bevel. To do this use the following code: |
<style name='MyFirstBevel' type='Bevel'
blurX='12' blurY='12'/> |
|
Property |
Format |
Example |
blurX
|
blurX='value'
|
blurX='12'
|
blurY |
blurY='value' |
blurY='12' |
|
|
The above gives the following output: |
|
|
Original with default
blur |
With both blurX and
blurY set as 12 |
|
|
Increasing bevel strength |
To increase bevel strength, use the strength attribute
as under:
<style name='MyFirstBevel' type='Bevel' strength='3'/> |
|
Property |
Format |
Example |
Strength |
strength='value' |
strength='3' |
|
|
|
You can play with a plethora of aforementioned properties
and style type to get the look you want. |