canvg 项目技术文档

canvg 项目技术文档

【免费下载链接】canvg JavaScript SVG parser and renderer on Canvas 项目地址: https://gitcode.com/gh_mirrors/ca/canvg

1. 安装指南

1.1 使用包管理器安装

您可以使用以下任一包管理器来安装 canvg：

• pnpm:

  pnpm add canvg
  

• yarn:

  yarn add canvg
  

• npm:

  npm install --save canvg
  

1.2 手动安装

如果您不想使用包管理器，也可以直接从 GitHub 下载源码，并将其引入到您的项目中。

2. 项目使用说明

2.1 基本使用

安装完成后，您可以通过以下方式在项目中使用 canvg：

import { Canvg } from 'canvg';

let v = null;

window.onload = async () => {
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');

  v = await Canvg.from(ctx, './svgs/1.svg');

  // 启动 SVG 渲染，包括动画和鼠标事件处理
  v.start();
};

window.onbeforeunload = () => {
  v.stop();
};

2.2 停止渲染

在页面卸载时，您可以通过调用 v.stop() 来停止 SVG 的渲染：

window.onbeforeunload = () => {
  v.stop();
};

3. 项目 API 使用文档

3.1 Canvg.from(ctx, svg)

• 参数:

  • ctx: CanvasRenderingContext2D - Canvas 上下文对象。
  • svg: string | URL - SVG 文件的 URL 或 SVG 文本内容。

• 返回值: Promise - 返回一个 Canvg 实例。

3.2 Canvg.start()

启动 SVG 的渲染，包括动画和鼠标事件处理。

3.3 Canvg.stop()

停止 SVG 的渲染。

3.4 更多 API

更多 API 文档请参考 canvg API 文档。

4. 项目安装方式

4.1 通过包管理器安装

如前所述，您可以使用 pnpm、yarn 或 npm 来安装 canvg：

pnpm add canvg
# 或
yarn add canvg
# 或
npm install --save canvg

4.2 手动下载

您也可以直接从 GitHub 下载源码，并将其引入到您的项目中。

---

通过以上文档，您应该能够顺利安装和使用 canvg 项目。如果您有任何问题或需要进一步的帮助，请参考项目的 GitHub 仓库 或 官方文档。

【免费下载链接】canvg JavaScript SVG parser and renderer on Canvas 项目地址: https://gitcode.com/gh_mirrors/ca/canvg