Watermark
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();});},);
Options
Required type
string
Plugin type
backgroundAttachment
string
The background attachment of watermark
backgroundBlendMode
string
The background blend of watermark
backgroundClip
string
The background clip of watermark
backgroundColor
string
The background color of watermark
backgroundImage
string
The background image of watermark
backgroundOrigin
string
The background origin of watermark
backgroundPosition
string
The background position of watermark
backgroundPositionX
string
The background position-x of watermark
backgroundPositionY
string
The background position-y of watermark
backgroundRepeat
string Default:
'repeat'
The background repeat of watermark
backgroundSize
string
The background size of watermark
height
number Default:
100
The height of watermark(single)
imageURL
string
The image url, if it has a value, it will be used, otherwise it will use the text
opacity
number Default:
0.2
The opacity of watermark
rotate
number Default:
Math.PI / 12
The rotate angle of watermark
text
string
The text of watermark
textAlign
'center' | 'end' | 'left' | 'right' | 'start' Default:
'center'
The text align of text watermark
textBaseline
'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top' Default:
'middle'
The text baseline of text watermark
textFill
string Default:
'#000'
The color of text watermark
textFontFamily
string
The font of text watermark
textFontSize
number Default:
16
The font size of text watermark
textFontVariant
string
The font variant of text watermark
textFontWeight
string
The font weight of text watermark
width
number Default:
200
The width of watermark(single)