自定义画笔 - 我想要两个渐变将它们链接在一起 [英] Custom Brush - I want two gradients chaining them together
问题描述
我正在制作条形图,我希望每个条形有两个单独的渐变.首先,我想要一个渐变,从上到下纯红色到透明红色.我想在上面绘制一个从右到左、黑色到不透明的渐变.
I am making a bar chart and I want two separate gradients for each bar. First I want a gradient to go from top to bottom solid red to transparent red. I want to paint over the top of that a gradient that goes from right to left, black to opaque.
所以 - 在左下角我们应该有;
So - In the bottom left we should have;
- 左下角 - Alpha 0
- 右下角 - Alpha 0
- 左上角 - Alpha 255 红色
- 右上角 - Alpha 255 颜色黑色
所以实际上我想采用纯色,向黑色添加从左到右的渐变,然后获取输出并添加从上到下的渐变到透明度.
So in effect I want to take a solid colour, add a left to right gradient to black then take the output of that and add a top to bottom gradient to transparency.
所有这一切,我希望它在一个画笔中,这甚至可能吗?
All this and I want it to be in a single brush, is this even possible?
推荐答案
是的.使用 VisualBrush 的 VisualBrush 来组合其他两个画笔.
Yes. Use a VisualBrush whose Visual is a Rectangle inside a Border to combine the other two brushes.
像这样:
<LinearGradientBrush x:Key="UnderBrush" EndPoint="0,1">
<GradientStop Color="#FFFF0000" Offset="0" />
<GradientStop Color="#00FF0000" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="OverBrush" EndPoint="1,0">
<GradientStop Color="#00000000" Offset="0" />
<GradientStop Color="#FF000000" Offset="1" />
</LinearGradientBrush>
<VisualBrush x:Key="CombinedBrush">
<VisualBrush.Visual>
<Border Background="{StaticResource UnderBrush}">
<Rectangle Fill="{StaticResource OverBrush}" Width="1" Height="1" />
</Border>
</VisualBrush.Visual>
</VisualBrush>
CombinedBrush 可用于绘制您的条形图,您将获得您所描述的效果.
CombinedBrush can be used to paint your bars, and you will get the effect you describe.
银光版
由于 Silverlight 没有 VisualBrush,因此您必须在代码中构建 WritableBitmap 并将其与 ImageBrush 一起使用:
Since Silverlight has no VisualBrush you must build a WritableBitmap in code and use it with an ImageBrush:
<ImageBrush x:Key="CombinedBrush">
<my:VisualBrushSimulator.Visual>
<Border Background="{StaticResource UnderBrush}">
<Rectangle Fill="{StaticResource OverBrush}" Width="1" Height="1" />
</Border>
</my:VisualBrushSimulator.Visual>
</ImageBrush>
以下是 VisualBrushSimulator 的实现方式:
Here is how the VisualBrushSimulator might be implemented:
public class VisualBrushSimulator : DependencyObject
{
public Visual GetVisual(DependencyObject obj) { return (Visual)obj.GetValue(VisualProperty); }
public void SetVisual(DependencyObject obj, Visual value) { obj.SetValue(VisualProperty, value); }
public static readonly DependencyProperty VisualProperty = DependencyProperty.RegisterAttached("Visual", typeof(Visual), typeof(VisualBrushSimulator), new PropertyMetadata
{
PropertyChangedCallback = (obj, e) =>
{
int width=1000;
int height=1000;
var bitmap = new WritableBitmap(width, height);
bitmap.Render((Visual)e.NewValue, new ScaleTransform { ScaleX = width, ScaleY = height });
((ImageBrush)obj).ImageSource = bitmap;
}
});
}
请注意,这不是真正的 VisualBrush 模拟,因为对 Visual 的更改不会影响画笔.
Note that this is not a true VisualBrush simulation, since changes to the Visual do not affect the brush.
这篇关于自定义画笔 - 我想要两个渐变将它们链接在一起的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!