@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

• Group
• Circle
• Ellipse
• Rect, radius won't work
• Line
• Polyline
• Polygon
• Path
• Text
• 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

Plugin Options

When initializing the plugin, you can pass the following options:

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

Text & Image

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

Picking

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