View Revisions: Issue #1373

Summary 0001373: OpacityMask Vertically and Rotate Inverted.
Revision 2018-12-10 13:16 by arukari
Steps To Reproduce Bottom / Left Can not Rendered.

Rotation Test:
OpacityMask (Test Background Red Color)
                            <Canvas ClipToBounds="True" x:Name="RadarClip" Background="Red">
                                <Canvas.OpacityMask>
                                    <ImageBrush ImageSource="radarmask.png">
                                        <ImageBrush.RelativeTransform>
                                            <RotateTransform CenterX="0.5" CenterY="0.5" />
                                        </ImageBrush.RelativeTransform>
                                    </ImageBrush>
                                </Canvas.OpacityMask>
                                <Canvas.Triggers>
                                    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.OpacityMask).(Brush.RelativeTransform).(RotateTransform.Angle)" RepeatBehavior="Forever">
                                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                                                    <EasingDoubleKeyFrame KeyTime="0:0:10" Value="360"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Canvas.Triggers>
                            </Canvas>
Compare Line Rotate:
                <Line x:Name="RadarEllipse" X1="150" Y1="150" X2="300" Y2="150" Stroke="Cyan" StrokeThickness="1" RenderTransformOrigin="0,0">
                    <Line.RenderTransform>
                        <RotateTransform Angle="0" CenterX="150" CenterY="150"/>
                    </Line.RenderTransform>
                    <Line.Triggers>
                        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Line.RenderTransform).(RotateTransform.Angle)" RepeatBehavior="Forever" >
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:10" Value="360"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Line.Triggers>
                </Line>

Revision 2018-12-10 13:11 by arukari
Steps To Reproduce Rotation Test:
OpacityMask (Test Background Red Color)
                            <Canvas ClipToBounds="True" x:Name="RadarClip" Background="Red">
                                <Canvas.OpacityMask>
                                    <ImageBrush ImageSource="radarmask.png">
                                        <ImageBrush.RelativeTransform>
                                            <RotateTransform CenterX="0.5" CenterY="0.5" />
                                        </ImageBrush.RelativeTransform>
                                    </ImageBrush>
                                </Canvas.OpacityMask>
                                <Canvas.Triggers>
                                    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.OpacityMask).(Brush.RelativeTransform).(RotateTransform.Angle)" RepeatBehavior="Forever">
                                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                                                    <EasingDoubleKeyFrame KeyTime="0:0:10" Value="360"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Canvas.Triggers>
                            </Canvas>
Compare Line Rotate:
                <Line x:Name="RadarEllipse" X1="150" Y1="150" X2="300" Y2="150" Stroke="Cyan" StrokeThickness="1" RenderTransformOrigin="0,0">
                    <Line.RenderTransform>
                        <RotateTransform Angle="0" CenterX="150" CenterY="150"/>
                    </Line.RenderTransform>
                    <Line.Triggers>
                        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Line.RenderTransform).(RotateTransform.Angle)" RepeatBehavior="Forever" >
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:10" Value="360"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Line.Triggers>
                </Line>