Android Skia图形库

概述lzyprime博客(github)创建时间：2020.12.17qq及邮箱：2383518170kotlin&android笔记λ：Skia是Android、flutter底层的2D图形库。Skia官网。2D页面无非就是图形(点、线、面)，文字,所以Skia设计也很简单：新建Canvas,画布，所有内容画在这上面通过Canvas相关方法画出

lzyprime 博客 (github)
创建时间：2020.12.17
qq及邮箱：2383518170

kotlin & android 笔记

---

λ：

Skia 是AndroID、Flutter底层的2D图形库。Skia 官网。

2D页面无非就是 图形(点、线、面)，文字, 所以Skia设计也很简单：

新建Canvas, 画布，所有内容画在这上面通过Canvas相关方法画出内容。一般名为drawxxx(), 同时要传入一个Paint, 也就是画笔样式。通过Canvas相关方法裁剪画布，一般名为clipxxx()内容定位，以Canvas左上角为(0, 0)点，向右向下建立(x, y)坐标系。

在官网可以直接体验这些API的C++版本，androID和Flutter无非是做一层包装，API大差不差。

用处：

自定义view。 不管是AndroID还是Flutter想要自定义程度高就离不开直接 *** 作Render层。大多数情况的确可以用现有的组件拼凑出想要的效果，但坏处就是损失很多没必要的计算和渲染，而且有些东西生写不出来。Flutter有很多组件原生设计简单，然后留出canvas用来自定义样式。

设计UI时，大概估计一下有多费。尤其是Flutter, 之前团队项目写出来的列表肉眼可见的掉帧。 我翻看这部分代码，发现大量的无用的组件嵌套，然后频繁的rebuild, 宽高很多写死，没有自适应能力。很多UI长一样却不复用，出现ItemXXXVIEw1, ItemXXXVIEw2这种东西。所以有一段时间的工作就是删代码，git记录我一个月添加了几百行然后删了几千行。

Canvas

官网Canvas介绍

drawdrawcolor: 喷色，不需要传画笔。drawRect: 画矩形Rect，需要左上角点的坐标和矩形宽高，同时传入一个Paint画笔样式drawRoundRect: 类似drawRect, 不同是可以设置圆角，通过传入圆角的 x, y 偏移值drawoval: 椭圆oval，类似drawRect。drawCicle: 圆Circle, 类似drawRect。drawPath: 画线，需要传入Path线的路径和Paint画笔。drawText: 渲染文字，需要传入文字，起始位置的坐标，Paint画笔（主要设置文字样式）。clip

clipxxx: 裁剪画布，可以传 Path, oval, Rect, Circle 等等

transtranslate(x, y): 平移到x, y。 作为新的原点scale(x, y): 缩放rotate: 旋转save: 保存当前状态，一般在变换前调用restore: 恢复现场，必须保证之前有save *** 作Path

官网Path介绍

除了规则图形外，其他 点，线，面 都可以通过Path画出来。然后就变成了数学题。

点动成线，线动成面，面动成体, 当直线长度与画笔粗细相同，就相当于画了一个 点, 而 面 可以看作多根 线 并排的结果。

moveto(x, y): 移动到指定坐标lineto(x, y): 从当前位置向 (x, y) 画直线。 获得线段(localX, localY) -> (x, y)quadTo(x1, y1, x2, y2): 贝塞尔曲线。从当前位置经过 (x1, y1) 向 (x2, y2) 画平滑曲线conicTo: 类似quadToaddCircle、 addRect等等，添加现成图形close: 当前点与起始点连接，形成闭合图形。Paint

官网Paint介绍

color, wIDth: 颜色，粗细style: 填充方式 fill: 实心@R_404_5283@: 镂空、描边 FontStyle: 字号，字体，字宽，字重等等属性。 原生C++里通过构造可绘制字符串(sk_sp<SkTextBlob>)实现, androID 封装进了Paint里。 Flutter 封装进了 TextStyle。filter|shader: colorFilter，maskFilter等等效果BlendMode

官网BlendMode介绍

用于处理两个元素A, B 相交时显示方式。

(A在B上， A在B下， A与B同级) * (交集， 并集， 异或集)。

实践

利用Path画圆角长方形。

圆角值 topleft == bottomright == 20, topRight == bottomleft == 40起始位置(20, 20)宽 200, 高 100

voID draw(SkCanvas* canvas) {    SkPaint paint;    paint.setAntiAlias(true);    paint.setStyle(SkPaint::k@R_404_5283@_Style);    paint.set@R_404_5283@WIDth(8);      SkPath path;  	double startX = 20, startY = 20; // (startX, startY) 左上角  	double endX = startX + 200, endY = startY + 100; // (endX, endY) 右下角  	double topLefTradius = 20, topRighTradius = 40;        // 移动起始点到左上角，并空出左上角圆角位置。 所以x坐标要+topLefTradius  	path.moveto(startX + topLefTradius, startY);        // 横向画线，同理空出右上角圆角位置  	path.lineto(endX - topRighTradius, startY);    // 右上角的圆角， 经过右上角(endX, startY) 向 (endX, startY + topRighTradius) 画曲线  	path.quadTo(endX, startY, endX, startY + topRighTradius);      // 同理完成右边, 底边，左边的绘制，最后与起始点 (startX + topLefTradius, startY) 闭合    // 右边  	path.lineto(endX, endY - topLefTradius);    // 右下圆角  	path.quadTo(endX, endY, endX - topLefTradius, endY);      // 底边  	path.lineto(startX + topRighTradius, endY);    // 底边圆角  	path.quadTo(startX, endY, startX, endY - topRighTradius);        // 左边  	path.lineto(startX, startY + topLefTradius);    // 左上圆角  	path.quadTo(startX, startY, startX + topLefTradius, startY);      canvas->drawPath(path, paint);}

总结

以上是内存溢出为你收集整理的Android Skia图形库全部内容，希望文章能够帮你解决Android Skia图形库所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。