200704 CanvasKit 绘图的基本流程

以下是一组绘制命令的示例，用于绘制填充的七边形。

import React, { useEffect } from 'react';
const CanvasKitInit = require('canvaskit-wasm');
export default (): React.ReactNode => {
  const init = async () => {
    const CanvasKit = await CanvasKitInit();
    const surface = CanvasKit.MakeCanvasSurface(document.getElementById(
      'ink',
    ) as HTMLCanvasElement);
    const canvas = surface.getCanvas();
    const scale = 256.0;
    const R = 0.45 * scale;
    const TAU = 6.2831853;
    const path = new CanvasKit.SkPath();
    path.moveTo(R, 0.0);
    for (let i = 1; i < 7; i++) {
      const theta = (3 * i * TAU) / 7;
      path.lineTo(R * Math.cos(theta), R * Math.sin(theta));
    }
    path.close();
    const style = new CanvasKit.SkPaint();
    style.setAntiAlias(true);
    canvas.clear(CanvasKit.Color(255, 255, 255));
    canvas.translate(0.5 * scale, 0.5 * scale);
    canvas.drawPath(path, style);
    canvas.flush();
  };
  useEffect(() => {
    init();
  }, []);
  return (
    <div>
      <canvas id="ink" width="1024" height="1024" />
    </div>
  );
};

通过这个案例拆解一下流程。

1. 加载 CanvasKit 对象

这一步是核心的步骤，只有这个对象加载完毕之后，才能够进行 Canvas 的渲染

const CanvasKit = await CanvasKitInit();

2. 挂载渲染画布

将 CanvasKit 初始化到某个画布上，同时可以使用 getCanvas 方法拿到画布对象。

const surface = CanvasKit.MakeCanvasSurface(document.getElementById(
  'ink',
) as HTMLCanvasElement);

const canvas = surface.getCanvas();

3. 绘制相应图形

这一步可以对图形进行绘制操作

const scale = 256.0;
const R = 0.45 * scale;
const TAU = 6.2831853;
const path = new CanvasKit.SkPath();
path.moveTo(R, 0.0);

for (let i = 1; i < 7; i++) {
  const theta = (3 * i * TAU) / 7;
  path.lineTo(R * Math.cos(theta), R * Math.sin(theta));
}
path.close();

const style = new CanvasKit.SkPaint();
style.setAntiAlias(true);

4. 将图形渲染到画布上

将图形渲染到画布上，必须加上flush 方法才能对画面进行刷新，否则无法刷新画面。

canvas.clear(CanvasKit.Color(255, 255, 255));
canvas.translate(0.5 * scale, 0.5 * scale);
canvas.drawPath(path, style);
canvas.flush();