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

[takabo]

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 (22.4 KiB) Viewed 13978 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]

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