Skip to content
X6

Background

View MarkdownResource indexEdit this page

The background is used to specify the background color or background image of the canvas, supporting watermark background. The background layer is at the bottom of the DOM layer.

Demo

import './index.less'
import { createRoot } from 'react-dom/client'
import React from 'react'
import { Graph } from '@antv/x6'
import { Settings } from './settings.tsx'

export default class Example extends React.Component {
  private container: HTMLDivElement
  private graph: Graph

  componentDidMount() {
    this.graph = new Graph({
      container: this.container,
      background: { color: '#F2F7FA' },
    })

    const source = this.graph.addNode({
      x: 32,
      y: 32,
      width: 100,
      height: 40,
      label: 'Hello',
      attrs: {
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    })

    const target = this.graph.addNode({
      x: 160,
      y: 180,
      width: 100,
      height: 40,
      label: 'Grid',
      attrs: {
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    })

    this.graph.addEdge({
      source,
      target,
      attrs: {
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
        },
      },
    })

    this.graph.centerContent()
  }

  onBackgroundChanged = (options: Graph.BackgroundManager.Options) => {
    this.graph.drawBackground(options)
  }

  refContainer = (container: HTMLDivElement) => {
    this.container = container
  }

  render() {
    return (
      <div className="background-app">
        <div className="app-side">
          <Settings onChange={this.onBackgroundChanged} />
        </div>
        <div className="app-content" ref={this.refContainer} />
      </div>
    )
  }
}

const root = createRoot(document.getElementById('container')!)
root.render(<Example />)
window.addEventListener('pagehide', () => root.unmount(), { once: true })

Configuration

color

The background color, supporting all CSS background-color property values, such as:

  • red
  • #f5f5f5
  • rgba(255, 255, 128, 0.5)
  • hsla(50, 33%, 25%, 0.75)
  • radial-gradient(ellipse at center, red, green)

image

The URL address of the background image. The default value is undefined, indicating no background image.

position

The position of the background image, supporting all CSS background-position property values, with a default value of 'center'.

size

The size of the background image, supporting all CSS background-size property values, with a default value of 'auto auto'.

repeat

The repeat mode of the background image, supporting all CSS background-repeat property values, with a default value of 'no-repeat'.

Additionally, the following predefined values are supported:

  • watermark: Watermark effect.
  • flip-x: Flip the background image horizontally.
  • flip-y: Flip the background image vertically.
  • flip-xy: Flip the background image both horizontally and vertically.

opacity

The opacity of the background, with a value range of [0, 1], and a default value of 1.

quality

The quality of the background image, with a value range of [0, 1], and a default value of 1.

angle

The rotation angle of the watermark, only valid when repeat is 'watermark', with a default value of 20.

Methods

drawBackground(…)

drawBackground(options?: Options): this

Redraw the background.

Name Type Required Default Value Description
options.color string - Background color.
options.image string - Background image address.
options.position string - Background image position.
options.size string - Background image size.
options.repeat string - Background image repeat mode.
options.opacity string - Background image opacity.

updateBackground()

updateBackground(): this

Update the background.

clearBackground()

clearBackground(): this

Clear the background.

Custom Image Repeat Mode

In addition to the predefined values supported by repeat, you can also customize the image repeat mode.

function watermark(img, options) {
  const width = img.width
  const height = img.height
  const canvas = document.createElement('canvas')

  canvas.width = width * 3
  canvas.height = height * 3

  const ctx = canvas.getContext('2d')!
  const angle = options.angle != null ? -options.angle : -20
  const radians = Angle.toRad(angle)
  const stepX = canvas.width / 4
  const stepY = canvas.height / 4

  for (let i = 0; i < 4; i += 1) {
    for (let j = 0; j < 4; j += 1) {
      if ((i + j) % 2 > 0) {
        ctx.setTransform(1, 0, 0, 1, (2 * i - 1) * stepX, (2 * j - 1) * stepY)
        ctx.rotate(radians)
        ctx.drawImage(img, -width / 2, -height / 2, width, height)
      }
    }
  }

  return canvas
}

Graph.registerBackground('watermark', watermark)
© Copyright 2026 Ant Group Co., Ltd..备案号：京ICP备15032932号-38
Site search
Documentation and examplesType to start searching

Search documentation, APIs, and examples

↑↓Select↵OpenEscClose