MapPolyline stroke overlaps filled polyline

5 posts, 0 answers
  1. Peter
    Peter avatar
    57 posts
    Member since:
    Oct 2016

    Posted 03 Jul Link to this post

    We're using MapPolygon on the map, and we allow the user configure the map points, the stroke, the stroke thickness, the fill color and the fill opacity. Want to be able to control the stroke opacity separately from the file opacity. We've found that if the stroke thickness is greater than 1, then the stroke line overlaps the filled area. This results in the effect shown in the attached image mappolygon.png i.e. we see the fill color, the line color and a mix of the two colors where they overlap.

    What we'd like to have is a filled polygon where the stroke does not overlap the filled area. Can you suggest a way to achieve this effect?

     

  2. Peter
    Peter avatar
    57 posts
    Member since:
    Oct 2016

    Posted 03 Jul in reply to Peter Link to this post

    Further to my last post it looks like if I set the stroke opacity to 1 (255 in the stroke color alpha channel) the polygon fill opacity overrides this and affects the stroke opacity too. The attached image shows what we are hoping to be able to achieve i.e. independently controllable opacity for stroke and fill
  3. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    495 posts

    Posted 08 Jul Link to this post

    Hello Peter,

    Thank you for the provided pictures. 

    I investigated the described scenario and it turns out that this is the expected WPF behavior when the Stroke brush has an opacity. For example, you can reproduce the same effect with the following code:
    <Path Data="M 300 100 L 500 400 100 400 Z"
              StrokeThickness="10"
              Stroke="#33ff0000"
              Fill="Blue" />

    With the above information in mind, I am afraid that I cannot suggest a way to have opacity for the stroke color without the overlapping effect. You can consider setting the stroke opacity to 1, as you suggested in your last reply. 

    Regards,
    Vladimir Stoyanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Peter
    Peter avatar
    57 posts
    Member since:
    Oct 2016

    Posted 08 Jul in reply to Vladimir Stoyanov Link to this post

    Hi Vladimir,

    Thanks for your response. I've achieved the behaviour I require by adding two PolylineData objects in my view model to a visualization layer. The first is for the fill, the second is for the line e.g.

    public PolylineData PolyLine => _polyline ?? (_polyline = new PolylineData
    {
        Points = MapPoints,
        ShapeFill = new MapShapeFill
        {
            Fill = Brushes.Transparent,
            Stroke = new SolidColorBrush(ToMediaColor(MapLineColor, _lineOpacity)),
            StrokeThickness = LineWidth,
        }
    });
     
    public PolylineData PolyLineFill => _polylineFill ?? (_polylineFill = new PolylineData
    {
        Points = MapPoints,
        ShapeFill = new MapShapeFill
        {
            Fill = new SolidColorBrush(ToMediaColor(MapFillColor, _fillOpacity)),
            Stroke = Brushes.Transparent,
            StrokeThickness = 1,
        }
    });

    Thanks

    Pete

     

  5. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    495 posts

    Posted 09 Jul Link to this post

    Hello Pete,

    I am glad to hear that you were able to achieve what you are going for. 

    Thank you for sharing your approach with the community.

    Regards,
    Vladimir Stoyanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top