g-plugin-rough-canvas-renderer
Previous
g-plugin-canvaskit-renderer
Next
g-plugin-rough-svg-renderer
Loading...
Hand-drawn style rendering using the Canvas version of rough.js, example.
First you need to use the g-canvas renderer, register the plugin and it will replace the rendering of 2D graphics in g-plugin-canvas-renderer.
import { Canvas } from '@antv/g';import { Renderer } from '@antv/g-canvas';import { Plugin as PluginRoughCanvasRenderer } from '@antv/g-plugin-rough-canvas-renderer';// create a rendererconst renderer = new Renderer();renderer.registerPlugin(new PluginRoughCanvasRenderer());// create a canvas & use `g-canvas`const canvas = new Canvas({container: 'container',width: 600,height: 500,renderer,});
Note that once the plugin is used, "Dirty Rectangle Rendering" is not available, which means that any change in the style properties of any graphic will result in a full redraw of the canvas.
In addition, we support all 2D graphics, among which Text, Image and HTML have no hand-drawn style.
In addition to the style properties of 2D graphics, the configuration items provided byrough.js can also be used.
rough.js doesn't support opacity, but we can achieve it with globalAlpha, same as g-plugin-canvas-renderer.
Note, however, that fillOpacity and strokeOpacity do not work because rough.js does not open the relevant configuration items.
circle.style.opacity = 0.5;
rough.js does not support shadow related effects, but we do provide them.
Configuration items can be found in shadow.
circle.style.shadowColor = '#000';circle.style.shadowBlur = 0;circle.style.shadowOffsetX = 0;circle.style.shadowOffsetY = 0;
rough.js provides many configuration items that affect the hand-drawn effect, all of which work properly. example
The default value is 1, indicating the degree of hand-drawn style. 0 means no hand-drawn effect, the larger the number the more obvious the stylization effect, but more than 10 will completely lose the original shape and it is meaningless.
circle.style.roughness = 2;
The degree of curvature of the line, the default value is 1. 0 represents a straight line. example
circle.style.bowing = 2;
Fill style, supporting the following enumerated values, example：
'hachure''solid''zigzag''cross-hatch''dots''dashed''zigzag-line'
circle.style.fillStyle = 'zigzag';
Numeric value representing the width of the hachure lines. Default value of the fillWeight is set to half the strokeWidth of that shape.
When using dots styles to fill the shape, this value represents the diameter of the dot.
circle.style.fillWeight = 2;
Numerical value (in degrees) that defines the angle of the hachure lines. Default value is -41 degrees.
circle.style.hachureAngle = 30;
Numerical value that defines the average gap, in pixels, between two hachure lines. Default value of the hachureGap is set to four times the strokeWidth of that shape.
When drawing ellipses, circles, and arcs, RoughJS approximates curveStepCount number of points to estimate the shape. Default value is 9.
When drawing ellipses, circles, and arcs, Let RoughJS know how close should the rendered dimensions be when compared to the specified one. Default value is 0.95 - which means the rendered dimensions will be at least 95% close to the specified dimensions. A value of 1 will ensure that the dimensions are almost 100% accurate.
If you want the stroke to be dashed (This does not affect the hachure and other fills of the shape), set this property. The value is an array of numbers as described in setLineDash method of canvas
circle.style.lineDash = [10, 10];
When using dashed strokes, this property sets the line dash offset or phase. This is akin to the lineDashOffset of canvas
circle.style.lineDashOffset = 10;
This property is similar to the strokeLineDash property but it affects the fills, not the stroke. eg. when you want hachure lines to be dashed.
circle.style.fillLineDash = [10, 10];
This property is similar to the strokeLineDashOffset property but it affects the fills, not the stroke.
circle.style.fillLineDashOffset = 10;
If this property is set to true, roughjs does not apply multiple strokes to sketch the shape.
circle.style.disableMultiStroke = true;
If this property is set to true, roughjs does not apply multiple strokes to sketch the hachure lines to fill the shape.
circle.style.disableMultiStrokeFill = true;
Simplification can be set to simplify the shape by the specified factor. The value can be between 0 and 1.
When filling a shape using the dashed style, this property indicates the nominal length of dash (in pixels). If not set, it defaults to the hachureGap value.
When filling a shape using the dashed style, this property indicates the nominal gap between dashes (in pixels). If not set, it defaults to the hachureGap value.
When filling a shape using the zigzag-line style, this property indicates the nominal width of the zig-zag triangle in each line. If not set, it defaults to the hachureGap value.
In g-plugin-canvas-picker we use the spatial index for quick filtering and the mathematical calculation of the geometric definition of the figure for exact picking.
However, in the hand-drawn style, it seems impossible and unnecessary to do exact picking, so we still use this plugin.