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 those coordinates.
Based on H.B.'s good advice I can opacity mask but i cannot place the map properly, nor crop to fit the opacity mask. Example below was supposed to be over 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>
You could create this triangle as the OpacityMask
or Clip
of your image.
e.g.
<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 could crop the Image space using the margin:
<Image.Margin>
<Binding Path="Clip.Bounds" RelativeSource="{RelativeSource Self}">
<Binding.Converter>
<vc:BoundsToMarginConverter />
</Binding.Converter>
</Binding>
</Image.Margin>
The 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();
}
}
This is hardly a nice solution but it seems to work...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With