Use rough.js(SVG version) to render sketchy styled shapes, inspired by roughViz.
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,
});- [x] Group
- [x] Circle
- [x] Ellipse
- [x] Rect,
radiuswon't work - [x] Line
- [x] Polyline
- [x] Polygon
- [x] Path
- [x] Text
- [x] Image
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 can also work:
circle.style.shadowColor = '#000';
circle.style.shadowBlur = 0;
circle.style.shadowOffsetX = 0;
circle.style.shadowOffsetY = 0;https://github.com/rough-stuff/rough/wiki#options
Text & Image should be the same in g-plugin-canvas-renderer.
Maybe it's not necessary to pick target in a precise way.