@antv/g-plugin-rough-canvas-renderer
TypeScript icon, indicating that this package has built-in type declarations

2.0.8 • Public • Published

@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.

Readme

Keywords

Package Sidebar

Install

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

Weekly Downloads

90

Version

2.0.8

License

MIT

Unpacked Size

705 kB

Total Files

20

Last publish

Collaborators

  • banxuan
  • xuying1027
  • lvisei
  • yisi.wang
  • basketduck
  • biupiubiupiu
  • flash1
  • dreammy23
  • laixingui.lxg
  • zhangjunjie-loki
  • rainy25ghz
  • zeyuwang
  • yanxiong
  • susiwen8
  • freestyle21
  • soundquiet
  • elaine.q.10
  • sturuby
  • sakuya223
  • serializedowen
  • xdzhao
  • yangzhanmei
  • wjgogogo
  • leungwensen
  • dori
  • iaaron
  • yard
  • simaq
  • dxq613
  • intchous
  • susan_ann
  • jinke.li
  • lzxue
  • army8735
  • atool
  • baizn
  • dengfuping
  • neoddish
  • jeffy2012
  • zqlu
  • afc163
  • pomelo-nwu
  • kopiluwaky
  • ccnuzindex
  • panyuqi
  • bubkoo
  • zengyue
  • kasmine
  • boyu.zlj
  • l1ud0ngq1
  • newbyvector
  • winniexing
  • chenluli
  • kn9117
  • xdddst
  • semious2020
  • esora
  • nadia_liu
  • bbsqq
  • mxz96102
  • openwayne
  • pearmini
  • pddpd
  • yiqianyao
  • zhanba
  • cxxxxxn