Win2D
首发于Win2D
第四章(图形篇2) 几何图形CanvasGeometry

第四章(图形篇2) 几何图形CanvasGeometry

首先,在代码顶部添加命名空间
using Windows.UI.Xaml;
using Microsoft.Graphics.Canvas.Brushes
using Microsoft.Graphics.Canvas.Geometry;

本文承接 第四章(图形篇) 几何图形CanvasGeometry


几何结合CanvasGeometryCombine

我有一个矩形,我有一个圆形,代码示例如下:

CanvasGeometry Rectangle = CanvasGeometry.CreateRectangle(CanvasControl, 300, 100, 300, 200);
CanvasGeometry Ellipse = CanvasGeometry.CreateEllipse(CanvasControl, 600, 300, 100,100);
Rectangle
Ellipse

如何把它俩用不同的方式组合起来?

答案是CanvasGeometryCombine

Affinity Designer里的结合

联合Union

在CanvasGeometryCombine枚举里,顾名思义联合Union就是把两个几何图形合起来

我们调用CombineWith方法,代码示例如下:

Rectangle.CombineWith(Ellipse,new Matrix3x2(), CanvasGeometryCombine.Union);
联合 CanvasGeometryCombine.Union

相交Intersect

相交Intersect得到两个几何图形相♂交部分的几何图形,代码示例如下:

Rectangle.CombineWith(Ellipse,new Matrix3x2(), CanvasGeometryCombine.Intersect);
相交 CanvasGeometryCombine.Intersect

异或Xor

异或Xor得到两个几何图形相♂异部分的几何图形,代码示例如下:

Rectangle.CombineWith(Ellipse,new Matrix3x2(), CanvasGeometryCombine.Xor);
异或 CanvasGeometryCombine.Xor

排除Exclude

异或Xor得到矩形排除掉圆形的几何图形,代码示例如下:

Rectangle.CombineWith(Ellipse,new Matrix3x2(), CanvasGeometryCombine.Exclude);
排除 CanvasGeometryCombine.Exclude


笔刷。一个几何图形,当它被绘制时,我们可以用不同的笔刷来填充它。

纯色笔刷CanvasSolidColorBrush

纯色笔刷,简而言之就是一个【颜色Color】属性加上【透明度Opacity】组成的笔刷

我们在画布控件的绘制事件里这样写,示例代码如下:

private void CanvasControl_Draw(CanvasControl sender, CanvasDrawEventArgs args)
{
    //几何图形
    CanvasGeometry Rectangle=CanvasGeometry.CreateRectangle(CanvasControl, 200, 100, 600, 300);
    //笔刷
    CanvasSolidColorBrush Brush=new CanvasSolidColorBrush(CanvasControl, Colors.Orange);
    //绘制
    args.DrawingSession.FillGeometry(Rectangle, Brush);
}
纯色笔刷CanvasSolidColorBrush


线性渐变笔刷CanvasLinearGradientBrush

线性渐变,它实例化时需要指定一组包含【颜色Color】与【位置Position】的定点,和边缘行为CanvasEdgeBehavior,以及渐变的起始点和结束点

我们把上一段代码的笔刷部分修改一下,示例代码如下:

 //笔刷
CanvasGradientStop[] Stops = new CanvasGradientStop[]
{
    new CanvasGradientStop{ Color=Colors.Yellow,Position=0f},
    new CanvasGradientStop{ Color=Colors.Orange,Position=0.3f},
    new CanvasGradientStop{ Color=Colors.Orange,Position=0.7f},
    new CanvasGradientStop{ Color=Colors.Red,Position=1f},
};
CanvasLinearGradientBrush Brush = new CanvasLinearGradientBrush(CanvasControl, Stops, CanvasEdgeBehavior.Clamp, CanvasAlphaMode.Premultiplied)
{
     StartPoint = new Vector2(0, 100),//起始点
     EndPoint = new Vector2(0, 400),//结束点
};
线性渐变笔刷CanvasLinearGradientBrush


径向渐变笔刷CanvasRadialGradientBrush

径向渐变与线性渐变基本相同,不同的是后者需要指定中心点与X半径Y半径

示例代码如下:

CanvasRadialGradientBrush Brush = new CanvasRadialGradientBrush(CanvasControl, Stops, CanvasEdgeBehavior.Clamp, CanvasAlphaMode.Premultiplied)
{
     Center = new Vector2(500, 250),//中心点
     RadiusX=300,//X半径
     RadiusY=150,//Y半径
};
径向渐变笔刷CanvasRadialGradientBrush


图像笔刷CanvasImageBrush

图像笔刷,顾名思义用图像做的笔刷。我们指定一个bitmap作为图像来初始化图像笔刷

示例代码如下:

//笔刷
CanvasImageBrush Brush = new CanvasImageBrush(CanvasControl, bitamp);
图像笔刷CanvasImageBrush


需要注意的是,图像笔刷里有两个CanvasEdgeBehavior属性,分别是ExtendX和ExtendY,它们决定了图像的排列方式

CanvasEdgeBehavior的不同枚举


注意

  1. CanvasGeometry的生成方法非常自由,还可以自由排列组合
  2. 除了FilGeometry方法(可以填充几何图形),还有DrawGeometry方法(可以描边几何图形)
  3. 调用DrawGeometry方法时,修改方法里面的CanvasStrokeStyle strokeStyle属性可以实现描边的虚线


更新中.......(by放暑假摸鱼半个月的我)

编辑于 2018-07-17

文章被以下专栏收录

    Win2D是一款易于使用的Windows运行时API,可用于GPU加速的即时模式2D图形渲染。它适用于为Windows通用平台(UWP)编写应用程序的C#,C ++和VB开发人员。它利用了Direct2D的强大功能,并与XAML和CoreWindow无缝集成。