Support using text and image as watermark, the principle is to add the background-image
property to the div of the Graph container, and then you can control the position and style of the watermark through css. For text, it will be converted to an image using a hidden canvas
createGraph({data: { nodes: [{ id: 'node-1' }] },node: { style: { fill: '#7e3feb' } },edge: { style: { stroke: '#8b9baf' } },layout: { type: 'force' },behaviors: ['drag-canvas'],plugins: [{ type: 'watermark', key: 'watermark', text: 'G6: Graph Visualization' }],},{ width: 600, height: 300 },(gui, graph) => {const options = {type: 'watermark',width: 200,height: 100,opacity: 0.2,rotate: Math.PI / 12,text: 'G6: Graph Visualization',};const optionFolder = gui.addFolder('Watermark Options');optionFolder.add(options, 'type').disable(true);optionFolder.add(options, 'width', 1, 1280, 1);optionFolder.add(options, 'height', 1, 800, 1);optionFolder.add(options, 'opacity', 0, 1, 0.1);optionFolder.add(options, 'rotate', 0, 2 * Math.PI, Math.PI / 12);optionFolder.add(options, 'text');optionFolder.onChange(({ property, value }) => {graph.updatePlugin({key: 'watermark',[property]: value,});graph.render();});},);
string
Plugin type
string
The background attachment of watermark
string
The background blend of watermark
string
The background clip of watermark
string
The background color of watermark
string
The background image of watermark
string
The background origin of watermark
string
The background position of watermark
string
The background position-x of watermark
string
The background position-y of watermark
string Default:
'repeat'
The background repeat of watermark
string
The background size of watermark
number Default:
100
The height of watermark(single)
string
The image url, if it has a value, it will be used, otherwise it will use the text
number Default:
0.2
The opacity of watermark
number Default:
Math.PI / 12
The rotate angle of watermark
string
The text of watermark
'center' | 'end' | 'left' | 'right' | 'start' Default:
'center'
The text align of text watermark
'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top' Default:
'middle'
The text baseline of text watermark
string Default:
'#000'
The color of text watermark
string
The font of text watermark
number Default:
16
The font size of text watermark
string
The font variant of text watermark
string
The font weight of text watermark
number Default:
200
The width of watermark(single)