@antv/g-plugin-rough-canvas-resanderer (原始内容存档于2018-09-29)

使用 粗鲁.js(Canvas版本) 来渲染粗略的风格形状,灵感来自 粗略维兹。 。 。 .

开始

使用 g-canvas 并注册此插件.

脏-矩形渲染在此情景下不会成功,显示对象的任何变化都会引起全屏重现.

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

特征

基本形状

• 组
• 圆形
• 椭圆
• 莱克特, radius 没用的
• 线条
• 复线
• 多边形
• 路径
• 文本
• 图像

不透明度

粗糙. js不支持 opacity 现在,但我们可以增加它 globalAlpha。 。 。 .

我们可以用 opacity 但没有 fillOpacity 或者说 strokeOpacity 单独:

circle.style.opacity = 0.5;

阴影

阴影也可以工作 :

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

其他粗略.js选项

https://github.com/rough-struff/rough/wiki#选项

插件选项

初始化插件时,您可以通过以下选项:

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

文本图像( I)

文本图像在 canvas-renderer。 。 。 .

选取

也许没有必要精确地选择目标.