logo

G

  • 教程
  • API
  • 示例
  • 插件
  • 所有产品antv logo arrow
  • 6.1.26
  • 插件系统介绍
  • 插件结构
  • g-plugin-a11y
  • g-plugin-annotation
  • g-plugin-box2d
  • g-plugin-gpgpu
  • g-plugin-matterjs
  • g-plugin-yoga
  • g-plugin-css-select
  • g-plugin-3d
  • g-plugin-device-renderer
  • g-plugin-canvas-renderer
  • g-plugin-canvaskit-renderer
  • g-plugin-rough-canvas-renderer
  • g-plugin-rough-svg-renderer
  • g-plugin-canvas-path-generator
  • g-plugin-canvas-picker
  • g-plugin-svg-renderer
  • g-plugin-svg-picker
  • g-plugin-dom-interaction
  • g-plugin-dragndrop
  • g-plugin-control

g-plugin-rough-svg-renderer

上一篇
g-plugin-rough-canvas-renderer
下一篇
g-plugin-canvas-path-generator

资源

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号：京ICP备15032932号-38

Loading...

使用 rough.js 的 SVG 版本进行手绘风格的渲染，示例。

安装方式

首先需要使用 g-svg 渲染器，注册该插件，它会替换掉 g-plugin-svg-renderer 中对于 2D 图形的渲染效果：

import { Canvas } from '@antv/g';
import { Renderer } from '@antv/g-svg';
import { Plugin as PluginRoughSVGRenderer } from '@antv/g-plugin-rough-svg-renderer';


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


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

另外，我们支持所有 2D 图形，其中 Text、Image 和 HTML 无手绘风格。

样式属性

除了 2D 图形的样式属性，rough.js 提供的配置项也可以使用。可以完全参考 g-plugin-rough-canvas-renderer。

拾取行为

非 solid 的填充样式会留下很多空白，这些空白区域并不会触发交互事件。这一点和 g-plugin-canvas-renderer 不一致。