水印 Watermark
概述
水印插件支持使用文本和图片作为水印，实现原理是在 Graph 容器的 div 上加上 background-image 属性，然后通过 CSS 来控制水印的位置和样式。对于文本水印，会使用隐藏 canvas 将文本转换为图片的方式来实现。
使用场景
- 为图表添加版权或所有权标识
- 在演示或预览时标记图表的状态
- 为敏感数据添加防泄露标记
基本用法
以下是一个简单的 Watermark 插件初始化示例：
const graph = new Graph({
plugins: [
{
type: 'watermark',
text: 'G6 Graph', // 水印文本
opacity: 0.2, // 透明度
rotate: Math.PI / 12, // 旋转角度
},
],
});在线体验
import { createGraph } from '/demo-runtime.ts';
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();
});
},
);
import { Graph } from '@antv/g6';
import GUI from 'lil-gui';
export function addPanel(renderPanel: (gui: GUI) => void) {
const gui = new GUI({ container: document.body });
gui.title('Control');
Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
renderPanel(gui);
addEventListener('pagehide', () => gui.destroy(), { once: true });
}
export async function createGraph(
options: ConstructorParameters<typeof Graph>[0],
size: { width?: number; height?: number } = {},
renderPanel?: (gui: GUI, graph: Graph) => void,
) {
const container = document.createElement('div');
Object.assign(container.style, {
width: '100%',
maxWidth: `${size.width || 600}px`,
height: `${size.height || 400}px`,
});
document.getElementById('container')!.append(container);
const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
addEventListener('pagehide', () => graph.destroy(), { once: true });
await graph.render();
if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
return container;
}配置项
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| type | 插件类型 | string | watermark |
✓ |
| width | 单个水印的宽度 | number | 200 | |
| height | 单个水印的高度 | number | 100 | |
| opacity | 水印的透明度 | number | 0.2 | |
| rotate | 水印的旋转角度 | number | Math.PI / 12 | |
| imageURL | 图片水印的地址，优先级高于文本水印 | string | - | |
| text | 水印文本内容 | string | - | |
| textFill | 文本水印的颜色 | string | #000 |
|
| textFontSize | 文本水印的字体大小 | number | 16 | |
| textFontFamily | 文本水印的字体 | string | - | |
| textFontWeight | 文本水印的字体粗细 | string | - | |
| textFontVariant | 文本水印的字体变体 | string | - | |
| textAlign | 文本水印的对齐方式 | center | end | left | right | start |
center |
|
| textBaseline | 文本水印的基线对齐方式 | alphabetic | bottom | hanging | ideographic | middle | top |
middle |
|
| backgroundRepeat | 水印的重复方式 | string | repeat |
|
| backgroundAttachment | 水印的背景定位行为 | string | - | |
| backgroundBlendMode | 水印的背景混合模式 | string | - | |
| backgroundClip | 水印的背景裁剪 | string | - | |
| backgroundColor | 水印的背景颜色 | string | - | |
| backgroundImage | 水印的背景图片 | string | - | |
| backgroundOrigin | 水印的背景原点 | string | - | |
| backgroundPosition | 水印的背景位置 | string | - | |
| backgroundPositionX | 水印的背景水平位置 | string | - | |
| backgroundPositionY | 水印的背景垂直位置 | string | - | |
| backgroundSize | 水印的背景大小 | string | - |
代码示例
文本水印
最简单的文本水印配置：
const graph = new Graph({
plugins: [
{
type: 'watermark',
text: 'G6 Graph',
},
],
});
import { Graph } from '@antv/g6';
const data = {
nodes: [{ id: 'node-0' }, { id: 'node-1' }, { id: 'node-2' }, { id: 'node-3' }, { id: 'node-4' }, { id: 'node-5' }],
edges: [
{ source: 'node-0', target: 'node-1' },
{ source: 'node-0', target: 'node-2' },
{ source: 'node-0', target: 'node-3' },
{ source: 'node-0', target: 'node-4' },
{ source: 'node-1', target: 'node-0' },
{ source: 'node-2', target: 'node-0' },
{ source: 'node-3', target: 'node-0' },
{ source: 'node-4', target: 'node-0' },
{ source: 'node-5', target: 'node-0' },
],
};
const graph = new Graph({
container: 'container',
data,
layout: { type: 'grid' },
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
plugins: [
{
type: 'watermark',
text: 'G6: Graph Visualization',
textFontSize: 14,
textFontFamily: 'Microsoft YaHei',
fill: 'rgba(0, 0, 0, 0.1)',
rotate: Math.PI / 12,
},
],
});
graph.render();
import { Graph } from '@antv/g6';
import GUI from 'lil-gui';
export function addPanel(renderPanel: (gui: GUI) => void) {
const gui = new GUI({ container: document.body });
gui.title('Control');
Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
renderPanel(gui);
addEventListener('pagehide', () => gui.destroy(), { once: true });
}
export async function createGraph(
options: ConstructorParameters<typeof Graph>[0],
size: { width?: number; height?: number } = {},
renderPanel?: (gui: GUI, graph: Graph) => void,
) {
const container = document.createElement('div');
Object.assign(container.style, {
width: '100%',
maxWidth: `${size.width || 600}px`,
height: `${size.height || 400}px`,
});
document.getElementById('container')!.append(container);
const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
addEventListener('pagehide', () => graph.destroy(), { once: true });
await graph.render();
if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
return container;
}图片水印
使用图片作为水印：
const graph = new Graph({
plugins: [
{
type: 'watermark',
imageURL: 'https://example.com/logo.png',
width: 100,
height: 50,
opacity: 0.1,
},
],
});
import { Graph } from '@antv/g6';
const data = {
nodes: [{ id: 'node-0' }, { id: 'node-1' }, { id: 'node-2' }, { id: 'node-3' }, { id: 'node-4' }, { id: 'node-5' }],
edges: [
{ source: 'node-0', target: 'node-1' },
{ source: 'node-0', target: 'node-2' },
{ source: 'node-0', target: 'node-3' },
{ source: 'node-0', target: 'node-4' },
{ source: 'node-1', target: 'node-0' },
{ source: 'node-2', target: 'node-0' },
{ source: 'node-3', target: 'node-0' },
{ source: 'node-4', target: 'node-0' },
{ source: 'node-5', target: 'node-0' },
],
};
const graph = new Graph({
container: 'container',
data,
layout: {
type: 'grid',
},
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
plugins: [
{
type: 'watermark',
width: 200,
height: 100,
rotate: Math.PI / 12,
imageURL: 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
},
],
});
graph.render();
import { Graph } from '@antv/g6';
import GUI from 'lil-gui';
export function addPanel(renderPanel: (gui: GUI) => void) {
const gui = new GUI({ container: document.body });
gui.title('Control');
Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
renderPanel(gui);
addEventListener('pagehide', () => gui.destroy(), { once: true });
}
export async function createGraph(
options: ConstructorParameters<typeof Graph>[0],
size: { width?: number; height?: number } = {},
renderPanel?: (gui: GUI, graph: Graph) => void,
) {
const container = document.createElement('div');
Object.assign(container.style, {
width: '100%',
maxWidth: `${size.width || 600}px`,
height: `${size.height || 400}px`,
});
document.getElementById('container')!.append(container);
const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
addEventListener('pagehide', () => graph.destroy(), { once: true });
await graph.render();
if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
return container;
}自定义样式
可以自定义水印的样式和位置：
const graph = new Graph({
plugins: [
{
type: 'watermark',
text: 'G6 Graph',
textFontSize: 20, // 设置字体大小
textFontFamily: 'Arial', // 设置字体
textFontWeight: 'bold', // 设置字体粗细
textFill: '#1890ff', // 设置文字颜色
rotate: Math.PI / 6, // 设置旋转角度
opacity: 0.15, // 设置透明度
width: 180, // 设置水印宽度
height: 100, // 设置水印高度
backgroundRepeat: 'space', // 设置重复方式
backgroundPosition: 'center', // 设置位置
textAlign: 'center', // 设置文本对齐
textBaseline: 'middle', // 设置基线对齐
},
],
});