Watermark

Tooltip

Custom Plugin

Overview

The watermark plugin supports using text and images as watermarks. The principle is to add a background-image attribute to the div of the Graph container, and then control the position and style of the watermark through CSS. For text watermarks, a hidden canvas is used to convert the text into an image.

Online Experience

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

Configuration Options

Property	Description	Type	Default Value	Required
type	Plugin type	string	`watermark`	✓
width	Width of a single watermark	number	200
height	Height of a single watermark	number	100
opacity	Opacity of the watermark	number	0.2
rotate	Rotation angle of the watermark	number	Math.PI / 12
imageURL	Image watermark URL, higher priority than text watermark	string	-
text	Watermark text content	string	-
textFill	Color of the text watermark	string	`#000`
textFontSize	Font size of the text watermark	number	16
textFontFamily	Font of the text watermark	string	-
textFontWeight	Font weight of the text watermark	string	-
textFontVariant	Font variant of the text watermark	string	-
textAlign	Text alignment of the watermark	`center` \| `end` \| `left` \| `right` \| `start`	`center`
textBaseline	Baseline alignment of the text watermark	`alphabetic` \| `bottom` \| `hanging` \| `ideographic` \| `middle` \| `top`	`middle`
backgroundRepeat	Repeat mode of the watermark	string	`repeat`
backgroundAttachment	Background attachment behavior of the watermark	string	-
backgroundBlendMode	Background blend mode of the watermark	string	-
backgroundClip	Background clip of the watermark	string	-
backgroundColor	Background color of the watermark	string	-
backgroundImage	Background image of the watermark	string	-
backgroundOrigin	Background origin of the watermark	string	-
backgroundPosition	Background position of the watermark	string	-
backgroundPositionX	Horizontal position of the watermark background	string	-
backgroundPositionY	Vertical position of the watermark background	string	-
backgroundSize	Background size of the watermark	string	-

const graph = new Graph({

plugins: [

{

type: 'watermark',

text: 'G6 Graph',

textFontSize: 20, // Set font size

textFontFamily: 'Arial', // Set font

textFontWeight: 'bold', // Set font weight

textFill: '#1890ff', // Set text color

rotate: Math.PI / 6, // Set rotation angle

opacity: 0.15, // Set opacity

width: 180, // Set watermark width

height: 100, // Set watermark height

backgroundRepeat: 'space', // Set repeat mode

backgroundPosition: 'center', // Set position

textAlign: 'center', // Set text alignment

textBaseline: 'middle', // Set baseline alignment

});

Overview

Online Experience

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

Configuration Options

Property	Description	Type	Default Value	Required
type	Plugin type	string	`watermark`	✓
width	Width of a single watermark	number	200
height	Height of a single watermark	number	100
opacity	Opacity of the watermark	number	0.2
rotate	Rotation angle of the watermark	number	Math.PI / 12
imageURL	Image watermark URL, higher priority than text watermark	string	-
text	Watermark text content	string	-
textFill	Color of the text watermark	string	`#000`
textFontSize	Font size of the text watermark	number	16
textFontFamily	Font of the text watermark	string	-
textFontWeight	Font weight of the text watermark	string	-
textFontVariant	Font variant of the text watermark	string	-
textAlign	Text alignment of the watermark	`center` \| `end` \| `left` \| `right` \| `start`	`center`
textBaseline	Baseline alignment of the text watermark	`alphabetic` \| `bottom` \| `hanging` \| `ideographic` \| `middle` \| `top`	`middle`
backgroundRepeat	Repeat mode of the watermark	string	`repeat`
backgroundAttachment	Background attachment behavior of the watermark	string	-
backgroundBlendMode	Background blend mode of the watermark	string	-
backgroundClip	Background clip of the watermark	string	-
backgroundColor	Background color of the watermark	string	-
backgroundImage	Background image of the watermark	string	-
backgroundOrigin	Background origin of the watermark	string	-
backgroundPosition	Background position of the watermark	string	-
backgroundPositionX	Horizontal position of the watermark background	string	-
backgroundPositionY	Vertical position of the watermark background	string	-
backgroundSize	Background size of the watermark	string	-

const graph = new Graph({

plugins: [

{

type: 'watermark',

text: 'G6 Graph',

textFontSize: 20, // Set font size

textFontFamily: 'Arial', // Set font

textFontWeight: 'bold', // Set font weight

textFill: '#1890ff', // Set text color

rotate: Math.PI / 6, // Set rotation angle

opacity: 0.15, // Set opacity

width: 180, // Set watermark width

height: 100, // Set watermark height

backgroundRepeat: 'space', // Set repeat mode

backgroundPosition: 'center', // Set position

textAlign: 'center', // Set text alignment

textBaseline: 'middle', // Set baseline alignment

});

G6

Watermark

G6

Watermark

Overview

Use Cases

Basic Usage

Online Experience

Configuration Options

Code Examples

Text Watermark

Image Watermark

Custom Styles

Real Cases

Overview

Use Cases

Basic Usage

Online Experience

Configuration Options

Code Examples

Text Watermark

Image Watermark

Custom Styles

Real Cases