This is a migrated thread and some comments may be shown as answers.

Rough, Hand-Sketched Style for LineSeriesDefinition

1 Answer 75 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Josh Eastburn
Top achievements
Rank 1
Josh Eastburn asked on 31 May 2011, 07:29 PM
I am using a LineSeriesDefinition in a chart and I'm trying to achieve a rough, hand-sketched look to the lines in the chart, similar to how it would look if it was drawn with a crayon.
Do you have a recommended approach for this?  I was going to try using a .png that had mottled transparency and use it as an OpacityMask, but I don't see that property in the LineSeriesDefinition.Appearance class.

Two attachments:
1. The default Telerik LineSeriesDefinition look
2. Example of a crayon-drawn line look we are trying to achieve

Thanks.
Josh

1 Answer, 1 is accepted

Sort by
0
Sia
Telerik team
answered on 02 Jun 2011, 02:30 PM
Hello Josh,

There are several possible approaches which come to my mind (taking in consideration some limitations of the Silverlight framework about tiling images):

1. Set LinearGradientBrush as a custom palette brush:

<telerik:RadChart.PaletteBrushes>
          <LinearGradientBrush EndPoint="0,0" StartPoint=".03,.03" MappingMode="RelativeToBoundingBox" SpreadMethod="Repeat">
            <GradientStop Color="Red" Offset="0"/>
            <GradientStop Color="Transparent" Offset="1"/>
        </LinearGradientBrush>
</telerik:RadChart.PaletteBrushes>

If you use custom palette brush you may need to overwrite the default Series Item Label Style with the following custom style:
<Style x:Key="CustomLabel" TargetType="telerik:SeriesItemLabel">
    <Setter Property="Fill" Value="Transparent" />
    <Setter Property="Foreground" Value="Black" />
</Style>

2. Set SolidColorBrush as a custom palette brush:
<telerik:RadChart.PaletteBrushes>
    <SolidColorBrush Color="Red" />
</telerik:RadChart.PaletteBrushes>

and apply opacity mask.
Note that there is no exposed property for the Opacity Mask so you need to modify the template: 
<LinearGradientBrush x:Key="Mask" EndPoint="0,0" StartPoint=".03,.03" MappingMode="RelativeToBoundingBox" SpreadMethod="Repeat">
    <GradientStop Color="Black" Offset="0"/>
    <GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
         
<Style x:Key="CustomLine" TargetType="telerik:BaseLineSeries">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:BaseLineSeries">
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  x:Name="PART_MainContainer">
                    <Grid.Clip>
                        <RectangleGeometry x:Name="PART_AnimationClipGeometry">
                            <RectangleGeometry.Transform>
                                <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0"/>
                            </RectangleGeometry.Transform>
                        </RectangleGeometry>
                    </Grid.Clip>
                    <Path x:Name="PART_TopBorderLine"
                            Fill="Transparent"
                            Style="{TemplateBinding BorderLineStyle}"
                            StrokeLineJoin="Round"
                            IsHitTestVisible="False"
                            StrokeThickness="10"
                            OpacityMask="{StaticResource Mask}">
                        <Path.Data>
                            <PathGeometry x:Name="PART_TopBorderLineGeometry" />
                        </Path.Data>
                    </Path>
                    <ItemsPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
Note: I have removed all visual states related to our interactivity functionality for simplicity. If you use interactivity you need to add them.

3. Use ImageBrush as opacity mask and use the same approach as the one used in 2.
Create a png image which is big enough (compared to your RadChart) and use it as OpacityMask:
<ImageBrush x:Key="ImageMask" ImageSource="opacitymask400x400.png" />

You may use the Appearance settings as well in order to set Red color as stroke.

I have attached the code for this example, so please review it and let me know whether it fits in your scenario.

Best wishes,
Sia
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Chart
Asked by
Josh Eastburn
Top achievements
Rank 1
Answers by
Sia
Telerik team
Share this question
or