canvasKit类型文件&API解释（一）

stage1
1,521 阅读7分钟

一、CanvasKitInit

简介

CanvasKitInit是一个用于在WebAssembly环境下初始化CanvasKit库的函数。CanvasKit是Skia图形库的WebAssembly版本，可以在Web平台上提供高性能的2D和3D图形渲染。

CanvasKitInit函数通常由JavaScript代码调用，以便在浏览器中使用CanvasKit库。在调用CanvasKitInit函数之前，必须先加载CanvasKit库的WebAssembly二进制文件。加载WebAssembly二进制文件的方式可以是通过Fetch API从服务器上获取，也可以是将二进制数据嵌入到JavaScript代码中。

CanvasKitInit函数可以接受一些可选的参数，例如要使用的WebAssembly内存大小，以及提供自定义的输出函数以处理日志输出。一旦CanvasKitInit函数成功地初始化了CanvasKit库，就可以使用它来创建2D和3D图形，并将它们呈现在HTML5画布元素上。

这里解释下WebAddembly

WebAssembly是一种可移植的低级字节码，用于在Web浏览器中运行高性能应用程序。它可以被看作是一种虚拟机，可以在现代Web浏览器中实现，并且被设计为一种可移植的目标，可以由各种编程语言编写。

WebAssembly的目标是在Web上实现高性能的计算密集型应用程序，例如游戏、视频编辑器、音频处理器和科学计算应用程序。它通过提供一种接近原生代码的执行速度，使得这些应用程序可以在Web上以接近本地性能的速度运行。

WebAssembly还可以与现有的Web技术（如JavaScript）结合使用，以提供更好的性能和更灵活的开发体验。它还可以在服务器端和嵌入式设备上使用，以提供与Web相同的高性能和可移植性。

类型说明

export default function CanvasKitInit(opts: CanvasKitInitOptions): Promise<CanvasKit>;

export interface CanvasKitInitOptions {
    /**
     * 这个回调函数将在canvasKit需要fetch一个文件比如WASM的二进制文件的时候被调用，
     * @param file - 加载的文件名.
     */
    locateFile(file: string): string;
}

语法

function CanvasKitInit({locateFile, onRuntimeInitialized}): Promise<CanvasKit>;

参数说明：

  • locateFile：一个函数，用于指定CanvasKit的WASM二进制文件位置，该函数接受一个参数，表示二进制文件名，返回一个字符串，表示二进制文件的URL或相对路径。如果不指定该参数，则默认将二进制文件放在与JS文件相同的目录下，且文件名为canvas.wasm。
  • onRuntimeInitialized：一个回调函数，在CanvasKit库加载完成后会被调用。该函数没有参数，可以用来执行初始化操作。(0.38.0版本中已经没有这个类型声明)

返回值说明：

  • Promise<CanvasKit>：一个Promise对象，用于获取CanvasKit库的实例。当CanvasKit库加载完成后，该Promise对象会resolve并返回CanvasKit库的实例。

示例代码：

import {CanvasKitInit} from 'canvaskit-wasm';

CanvasKitInit({
  locateFile: (file) => `path/to/canvaskit-wasm/${file}`,
  onRuntimeInitialized: () => {
    console.log('CanvasKit initialized!');
  }
}).then((CanvasKit) => {
  // 获取CanvasKit库的实例，并执行相关操作
});

二、CanvasKit实例对象

简介

在CanvasKitInit返回的promise中resolve会返回一个CanvasKit对象

  • 创建路径和形状：您可以使用CanvasKit实例对象创建各种形状，例如矩形、圆形、椭圆形、多边形等，以及使用路径绘制复杂的形状。
  • 绘制图像：您可以使用CanvasKit实例对象加载并绘制图像，并可以在图像上执行各种操作，例如旋转、缩放、裁剪等。
  • 创建和应用渐变：CanvasKit实例对象允许您创建线性或径向渐变，并将其应用于形状或文本。
  • 绘制文本：使用CanvasKit实例对象，您可以将文本绘制到画布上

语法

<script>
  CanvasKitInit({
    locateFile: (file) => {
      return 'https://cdn.skia.org/canvaskit/' + file;
    }
  }).then((CanvasKit) => {
    // 在这里创建 CanvasKit 实例对象
    const skCanvas = CanvasKit.MakeCanvas(canvas.width, canvas.height);
    const skPaint = new CanvasKit.SkPaint();

    // 在这里使用 skCanvas 和 skPaint 进行绘图
  });
</script>

在这个例子中，我们使用 CanvasKit 的 MakeCanvas 函数创建了一个 SkCanvas 对象，并且创建了一个 SkPaint 对象用于设置绘图属性。现在可以使用 CanvasKit 的其他函数和对象进行图形绘制了。

1.CanvasKit.Color

类型说明

/**
     * 使用与CSS的RGBA()类似的API构造一个颜色，即。
		 * 在内部，颜色是四个未预乘的32位浮点数：r、g、b、a。
     * 如果要构建一个更精确或更宽的色域，
     * 使用Canvas Kit.Color4f()。
     *
     * @param r - 红 [0, 255].
     * @param g - 绿 [0, 255].
     * @param b - 蓝o [0, 255].
     * @param a - 透明度0-1，默认1).
     */
    Color(r: number, g: number, b: number, a?: number): Color;

简介

CanvasKit是一个用于创建2D和3D图形的WebAssembly库，由Google开发，它提供了一些API来绘制图形，其中之一是CanvasKit.Color。

CanvasKit.Color用于表示颜色，创建一个颜色对象，它可以使用以下两种方式之一进行初始化：

语法

  1. 使用十六进制值
CanvasKit.Color(0xFF, 0x00, 0x00, 0xFF); // 红色
CanvasKit.Color(0x00, 0xFF, 0x00, 0xFF); // 绿色
CanvasKit.Color(0x00, 0x00, 0xFF, 0xFF); // 蓝色
CanvasKit.Color(0xFF, 0xFF, 0xFF, 0xFF); // 白色
  1. 使用四个0到1之间的浮点值
CanvasKit.Color(1.0, 0.0, 0.0, 1.0); // 红色
CanvasKit.Color(0.0, 1.0, 0.0, 1.0); // 绿色
CanvasKit.Color(0.0, 0.0, 1.0, 1.0); // 蓝色
CanvasKit.Color(1.0, 1.0, 1.0, 1.0); // 白色

四个参数分别代表红色，绿色，蓝色和alpha（透明度），alpha值为1.0表示完全不透明，为0.0表示完全透明。

示例

<!DOCTYPE html>
<html>

<head>
  <title>CanvasKit Color 示例</title>
  <!-- 加载 CanvasKit 库 -->
  <script src="../node_modules/canvaskit-wasm/bin/canvaskit.js"></script>
</head>

<body onload="drawCircle()">
  <canvas id="canvas" width="200" height="200"></canvas>
  <script>
    function drawCircle () {
      CanvasKitInit({
        locateFile: (file) => '/node_modules/canvaskit-wasm/bin/' + file,
      }).then((CanvasKit) => {
        //获取CanvasKit库的实例，并执行相关操作

        // 获取 canvas 元素和绘图上下文
        const surface = CanvasKit.MakeWebGLCanvasSurface("canvas")
        const canvas = surface.getCanvas()

        // 创建画笔和颜色对象
        const paint = new CanvasKit.Paint()
        const color = CanvasKit.Color(255, 0, 0, 1)

        // 设置画笔颜色
        paint.setColor(color)
        
        // 设置画笔绘制样式为填充
        paint.setStyle(CanvasKit.PaintStyle.Fill)

        // 圆心坐标为 (100, 100)，半径为 50 像素
        canvas.drawCircle(100, 100, 50, paint)

        // 刷新 surface，将绘制的图像渲染到 canvas 上
        surface.flush()
      })

    }
  </script>
</body>

</html>

2.CanvasKit.Color4f

跟Color使用类似，只是参数变成了浮点数在0-1之间

语法

Color4f 类包含以下属性：

  • red: 表示红色分量的值，取值范围为 0.0 到 1.0 之间的浮点数。
  • green: 表示绿色分量的值，取值范围为 0.0 到 1.0 之间的浮点数。
  • blue: 表示蓝色分量的值，取值范围为 0.0 到 1.0 之间的浮点数。
  • alpha: 表示透明度的值，取值范围为 0.0 到 1.0 之间的浮点数。0.0 表示完全透明，1.0 表示完全不透明。

Color4f 类可以用于创建颜色，例如：

var color = new CanvasKit.Color4f(1.0, 0.0, 0.0, 1.0); // 红色不透明

应用

Color4f 类也可以用于表示颜色的插值和混合，例如：

var color1 = new CanvasKit.Color4f(1.0, 0.0, 0.0, 1.0); // 红色不透明
var color2 = new CanvasKit.Color4f(0.0, 0.0, 1.0, 0.5); // 半透明的蓝色
var mixColor = CanvasKit.Color4f.Lerp(color1, color2, 0.5); // 红色和蓝色的混合色

在上面的例子中，Lerp 方法用于计算两种颜色的混合，其中第三个参数表示混合的比例。在这种情况下，它将产生一种粉红色的颜色。

3.Canvaskit.ColorAsInt(一般不用)

类型说明

/**。
* 将颜色构建为32位无符号整数，每个通道分配8位。
* 通道料在0-255之间，因此将被钳制。
* 如果省略a，则为255(不透明)。
*。
* 这不是Skia API中使用颜色的首选方式，请使用颜色或Color4f。
* @param red值，[0,255]。
* @param green值，[0,255]。
* @param Blue值，[0,255]。
* @param alpha值，从0到1.0。默认情况下为1.0(不透明)。
*/
 ColorAsInt(r: number, g: number, b: number, a?: number): ColorInt;

简介

CanvasKit.ColorAsInt 是一个函数，用于将 CanvasKit 中的颜色值表示为整数值。CanvasKit 是一个基于 WebGL 和 Skia 的 2D/3D 图形渲染引擎，常用于创建 Web 和移动应用中的图形和动画。

语法

CanvasKit 中的颜色值可以用多种方式表示，例如 RGB、RGBA、HSL、HSLA 等。CanvasKit.ColorAsInt 函数将这些颜色值转换为整数值，方便在底层渲染引擎中进行处理。

函数的语法如下：

CanvasKit.ColorAsInt(color)

其中，color 是一个表示颜色的字符串，可以是以下格式之一：

  • #RRGGBB：表示红、绿、蓝三个颜色通道的值，每个通道占两位十六进制数。
  • #AARRGGBB：表示透明度、红、绿、蓝四个颜色通道的值，每个通道占两位十六进制数。
  • rgb(r, g, b)：表示红、绿、蓝三个颜色通道的值，取值范围为 0~255。
  • rgba(r, g, b, a)：表示透明度、红、绿、蓝四个颜色通道的值，其中透明度取值范围为 01，其他通道取值范围为 0255。
  • hsl(h, s, l)：表示色相、饱和度、亮度三个颜色通道的值，其中色相取值范围为 0360，饱和度和亮度取值范围为 01。
  • hsla(h, s, l, a)：表示透明度、色相、饱和度、亮度四个颜色通道的值，其中透明度取值范围为 0~1，其他通道的取值范围同上。

CanvasKit.ColorAsInt 函数返回一个表示颜色的整数值，其中 alpha、red、green、blue 四个颜色通道分别占据整数值的不同位。例如，对于颜色值 #FF0000，函数返回的整数值为 0xFFFF0000。

示例

<!DOCTYPE html>
<html>
<head>
	<title>CanvasKit ColorAsInt Example</title>
</head>
<body>
	<canvas id="myCanvas"></canvas>

	<script src="/node_modules//canvaskit-wasm/bin/canvaskit.js"></script>
	<script>
		CanvasKitInit().then(function(CanvasKit) {
			var canvas = document.getElementById('myCanvas');
			canvas.width = 400;
			canvas.height = 400;
			var context = canvas.getContext('2d');
			var colorString = '#FF0000';
			var colorAsInt = CanvasKit.ColorAsInt(colorString);
      console.log('colorAsInt',colorAsInt,colorAsInt.toString(16).padStart(8, '0'));
			canvas.style.backgroundColor = '#' + colorAsInt.toString(16).padStart(8, '0');
		});
	</script>
</body>
</html>

4.CanvasKit.getColorComponents

类型说明

/**。
* 返回一个CSS样式[r，g，b，a]，其中r，g，b返回为。
* 整数范围为[0,255]，其中a的比例介于0和1.0之间。
* [已弃用]-由于颜色为4个浮点数，因此这是微不足道的。
*/
getColorComponents(c: Color): number[];

CanvasKit.getColorComponents() 方法用于获取指定颜色的RGBA分量。RGBA分量表示颜色的红、绿、蓝、透明度值。

语法

CanvasKit.getColorComponents(color: number) => Array<number>

参数

color：一个32位整数，表示颜色值。该值可以使用 CanvasKit 的 Color 类来创建。

返回值

该方法返回一个长度为4的数组，包含指定颜色的RGBA分量值。

示例

下面的示例演示如何使用 CanvasKit.getColorComponents() 方法获取颜色的RGBA分量值：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CanvasKit.getColorComponents() 示例</title>
  <script src="/node_modules/canvaskit-wasm/bin/canvaskit.js"></script>
  <script type="module">
    CanvasKitInit().then(function (CanvasKit) {
      const surface = CanvasKit.MakeCanvasSurface('canvas')
      const paint = new CanvasKit.Paint()
      paint.setColor(CanvasKit.Color(255, 0, 255, 1))
      const color = paint.getColor()
      const components = CanvasKit.getColorComponents(color)
      console.log(components)
    });

  </script>
</head>

<body>
  <canvas id="canvas"></canvas>
</body>

</html>

5.CanvasKit.parseColorString()

类型说明

/**。
* 接受一个CSS颜色值并返回一个CanvasKit.Color。
* (按RGBA顺序由4个浮点数组成的数组)。可选的ColorMap。可以提供将自定义字符串映射到值的*。
* 在CanvisKit canvas2d填充层中，我们提供此映射以进行处理。
* canvar2d调用，但由于代码大小的原因，此处不是。
*/
parseColorString(color: string, colorMap?: Record<string, Color>): Color;

定义：

CanvasKit.parseColorString是CanvasKit库中的一个函数，用于将字符串表示的颜色值解析为32位整数值。

语法：

CanvasKit.parseColorString(colorString);
// 类型说明
parseColorString(color: string, colorMap?: Record<string, Color>): Color;

参数说明：

colorString ：要解析的字符串，可以是以下格式之一：

  • "#RRGGBB"：16进制RGB颜色值，其中RR、GG、BB分别表示红、绿、蓝的色值。
  • "#RRGGBBAA"：16进制RGBA颜色值，其中RR、GG、BB、AA分别表示红、绿、蓝、alpha通道的值。
  • "rgb(R, G, B)"：RGB颜色值，其中R、G、B分别表示红、绿、蓝的色值。
  • "rgba(R, G, B, A)"：RGBA颜色值，其中R、G、B、A分别表示红、绿、蓝、alpha通道的值。

返回值：

解析后的颜色值，以Uint8Array类型的数组形式返回，其中数组长度为4，分别表示RGBA通道的值，取值范围为0~255。

示例

<!DOCTYPE html>
<html>

<head>
	<title>CanvasKit Color Demo</title>
	<script src="/node_modules/canvaskit-wasm/bin/canvaskit.js"></script>
	<script>
		function draw(){
			CanvasKitInit().then((CanvasKit) => {
				var canvas = document.getElementById("canvas")
				var context = canvas.getContext("2d")
				// 从输入框获取颜色字符串
				var colorString = document.getElementById("colorString").value
				// 将颜色字符串转换为RGBA颜色对象
				var color = CanvasKit.parseColorString(colorString)
				console.log(color);
				// 绘制矩形，并填充指定颜色
				context.fillStyle = "rgba(" + color.r + ", " + color.g + ", " + color.b + ", " + color.a + ")"
				context.fillRect(0, 0, 200, 200)
		})
		}

	</script>
</head>

<body>
	<h1>CanvasKit Color Demo</h1>
	<p>请输入颜色字符串：</p>
	<input type="text" id="colorString" value="#FF0000">
	<button onclick="draw()">绘制</button>
	<canvas id="canvas" width="200" height="200"></canvas>
</body>

</html>

6.CanvasKit.multiplyByAlpha

类型说明

/**
* 返回应用了新Alpha值的传入颜色的副本。
* [已弃用]-由于颜色为4个浮点数，因此这是微不足道的。
*/
multiplyByAlpha(c: Color, alpha: number): Color;

定义

CanvasKit.multiplyByAlpha()是一个CanvasKit库中的函数，它将颜色值乘以指定的alpha值，并返回结果。这个函数通常用于渲染半透明对象，例如具有透明度的图像或文本。

语法

CanvasKit.multiplyByAlpha(color: SkColor, alpha: number): SkColor

参数

  • color：Color，需要被乘以alpha值的颜色。
  • alpha：number，乘以的alpha值，取值范围为0到1。

返回值

Color：乘以alpha值后的颜色。

示例

<canvas id="myCanvas" width="200" height="200"></canvas>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 设置半透明色
ctx.fillStyle = "rgba(255, 0, 0, 0.5)";

// 绘制矩形
ctx.fillRect(10, 10, 50, 50);

// 获取颜色值并乘以alpha值
const color = CanvasKit.multiplyByAlpha(ctx.getImageData(10, 10, 1, 1).data, 0.5);

// 将结果设置为新的颜色并绘制矩形
ctx.fillStyle = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3]})`;
ctx.fillRect(70, 10, 50, 50);

以上示例中，我们首先在画布上绘制一个半透明的红色矩形，然后使用CanvasKit.multiplyByAlpha()函数获取这个矩形的颜色值，并将其乘以0.5，得到新的颜色值。最后，我们使用这个新的颜色值绘制另一个矩形。

7.CanvasKit.computeTonalColors

类型说明

/**
* 计算单通道色调Alpha的颜色值。
* 注意，如果传入错误的颜色，则MallocObj指向的内存。
* 将被计算出的色调颜色覆盖(因此返回值可以是已忽略)。
* @param colors
*/
computeTonalColors(colors: TonalColorsInput): TonalColorsOutput;

export interface TonalColorsOutput {
    //周围的
    ambient: Color;
    //点
    spot: Color;
}

返回值

计算后的colors

示例

8.CanvasKit.LTRBRect

类型说明

/**
*返回一个具有给定参数的矩形。详见Rect.h。
*@param left-左上角的x坐标。
*@param top-左上角的y坐标。
*@param right-右下角的x坐标。
*@param bottom-右下角的y坐标。
*/
LTRBRect(left: number, top: number, right: number, bottom: number): Rect;

定义

CanvasKit.LTRBRect 是一个表示矩形四个边界（左、上、右、下）坐标的对象。它通常用于指定绘制区域或裁剪区域。该对象包含以下四个属性：

  • left: 矩形的左边界坐标
  • top: 矩形的上边界坐标
  • right: 矩形的右边界坐标
  • bottom: 矩形的下边界坐标

语法

const rect = CanvasKit.LTRBRect(left, top, right, bottom);

参数

  • left：矩形的左边界坐标，为一个数字。
  • top：矩形的上边界坐标，为一个数字。
  • right：矩形的右边界坐标，为一个数字。
  • bottom：矩形的下边界坐标，为一个数字。

示例

<!DOCTYPE html>
<html>

<head>
  <title>CanvasKit ColorAsInt Example</title>
</head>

<body>
  <canvas id="canvas"></canvas>

  <script src="/node_modules//canvaskit-wasm/bin/canvaskit.js"></script>
  <script>
    // 创建一个 LTRBRect 对象并绘制矩形
    CanvasKitInit().then(function (CanvasKit) {
      const surface = CanvasKit.MakeCanvasSurface('canvas');
      const canvas = surface.getCanvas();
      
      // 创建一个 LTRBRect 对象并绘制矩形
      const rect = CanvasKit.LTRBRect(50, 50, 150, 150);
      const paint = new CanvasKit.Paint();
      const color = CanvasKit.Color(255, 0, 0, 1)
      paint.setColor(color);
      canvas.drawRect(rect, paint);
      
      surface.flush();
    });
  </script>
</body>

</html>

9.CanvasKit.XYWHRect

类型说明

/**
* 返回一个具有给定参数的矩形。详见Rect.h。
* @param x-左上角的x坐标。
* @param y-左上角的y坐标。
* @param width-矩形的宽度。
* @param height-矩形的高度。
*/
XYWHRect(x: number, y: number, width: number, height: number): Rect;

定义

CanvasKit.XYWHRect是CanvasKit库中的一个对象，用于表示一个矩形，具体定义如下：

interface XYWHRect {
  x: number;
  y: number;
  width: number;
  height: number;
}

该对象有四个属性，分别表示矩形的左上角x坐标、y坐标、宽度和高度。

语法

const rect = CanvasKit.XYWHRect(x, y, width, height);

参数

  • x：矩形左上角的x坐标。
  • y：矩形左上角的y坐标。
  • width：矩形的宽度。
  • height：矩形的高度。

返回值

CanvasKit.XYWHRect将返回一个XYWHRect对象，包含了输入的参数。

示例

<!DOCTYPE html>
<html>
<head>
  <title>CanvasKit ColorAsInt Example</title>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="/node_modules/canvaskit-wasm/bin/canvaskit.js"></script>
  <script>   
    CanvasKitInit().then(function (CanvasKit) {
      const surface = CanvasKit.MakeCanvasSurface('canvas');
      const canvas = surface.getCanvas();
      
      // 创建一个 LTRBRect 对象并绘制矩形
      const rect = CanvasKit.XYWHRect(50, 50, 150, 150);
      const paint = new CanvasKit.Paint();
      const color = CanvasKit.Color(0, 255, 0, 1)
      paint.setColor(color);
      canvas.drawRect(rect, paint);
      surface.flush();
    });
  </script>
</body>

</html>

10.CanvasKit.LTRBiRect

类型说明

/**
*返回一个具有给定整数参数的矩形对象。详见Rect.h。
*@param left-左上角的x坐标。
*@param top-左上角的y坐标。
*@param right-右下角的x坐标。
*@param bottom-右下角的y坐标。
*/
LTRBiRect(left: number, top: number, right: number, bottom: number): IRect;

示例

<!DOCTYPE html>
<html>

<head>
  <title>CanvasKit ColorAsInt Example</title>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script src="/node_modules//canvaskit-wasm/bin/canvaskit.js"></script>
  <script>
    // 创建一个 LTRBiRect 对象并绘制矩形
    CanvasKitInit().then(function (CanvasKit) {
      const surface = CanvasKit.MakeCanvasSurface('canvas');
      const canvas = surface.getCanvas();
      
      // 创建一个 LTRBiRect 对象并绘制矩形
      const rect = CanvasKit.LTRBiRect(50, 50, 150, 150);
      const paint = new CanvasKit.Paint();
      const color = CanvasKit.Color(0, 255, 0, 1)
      paint.setColor(color);
      canvas.drawRect(rect, paint);
      
      surface.flush();
    });
    
  </script>
</body>

</html>

11.CanvasKit.XYWHiRect

类型说明

/**
* 返回一个具有给定参数的矩形。详见Rect.h。
* @param x-左上角的x坐标。
* @param y-左上角的y坐标。
* @param width-矩形的宽度。
* @param height-矩形的高度。
*/
XYWHiRect(x: number, y: number, width: number, height: number): IRect;

示例

用法类似上面的矩形方法

12.CanvasKit.RRectXY

类型说明

/**
*返回一个圆角矩形，该矩形由给定的矩形和
*对于所有四个角具有相同的半径X和半径Y。
*@param rect-基本矩形。
*@param rx-角在x方向上的半径。
*@param ry-角在y方向上的角的半径。
*/
RRectXY(rect: InputRect, rx: number, ry: number): RRect;

示例

<!DOCTYPE html>
<html>

<head>
  <title>CanvasKit ColorAsInt Example</title>
</head>

<body>
  <canvas id="canvas"></canvas>

  <script src="/node_modules//canvaskit-wasm/bin/canvaskit.js"></script>
  <script>
    // 创建圆角矩形
    CanvasKitInit().then(function (CanvasKit) {
      const surface = CanvasKit.MakeCanvasSurface('canvas');
      const canvas = surface.getCanvas();
      
      // 创建一个 RRectXY 对象并绘制矩形
      const rect = CanvasKit.LTRBiRect(50, 50, 150, 150);
      const radiusReact = CanvasKit.RRectXY(rect, 5, 5)
      const paint = new CanvasKit.Paint();
      const color = CanvasKit.Color(0, 255, 0, 1)
      paint.setColor(color);
      // 绘制圆角矩形
      canvas.drawRRect(radiusReact, paint);
      surface.flush();
    });

  </script>
</body>

</html>

image.png

12.CanvasKit.getShadowLocalBounds

类型说明

/**
*生成阴影相对于路径的边界框。包括环境光和光斑
*阴影边界。这与Canvas.drawShadow（）搭配使用。
*有关更多详细信息，请参阅SkShadowUtils.h。
*@param ctm-设备空间的当前转换矩阵。
*@param path-用于生成阴影的遮挡器。
*@param zPlaneParams-平面函数的值，该函数返回基于局部x和y值（当前不应用矩阵）。
*@param lightPos-灯光相对于画布平面的3D位置。这是与画布的当前矩阵无关。
*@param lightRadius-圆盘灯光的半径。
*@param flags-请参阅SkShadowFlags.h；0表示使用默认选项。
*@param dstRect-如果提供，则边界将复制到此rect中，而不是分配一个新的。
*@return边界矩形，如果无法计算，则为null。
*/
getShadowLocalBounds(ctm: InputMatrix, path: Path, zPlaneParams: InputVector3,
                   lightPos: InputVector3, lightRadius: number, flags: number,
                   dstRect?: Rect): Rect | null;

简介

getShadowLocalBounds 是一个canvasKit中的一个方法，它接受多个输入参数，用于计算一个物体在表面上投下的阴影边界。以下是每个参数的说明：

  • ctm：一个2D变换矩阵（通常称为当前变换矩阵），用于将path（路径）从其本地坐标系转换为目标坐标系。
  • path：要计算阴影的路径对象，通常是一个几何形状。
  • zPlaneParams：一个3D向量，描述了表示表面的平面的方程式的参数。
  • lightPos：一个描述光源位置的3D向量。
  • lightRadius：光源的半径，用于计算软阴影（soft shadows）。
  • flags：一些控制计算方式的标志位（flags）。
  • dstRect：一个可选参数，指定结果矩形的输出位置。

这个方法的返回值是一个矩形（Rect）对象，它描述了阴影边界的位置和大小，或者如果计算失败，则返回null。

avatar
文章
阅读
粉丝