# @antv/g-plugin-rough-canvas-renderer 中文文档

规范地址：https://npmcn.com/package/%40antv/g-plugin-rough-canvas-renderer/

版本：2\.1\.3
npm 元数据更新时间：2026-10-16T02:39:20.184Z
中文译文更新时间：2026-11-06T07:17:42.103Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40antv/g-plugin-rough-canvas-renderer
原文对照：https://npmcn.com/package/%40antv/g-plugin-rough-canvas-renderer/?lang=original
项目主页：https://github.com/antvis/g#readme
源码仓库：https://github.com/antvis/g

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：809 kB，31 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- 首次发布：2022-05-07T07:33:57.300Z
- 最新版本发布：2026-10-16T02:39:19.987Z
- 近 30 天下载量：8623（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：214（近 12 个月 9 个）

## 中文简介

一个带有粗略.js的渲染器执行的 G 插件

## 安装

```sh
npm install @antv/g-plugin-rough-canvas-renderer
```

也可以使用：`pnpm add @antv/g-plugin-rough-canvas-renderer`、`yarn add @antv/g-plugin-rough-canvas-renderer`、`bun add @antv/g-plugin-rough-canvas-renderer`

## README

# @antv/g-plugin-rough-canvas-resanderer (原始内容存档于2018-09-29)

使用 [粗鲁.js](https://roughjs.com/)(Canvas版本) 来渲染粗略的风格形状,灵感来自 [粗略维兹](https://github.com/jwilber/roughViz)。 。 。 .

![](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*d4iiS5_3YVIAAAAAAAAAAAAAARQnAQ)

## 开始

使用 `g-canvas` 并注册此插件.

脏-矩形渲染在此情景下不会成功,显示对象的任何变化都会引起全屏重现.

```js
import { Canvas } from '@antv/g';
import { Renderer } from '@antv/g-canvas';
import { Plugin as PluginRoughCanvasRenderer } from '@antv/g-plugin-rough-canvas-renderer';

// create a renderer
const renderer = new Renderer();
renderer.registerPlugin(new PluginRoughCanvasRenderer());

// create a canvas & use `g-canvas`
const canvas = new Canvas({
    container: 'container',
    width: 600,
    height: 500,
    renderer,
});
```

## 特征

### 基本形状

-   [x] 组
-   [x] 圆形
-   [x] 椭圆
-   [x] 莱克特, `radius` 没用的
-   [x] 线条
-   [x] 复线
-   [x] 多边形
-   [x] 路径
-   [x] 文本
-   [x] 图像

### 不透明度

粗糙. js不支持 `opacity` 现在,但我们可以增加它 `globalAlpha`。 。 。 .

![](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*gl6ETYiyCCQAAAAAAAAAAAAAARQnAQ)

我们可以用 `opacity` 但没有 `fillOpacity` 或者说 `strokeOpacity` 单独:

```js
circle.style.opacity = 0.5;
```

### 阴影

![](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*JKLVSrYk7BYAAAAAAAAAAAAAARQnAQ)

阴影也可以工作 :

```js
circle.style.shadowColor = '#000';
circle.style.shadowBlur = 0;
circle.style.shadowOffsetX = 0;
circle.style.shadowOffsetY = 0;
```

### 其他粗略.js选项

[https://github.com/rough-struff/rough/wiki#选项](https://github.com/rough-stuff/rough/wiki#options)

### 插件选项

初始化插件时,您可以通过以下选项:

```ts
export interface RoughCanvasRendererPluginOptions {
    // is element rough render
    roughRendering?: boolean | ((value: DisplayObject) => boolean);
}
```

### 文本图像( I)

文本图像在 `canvas-renderer`。 。 。 .

### 选取

也许没有必要精确地选择目标.

## 常见问题

### @antv/g-plugin-rough-canvas-renderer 是什么？

一个带有粗略\.js的渲染器执行的 G 插件

### 如何安装 @antv/g-plugin-rough-canvas-renderer？

在项目目录运行 npm install @antv/g-plugin-rough-canvas-renderer，或使用 pnpm add / yarn add / bun add。

### @antv/g-plugin-rough-canvas-renderer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @antv/g-plugin-rough-canvas-renderer 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @antv/g-plugin-rough-canvas-renderer 可以商用吗？

@antv/g-plugin-rough-canvas-renderer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @antv/g-plugin-rough-canvas-renderer 的下载量有多少？

根据 npm 官方下载统计，@antv/g-plugin-rough-canvas-renderer 在 2026/10/06 – 2026/11/04 这 30 天内被下载 8,623 次，日均约 287 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @antv/g-plugin-rough-canvas-renderer 还在维护吗？

最新版本 2\.1\.3 发布于 2026/10/16（21 天前）；至今共发布 214 个版本，其中过去 12 个月发布了 9 个；首次发布于 2022/05/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。