@antv/g-plugin-rough-svg-resderer (英语)

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

开始

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

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

特征

基本形状

• 组
• 圆形
• 椭圆
• 莱克特, 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#选项

文本图像( I)

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

选取

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