@antv/g-plugin-rough-svg-renderer

Use rough.js(SVG version) to render sketchy styled shapes, inspired by roughViz.

Getting started

Use g-svg and register this plugin.

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-canvas`
const canvas = new Canvas({
    container: 'container',
    width: 600,
    height: 500,
    renderer,
});

Features

Basic shapes

• <input checked="" disabled="" type="checkbox"> Group
• <input checked="" disabled="" type="checkbox"> Circle
• <input checked="" disabled="" type="checkbox"> Ellipse
• <input checked="" disabled="" type="checkbox"> Rect, radius won't work
• <input checked="" disabled="" type="checkbox"> Line
• <input checked="" disabled="" type="checkbox"> Polyline
• <input checked="" disabled="" type="checkbox"> Polygon
• <input checked="" disabled="" type="checkbox"> Path
• <input checked="" disabled="" type="checkbox"> Text
• <input checked="" disabled="" type="checkbox"> Image

Opacity

rough.js don't support opacity now, but we can augment it with globalAlpha.

We can use opacity but not fillOpacity or strokeOpacity separately:

circle.style.opacity = 0.5;

Shadow

Shadow can also work:

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

Other rough.js options

https://github.com/rough-stuff/rough/wiki#options

Text & Image

Text & Image should be the same in canvas-renderer.

Picking

Maybe it's not necessary to pick target in a precise way.