背景 Background

阅读时间约 1 分钟

背景用于为画布指定背景颜色或背景图片,支持水印背景自定义背景图片的重复方式,背景层在 DOM 层级上位于画布的最底层。

创建画布时,通过 background 选项来设置画布的背景颜色或背景图片,默认值为 false 表示没有(透明)背景。

const graph = new Graph({
  background: false | BackgroundOptions
})

创建画布后,可以调用 graph.drawBackground(options?: BackgroundOptions) 方法来重绘背景。

graph.drawBackground({
  color: '#f5f5f5',
})

演示

  • 设置背景颜色。
  • 设置背景图片。
  • 设置背景重复方式,重点体验 'flip-x''flip-y''flip-xy''watermark'
  • 设置背景位置。
  • 设置背景大小。
  • 设置背景透明度。

选项

interface BackgroundOptions {
  color?: string
  image?: string
  position?: CSS.BackgroundPositionProperty<{
    x: number
    y: number
  }>
  size?: CSS.BackgroundSizeProperty<{
    width: number
    height: number
  }>
  repeat?: CSS.BackgroundRepeatProperty
  opacity?: number
  quality?: number
  angle?: number
}

color

背景颜色,支持所有 CSS background-color 属性的取值,如:

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

image

背景图片的 URL 地址。默认值为 undefined,表示没有背景图片。

position

背景图片位置,支持所有 CSS background-position 属性的取值,默认为 'center'

size

背景图片大小,支持所有 CSS background-size 属性的取值,默认为 'auto auto'

repeat

背景图片重复方式,支持所有 CSS background-repeat 属性的取值,默认为 'no-repeat'

另外,还支持以下几个预定义值:

opacity

背景透明度,取值范围 [0, 1],默认值为 1

quality

背景图片质量,取值范围 [0, 1],默认值为 1

angle

水印旋转角度,仅当 repeat'watermark' 时有效,默认值为 20

API

graph.drawBackground(...)

drawBackground(options?: Options): this

根据提供的选项重绘背景。

graph.drawBackground({
  color: '#f5f5f5',
})

graph.clearBackground()

clearBackground(): this

销毁背景。

graph.updateBackground()

updateBackground(): this

更新背景。