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

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

Getting started

Use g-canvas and register this plugin.

The dirty-rectangle rendering won't work in this scenario, any change on display objects will cause fullscreen re-rendering.

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,
});

Features

Basic shapes

• [x] Group
• [x] Circle
• [x] Ellipse
• [x] Rect, radius won't work
• [x] Line
• [x] Polyline
• [x] Polygon
• [x] Path
• [x] Text
• [x] 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 g-plugin-canvas-renderer.

Picking

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