关于 Skia
Skia 是一个 Google 开源的 C++ 二维图形库，提供各种常用的API，并可在多种软硬件平台上运行。
谷歌 Chrome 浏览器、Chrome OS、Android 系统、火狐浏览器、火狐操作系统以及其它许多产品都使用它作为图形引擎。
特别是近两年开始大火的跨平台 App 开发框架 Flutter，其图形引擎也是基于 Skia。
Skia 在 Chrome 和 Android 上作为底层的图形引擎，可以类比为 iOS 上的 Core Graphic / Core Animation 一层的框架，可能 Google 并没有大力在上层推广这个框架，所以前端、移动端开发者关注 Skia 并不多。甚至一些做了多年 Android 开发的同事也不知道有这个东西，也可能跟 Android 系统并没有在 Java 层暴露 Skia 的 API 有关。
关于本文
Skia 的中英文资料比较少，Skia 官方给的 iOS Demo 也是完全抛弃了 iOS 原生的 Window、Application、View 体系，用 C++ 实现了一版。
在 iOS 里使用 Skia，目前除了 Flutter，还没有发现其它案例。iOS 内置的 UI 框架已经足够好用，如果不是为了实现跨平台的能力，也不太用的到 Skia。
如何将 C++ 的 Skia 元素，渲染到 iOS 原生的 UIView 体系上，Skia 本身没有提供解决方案，iOS 端就更没有接口可以用了。所以想在 iOS 平台跑一个 Skia 的 Demo还是比较麻烦的，我参考了 OpenGL 的绘制思路，这里实现了一个将 Skia 的视图元素 Canvas 的 Bitmap，绘制到 iOS 原生 UIView 体系上的一个 Demo。真正应用时不会这样用，可以借助 SDL 或 OpenGL ES 渲染到 Native 层。
补充： Flutter Engine 里 iOS 端 Flutter 的渲染也大致是这个流程。
FlutterViewController 上的 FlutterView 里，绘制逻辑最终体现在drawRect:方法里，将 Engine shell 通过 Skia API 绘制的 UI，通过 Skia Picture 取出 Bitmap data，转为 CGImageRef，再通过 CGContextDrawImage 绘制到 UIView 上
以下是在 iOS 中加载 Skia 的一个 Demo
Demo
import Skia ，需要将当前类名改为 .mm
#import "ViewController.h"
#import "SkCanvas.h"
#import "SkGraphics.h"
#import "SkSurface.h"
#import "SkString.h"
#import "SkRRect.h"
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor lightGrayColor];
int width = 300;
int height = 500;
SkBitmap bitmap;
bitmap.setInfo(SkImageInfo::Make(width, height, kRGBA_8888_SkColorType, kOpaque_SkAlphaType, nullptr));
bitmap.allocPixels();
SkCanvas canvas(bitmap);
canvas.drawColor(SK_ColorWHITE);
SkPaint paint;
paint.setStyle(SkPaint::kFill_Style);
paint.setAntiAlias(true);
paint.setStrokeWidth(4);
paint.setColor(0xffFE938C);
SkRect rect_sk = SkRect::MakeXYWH(10, 30, 100, 160);
canvas.drawRect(rect_sk, paint);
SkRRect oval;
oval.setOval(rect_sk);
oval.offset(40, 80);
paint.setColor(0xffE6B89C);
canvas.drawRRect(oval, paint);
paint.setColor(0xff9CAFB7);
canvas.drawCircle(180, 50, 25, paint);
rect_sk.offset(80, 50);
paint.setColor(0xff4281A4);
paint.setStyle(SkPaint::kStroke_Style);
canvas.drawRoundRect(rect_sk, 10, 10, paint);
SkPaint p;
p.setTextSize(20);
p.setStrokeWidth(2.0);
p.setAntiAlias(true);
p.setColor(SK_ColorBLACK);
const char* str = "hello world";
canvas.drawText(str, strlen(str), 50, 300, p);
void* data = bitmap.getPixels();
NSUInteger dataLength = width * height * 4;
CGDataProviderRef ref = CGDataProviderCreateWithData(NULL, data, dataLength, NULL);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGImageRef iref = CGImageCreate(width, height, 8, 32, width * 4, colorspace,
kCGBitmapByteOrder32Big | kCGImageAlphaPremultipliedLast,
ref, NULL, true, kCGRenderingIntentDefault);
UIGraphicsBeginImageContext(CGSizeMake(width, height));
CGContextRef cgcontext = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(cgcontext, 0, height);
CGContextScaleCTM(cgcontext, 1.0, -1.0);
CGContextSetBlendMode(cgcontext, kCGBlendModeCopy);
CGContextDrawImage(cgcontext, CGRectMake(0.0, 0.0, width, height), iref);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CFRelease(ref);
CFRelease(colorspace);
CGImageRelease(iref);
bitmap.reset();
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(0, 0, width, height);
[self.view addSubview:imageView];
}
@end
Demo 里仅编译 x86_64 版本的静态库，编译方法参考 Skia 官方文档。
Skia in Chrome
可以在 Chrome 里，体验一下 Skia 的 API:
https://fiddle.skia.org/c/@shapes
