大海捞针 Skia(C++) 第 4 期：绘制基本图形

合集 - Skia(5)

1.大海捞针 Skia(C++) 第 1 期：Skia 环境搭建2023-01-28

2.大海捞针 Skia(C++) 第 4 期：绘制基本图形2023-04-22

3.大海捞针 Skia(C++) 第 2 期：“Hello, Skia!”2023-02-044.大海捞针 Skia(C++) 第 3 期：绘制文本2023-02-175.大海捞针 Skia(C++) 第 4.1 期（特别篇）：将绘制结果输出到窗口2024-03-29

收起

前言

本期将为大家介绍基本图形的画法，包括：圆、椭圆、矩形、圆角矩形。

关键词：图形、圆、椭圆、矩形、圆角、抗锯齿

案例

注意：接下来的案例都将使用PNG图像来存储查看绘制结果

1. 圆的绘制

首先，根据几何知识我们知道，要想确定一个圆，我们需要知道其半径和圆心。因此，在绘制前，我们也需要知道这些参数。

drawCircle(SkPoint center, SkScalar radius,  const SkPaint &paint);

以上是SkCanvas为我们提供的方法。
第一个参数是SkPoint型，表示一个点

SkPoint point;
point.fX = 100;
point.fY = 100;

第二个参数是SkScalar型，需要我们给一个数值表示半径。

第三个参数是SkPaint型，用于描述画笔。

SkPaint paint;
paint.setAlpha(255);
paint.setARGB(255, 0, 0, 0);

各个参数已定，调用方法进行绘制。

canvas.drawCircle(point, (SkScalar)20, paint);

此时在D盘下你将看到test.png呈现如下内容：

锦上添花——抗锯齿

我们发现，这样画出来的圆显得十分粗糙。为了消除这种突兀感，我们可以使用抗锯齿。

paint.setAntiAlias(true);

在绘制前，我们可以调用setAntiAlias方法启用或关闭抗锯齿。true表示开启，false表示关闭。
效果如下：

2. 椭圆的绘制

同样，根据几何学知识，焦点、焦距、离心率可以确定一个椭圆，但对于计算机来说却过于复杂。因此，这里我们不采用常规方法画椭圆，而是用长轴、短轴框定一个矩形，再依照矩形绘制。SkCanvas为我们提供如下方法：

drawOval(const SkRect &oval, const SkPaint &paint);

第一个参数是SkRect型，表示一个矩形，便于我们再这个矩形范围内绘制椭圆。

SkRect ovalRect;
ovalRect.fLeft = 130;
ovalRect.fRight = 230;
ovalRect.fTop = 80;
ovalRect.fBottom = 120;

第二个参数同样用于描述画笔。
调用函数即可。

3. 矩形的绘制

完成了圆和椭圆的绘制，矩形自然不在话下。
SkCanvas提供方法：

drawRect(const SkRect &rect, const SkPaint &paint);

4. 圆角矩形的绘制

原理同矩形一致，只不过我们需要传入一个参数设置圆角。

drawRect(const SkRect &rect, SkScalar rx, SkScalar ry, const SkPaint &paint);

第一和第四个参数这里不做解释。
第二和第三个参数表示圆角。我们其实可以将圆角那一块区域近似看作四分之一个椭圆，那么，rx表示椭圆的长半轴，ry表示椭圆的短半轴。

---

至此，本期内容就结束了。基本图形的绘制其实并不难，我们只需要了解一些数学几何知识和Skia提供的方法即可。后期我们将带领大家运用所学的内容进行拓展。敬请期待！