Rough, Hand-Sketched Style for LineSeriesDefinition

2 posts, 0 answers
  1. Josh Eastburn
    Josh Eastburn avatar
    32 posts
    Member since:
    Aug 2012

    Posted 31 May 2011 Link to this post

    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
  2. Sia
    Admin
    Sia avatar
    766 posts

    Posted 02 Jun 2011 Link to this post

    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
Back to Top