Background

阅读时间约 2 分钟

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

配置

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

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

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

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

支持的选项如下:

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

方法

drawBackground(...)

drawBackground(options?: Options): this

重绘背景。

参数

名称类型必选默认值描述
options.colorstring-背景颜色。
options.imagestring-背景图片地址。
options.positionstring-背景图片位置。
options.sizestring-背景图片大小。
options.repeatstring-背景图片重复方式。
options.opacitystring-背景图片透明度。

updateBackground()

updateBackground(): this

更新背景。

clearBackground()

clearBackground(): this

清除背景。