沿圆形路径
问题描述:
我需要建立沿圆形路径的多步梯度,如下面的图像中创建渐变画笔:沿圆形路径
有没有人对如何这可能是任何想法用XAML而不是代码完成?是否可以使用现有的渐变刷或以某种方式将它们合成以实现这种效果?
答
通过使用非仿射变换(如透视变换)可以获得交叉径向效果。我用想法本文由Charles彼佐尔德中:
用交径向梯度创建XAML的仅环形区域。这里是标记:
<Canvas x:Name="LayoutRoot">
<Canvas.Resources>
<x:Array x:Key="sampleData" Type="sys:Object">
<x:Array Type="sys:Object">
<sys:Double>0</sys:Double>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="Yellow" Offset="0.5"/>
<GradientStop Color="Blue" Offset="1"/>
</LinearGradientBrush>
</x:Array>
<x:Array Type="sys:Object">
<sys:Double>90</sys:Double>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="Green" Offset="0.5"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</x:Array>
<x:Array Type="sys:Object">
<sys:Double>180</sys:Double>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="Yellow" Offset="0.5"/>
<GradientStop Color="Blue" Offset="1"/>
</LinearGradientBrush>
</x:Array>
<x:Array Type="sys:Object">
<sys:Double>270</sys:Double>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="Green" Offset="0.5"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</x:Array>
</x:Array>
</Canvas.Resources>
<ItemsControl ItemsSource="{StaticResource sampleData}">
<ItemsControl.OpacityMask>
<RadialGradientBrush>
<GradientStop Color="Transparent" Offset="0.95"/>
<GradientStop Color="White" Offset="0.949"/>
<GradientStop Color="White" Offset="0.501"/>
<GradientStop Color="Transparent" Offset="0.5"/>
</RadialGradientBrush>
</ItemsControl.OpacityMask>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<ItemsPresenter/>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas Width="1" Height="1">
<Canvas.RenderTransform>
<RotateTransform Angle="{Binding [0]}" CenterX="124" CenterY="124"/>
</Canvas.RenderTransform>
<Viewport3D Width="250" Height="250">
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup>
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="0 0 0, 0 1 0, 1 0 0, 1 1 0" TextureCoordinates="0 1, 0 0, 1 1, 1 0" TriangleIndices="0 2 1, 2 3 1"/>
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial Brush="{Binding [1]}"/>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<MatrixTransform3D Matrix="0.002,0,0,0,-0.499,-0.498,0,-0.998,0,0,1,0,0.499,0.5,0,1"/>
</GeometryModel3D.Transform>
</GeometryModel3D>
<AmbientLight Color="White" />
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
<Viewport3D.Camera>
<OrthographicCamera Position="0.5 0.5 1" LookDirection="0 0 -1" UpDirection="0 1 0" Width="1"/>
</Viewport3D.Camera>
</Viewport3D>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
,这里是视觉效果:
的影响使用数据源收集与具有两个属性,角度和电刷的项目。它为每个象限使用不同的画笔绘制四个象限(向上,向右,向下和向左)。然后将整个东西用不透明面具夹在环形区域。
答
在GDI + /的WinForms,你可以使用PathGradientBrush做到这一点:
http://www.bobpowell.net/pgb.htm
http://msdn.microsoft.com/en-us/library/system.drawing.drawing2d.pathgradientbrush.aspx
不幸的是,在WPF一个PathGradientBrush不支持,但有几个人问在这里:
(可能是值得件,铸件g)
由于缺乏支持,您无法直接在XAML中执行此操作,但可以使用GDI +代码创建映像,然后在XAML中使用映像。与使用非仿射变换相比,这可能会带来更好的性能。
为什么颜色选择?这与我以前见过的任何音调颜色映射都不一致,无论如何,synesthesics [倾向于认为这是完全不同的](http://rhythmiclight.com/archives/ideas/colorscales.html)。您也看起来完全不符合[彩色钢琴项目](http://colorpiano.com/)。 – 2011-01-30 10:54:59
颜色的选择是任意的,只是出于美学原因而选择的。与音高没有相关性。 – Charlie 2011-01-30 20:37:11