OpacityMask and RadialGradientBrush
hi,
i try creating radar gui.
but, no visible for use OpacityMask and RadialGradientBrush.
this not use OpacityMask.
Any idea? for mask ring out yellow maker.
i try creating radar gui.
but, no visible for use OpacityMask and RadialGradientBrush.
Code: Select all
<Grid HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="300" Width="300">
<Grid.OpacityMask>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#AA000000" Offset="0.98"/>
<GradientStop Color="Transparent" Offset="1"/>
</RadialGradientBrush>
</Grid.OpacityMask>
....
Any idea? for mask ring out yellow maker.
Re: OpacityMask and RadialGradientBrush
If I know correctly, Noesis don't support GeometryBrushes, therefore OpacityMask doesn't work. Try Clip, this should working. Or Instead GeometryBrush use texture. This should working too (I remember I used texture brush for something, but not for OpacityMask)
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: OpacityMask and RadialGradientBrush
Hi, I think you don't need OpacityGroup for this matter, you can achieve the same using simple radial brushes with transparency as you can see here:
Anyway, if you found a situation where OpacityMask is not working fine, could you please create a ticket in our bugtracker attaching a minimal xaml that reproduces it?
Code: Select all
<Grid x:Name="Radar" Width="300" Height="300">
<Ellipse>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Offset="1.0" Color="Cyan"/>
<GradientStop Offset="0.95" Color="#DD00FFFF"/>
<GradientStop Offset="0.94" Color="#AA00FFFF"/>
<GradientStop Offset="0.70" Color="Transparent"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Width="180" Height="180" Stroke="Cyan" StrokeThickness="2"/>
<Path Data="M0,150L300,150M150,0L150,300" Stroke="Cyan" StrokeThickness="2"/>
</Grid>
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: OpacityMask and RadialGradientBrush
After reading again your message I think I misunderstood what was happening to you.
I guess you want to apply an OpacityMask to mask out the yellow marks, not to create the blue radar shape using an OpactiyMask, sorry.
I was able to reproduce the problem with OpacityMasks in Unity, they are vertically inverted, so when you place the radar at the bottom nothing gets rendered (it shows fine when centered in screen). Please report this at our bugtracker and we will try to fix it as soon as possible.
I guess you want to apply an OpacityMask to mask out the yellow marks, not to create the blue radar shape using an OpactiyMask, sorry.
I was able to reproduce the problem with OpacityMasks in Unity, they are vertically inverted, so when you place the radar at the bottom nothing gets rendered (it shows fine when centered in screen). Please report this at our bugtracker and we will try to fix it as soon as possible.
Re: OpacityMask and RadialGradientBrush
I can visibled.
RadialGradientBrush is need Center,Radius setting.
But I have not obtained the results I expected.
I want to make something like this.
I will post video and code comparing OpacityMask animation and Fill animation.
Left Radar Code:
Right Fill Animation Code:
RadialGradientBrush is need Center,Radius setting.
But I have not obtained the results I expected.
I want to make something like this.
I will post video and code comparing OpacityMask animation and Fill animation.
Left Radar Code:
Code: Select all
<Grid HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="300" Width="300">
<noesis:Element.Projection>
<noesis:PlaneProjection RotationX="45" RotationY="-30" RotationZ="-30" />
</noesis:Element.Projection>
<Ellipse Stroke="Cyan" Height="300" Width="300" RenderTransformOrigin="0.5,0.5">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#1500E8FF" Offset="0.795"/>
<GradientStop Color="#2600E8FF" Offset="0.938"/>
<GradientStop Color="#FF00E8FF" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Line X1="0" Y1="150" X2="300" Y2="150" Stroke="Cyan" StrokeThickness="1"/>
<Line X1="150" Y1="0" X2="150" Y2="300" Stroke="Cyan" StrokeThickness="1"/>
<Path Data="M150,10 145,100 155,100Z" Fill="Cyan" Stroke="Cyan" StrokeThickness="1" />
<Ellipse x:Name="RadarEllipse" Stroke="Cyan" Height="300" Width="300" HorizontalAlignment="Left" VerticalAlignment="Bottom">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#0000E8FF" Offset="0"/>
<GradientStop Color="#FF00E8FF" Offset="0.03"/>
<GradientStop Color="Transparent" Offset="0.06"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<ItemsControl x:Name="RadarCanvas" Width="300" Height="300" ItemsSource="{Binding Path=RadarPositions}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas ClipToBounds="True" x:Name="RadarClip">
<Canvas.OpacityMask>
<RadialGradientBrush Center="0.5,0.5" RadiusX="300" RadiusY="300">
<GradientStop Color="#00000000" Offset="0.25"/>
<GradientStop Color="#FF000000" Offset="0.50"/>
<GradientStop Color="#00000000" Offset="0.60"/>
</RadialGradientBrush>
</Canvas.OpacityMask>
<Canvas.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.OpacityMask).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="-0.56"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="-0.23"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.00"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.OpacityMask).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.00"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.00"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl Content="{Binding}">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IconType}" Value="1">
<Setter Property="ContentTemplate" Value="{StaticResource RadarMarker}" />
<Setter Property="Visibility" Value="{Binding Path=IsAlive}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding Position.x}"/>
<Setter Property="Canvas.Top" Value="{Binding Position.y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Grid>
Code: Select all
<Ellipse HorizontalAlignment="Right" Height="300" Stroke="Cyan" StrokeThickness="1" VerticalAlignment="Bottom" Width="300">
<noesis:Element.Projection>
<noesis:PlaneProjection RotationX="50" RotationY="-30"/>
</noesis:Element.Projection>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#00000000" Offset="0.25"/>
<GradientStop Color="#FF000000" Offset="0.50"/>
<GradientStop Color="#00000000" Offset="0.60"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="-0.56"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="-0.23"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.00"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.00"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.00"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: OpacityMask and RadialGradientBrush
To create an animation like the one in the youtube video you can use an image (see attached), and rotate it:
Code: Select all
<Canvas>
<Canvas.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.OpacityMask).(Brush.RelativeTransform).(RotateTransform.Angle)" RepeatBehavior="Forever"
From="0" To="360" Duration="0:0:4"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Canvas.OpacityMask>
<ImageBrush ImageSource="Images/radar.png">
<ImageBrush.RelativeTransform>
<RotateTransform CenterX="0.5" CenterY="0.5"/>
</ImageBrush.RelativeTransform>
</ImageBrush>
</Canvas.OpacityMask>
...
</Canvas>
- Attachments
-
- radar.png (26.76 KiB) Viewed 4327 times
Re: OpacityMask and RadialGradientBrush
Thanks, Nice work.To create an animation like the one in the youtube video you can use an image (see attached), and rotate it:Code: Select all<Canvas> <Canvas.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(Canvas.OpacityMask).(Brush.RelativeTransform).(RotateTransform.Angle)" RepeatBehavior="Forever" From="0" To="360" Duration="0:0:4"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers> <Canvas.OpacityMask> <ImageBrush ImageSource="Images/radar.png"> <ImageBrush.RelativeTransform> <RotateTransform CenterX="0.5" CenterY="0.5"/> </ImageBrush.RelativeTransform> </ImageBrush> </Canvas.OpacityMask> ... </Canvas>
but, vertically (and rotate) inverted.
I Report bugtracker now.
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: OpacityMask and RadialGradientBrush
Thanks for the reports, we will fix them as soon as we can.
Who is online
Users browsing this forum: No registered users and 81 guests