[英]AngleGradient in WPF
如您所知, PhotoShop中有一個名為AngleGradient
的漸變選項。 但是, WPF
只有LinearGradientBrush
和RadialGradientBrush
漸變。 您是否知道如何使用XAML
創建AngleGradient
?
更新:樣品 - 來自photoshop:
我為此編寫了一個着色器,編譯它並將.ps文件作為資源添加到項目中:
// no input texture, the output is completely generated in code
sampler2D inputSampler : register(S0);
/// <summary>The center of the gradient. </summary>
/// <minValue>0,0</minValue>
/// <maxValue>1,1</maxValue>
/// <defaultValue>.5,.5</defaultValue>
float2 centerPoint : register(C0);
/// <summary>The primary color of the gradient. </summary>
/// <defaultValue>Blue</defaultValue>
float4 primaryColor : register(C1);
/// <summary>The secondary color of the gradient. </summary>
/// <defaultValue>Red</defaultValue>
float4 secondaryColor : register(C2);
float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 src= tex2D(inputSampler, uv);
float2 p = float2(centerPoint)-uv;
float angle = (atan2(p.x, p.y) + 3.141596) / (2 * 3.141596);
float3 f = lerp(primaryColor.rgb, secondaryColor.rgb, angle);
float4 color = float4(src.a < 0.01
? float3(0, 0, 0) // WPF uses pre-multiplied alpha everywhere internally for a number of performance reasons.
: f, src.a < 0.01 ? 0 : 1);
return color;
}
像這樣包裹它:
public class AngularGradientEffect : ShaderEffect {
public static readonly DependencyProperty InputProperty = ShaderEffect.RegisterPixelShaderSamplerProperty(
"Input",
typeof(AngularGradientEffect),
0);
public static readonly DependencyProperty CenterPointProperty = DependencyProperty.Register(
"CenterPoint",
typeof(Point),
typeof(AngularGradientEffect),
new UIPropertyMetadata(new Point(0.5D, 0.5D), PixelShaderConstantCallback(0)));
public static readonly DependencyProperty PrimaryColorProperty = DependencyProperty.Register(
"PrimaryColor",
typeof(Color),
typeof(AngularGradientEffect),
new UIPropertyMetadata(Color.FromArgb(255, 0, 0, 255), PixelShaderConstantCallback(1)));
public static readonly DependencyProperty SecondaryColorProperty = DependencyProperty.Register(
"SecondaryColor",
typeof(Color),
typeof(AngularGradientEffect),
new UIPropertyMetadata(Color.FromArgb(255, 255, 0, 0), PixelShaderConstantCallback(2)));
public AngularGradientEffect() {
PixelShader pixelShader = new PixelShader();
pixelShader.UriSource = new Uri("/So.Wpf;component/Effects/AngularGradientEffect.ps", UriKind.Relative);
this.PixelShader = pixelShader;
this.UpdateShaderValue(InputProperty);
this.UpdateShaderValue(CenterPointProperty);
this.UpdateShaderValue(PrimaryColorProperty);
this.UpdateShaderValue(SecondaryColorProperty);
}
public Brush Input {
get {
return ((Brush)(this.GetValue(InputProperty)));
}
set {
this.SetValue(InputProperty, value);
}
}
/// <summary>The center of the gradient. </summary>
public Point CenterPoint {
get {
return ((Point)(this.GetValue(CenterPointProperty)));
}
set {
this.SetValue(CenterPointProperty, value);
}
}
/// <summary>The primary color of the gradient. </summary>
public Color PrimaryColor {
get {
return ((Color)(this.GetValue(PrimaryColorProperty)));
}
set {
this.SetValue(PrimaryColorProperty, value);
}
}
/// <summary>The secondary color of the gradient. </summary>
public Color SecondaryColor {
get {
return ((Color)(this.GetValue(SecondaryColorProperty)));
}
set {
this.SetValue(SecondaryColorProperty, value);
}
}
}
像這樣在Xaml中使用它,效果用漸變替換所有非透明像素,因此形狀必須具有顏色,任何顏色:
<Ellipse x:Name="ShaderEllipse" Fill="Transparent" Stroke="Blue" StrokeThickness="15">
<Ellipse.Effect>
<effects:AngularGradientEffect PrimaryColor="Red"
SecondaryColor="Transparent"/>
</Ellipse.Effect>
</Ellipse>
輸出是:
將它添加到此lib
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.