Geek Answers Handbook

Wpf snippet image

In WPF, I have an image, is there a way to apply, for example, these coordinates (native to the image): 0.10 20.0 20.20 to selectively display only the triangle that is formed by these coordinates.

Based on HB Good advice. I can mask the opacity, but I can't correctly position the map, and not crop it to fit the opacity mask. The example below was supposed to be above Illinois

 <Image Source="http://www.digital-topo-maps.com/county-map/united-states-map.gif" Stretch="None">
    <Image.Clip>
        <PathGeometry>
            <PathFigure StartPoint="444.806216983824,129.344961240310"  IsClosed="True" IsFilled="True">
                <LineSegment Point="445.976759660097,145.147286821705"/>
                <LineSegment Point="431.344976206682,170.313953488372"/>
                <LineSegment Point="447.732573674507,188.457364341085"/>
                <LineSegment Point="458.852729099102,213.038759689923"/>
                <LineSegment Point="469.387613185561,214.209302325581"/>
                <LineSegment Point="481.093039948293,191.383720930233"/>
                <LineSegment Point="479.337225933884,143.391472868217"/>
                <LineSegment Point="477.581411919474,132.271317829457"/>
                <LineSegment Point="444.806216983824,129.344961240310"/>
            </PathFigure>
        </PathGeometry>
    </Image.Clip>
</Image>
+5
source share
1 answer

You can create this triangle as OpacityMaskor Clipyour image.

eg.

<Image.Clip>
    <PathGeometry>
        <PathFigure StartPoint="0,10">
            <LineSegment Point="20,0" />
            <LineSegment Point="20,20" />
        </PathFigure>
    </PathGeometry>
</Image.Clip>

<Image.OpacityMask>
    <VisualBrush Stretch="None" AlignmentX="Left" AlignmentY="Top">
        <VisualBrush.Visual>
            <Path Fill="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,10" IsClosed="True" IsFilled="True">
                            <LineSegment Point="20,0" />
                            <LineSegment Point="20,20" />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </VisualBrush.Visual>
    </VisualBrush>
</Image.OpacityMask>

You can crop the image space using the field:

<Image.Margin>
    <Binding Path="Clip.Bounds" RelativeSource="{RelativeSource Self}">
        <Binding.Converter>
            <vc:BoundsToMarginConverter />
        </Binding.Converter>
    </Binding>
</Image.Margin>

Converter:

public class BoundsToMarginConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Rect input = (Rect)value;
        return new Thickness()
        {
            Left = -input.Left,
            Right = -input.Right,
            Top = -input.Top,
            Bottom = -input.Bottom,
        };
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

, , , ...

+2

More articles:


All Articles