Stroke of Shape.Path doesn't work properly (shadow also)

Please post public support tickets here. Note: for private support tickets, please send an email to support@cshtml5.com instead.
takabo
Posts: 6
Joined: Sun May 10, 2020 5:34 pm

Stroke of Shape.Path doesn't work properly (shadow also)

Postby takabo » Wed May 13, 2020 6:15 pm

Hi, Today I tried this code:

Code: Select all

<Page
    x:Class="GeometryTestPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Canvas x:Name="canvas">
        <Path StrokeThickness="5" Stroke="Red" StrokeLineJoin="Round" Fill="Blue" Data="M 0,0 L 100,100 L 100,0 Z" Canvas.Left="50" Canvas.Top="50">
            <Path.Effect>
                <DropShadowEffect BlurRadius="6" />
            </Path.Effect>
        </Path>
    </Canvas>
</Page>


Result:
shapes.png
shapes.png (22.4 KiB) Viewed 444 times


It looks like the stroke is broken.
Also, shadows do not produce the expected results.

Is there a good solution?


-----
cshtml5 version: 2.0.0-alpha63-083

JS-Support @Userware
Site Admin
Posts: 1126
Joined: Tue Apr 08, 2014 3:42 pm

Re: Stroke of Shape.Path doesn't work properly (shadow also)

Postby JS-Support @Userware » Fri May 15, 2020 6:21 am

Hi,

Thanks for your message.

The XAML editor preview at design-time is rendered using WPF, while the two others are rendered in HTML.

- The difference in the shadows is due to the fact that, in WPF, Silverlight, and UWP, when a shadow is applied to a an element that is semi-transparent (like the Path, or a parent), it is actually rendered on the children of the element (in your case the PathGeometry), whereas in HTML it is rendered on the element itself regardless of its transparency (in your case the html <canvas> dom element). This behavior is difficult to modify and it is part of the limitations listed at: http://cshtml5.com/links/limitations.aspx#xaml - the easiest thing to do for us in regard to this issue would be to change the XAML editor preview to match the final result rather than the other way around. A workaround is to use a PNG for the shadow, or a LinearGradientBrush, and/or a RotateTransform to position it the way you want.

- The Stroke differences are due to the fact that the html <canvas> dom element clips the shape to its bounds. We have in our roadmap to improve this in the future.

Thanks


Return to “Technical Support”

Who is online

Users browsing this forum: No registered users and 5 guests

 

 

cron