Skip to content

ImagePaint

图案填充对象, 可以用于填充与描边,支持使用 svg 格式的图片。

平铺模式下超过 4096 x 2160 的 4k 图片会被优化显示。

关键属性

type: string

填充类型为 image

url: string

图片 url 地址。

mode?: ImagePaintMode

图案填充模式, 默认为 cover。

ts
type ImagePaintMode =
  | 'cover' // 覆盖,不改变图片比例 (相当于background-size: cover)
  | 'fit' // 适应,不改变图片比例 (相当于background-size: contain)
  | 'strench' // 拉伸,会改变图片比例
  | 'clip' // 裁剪
  | 'repeat' // 平铺 (相当于background-repeat: repeat)

format?: 'svg' | 'jpg' | 'png' | 'webp'

补充图片格式,目前主要用于通过 url 无法识别的 svg 图片。

基础属性

blendMode?: BlendMode

混合模式,默认为 normal。

visible?: boolean

是否可见,默认为 true。

opacity?: number

不透明度,默认为 1,暂时仅针对颜色对象和图片有效。

cover 覆盖模式属性

rotation?: number

旋转角度, 以 90 度递增旋转。

fit 适应模式属性

rotation?: number

旋转角度, 以 90 度递增旋转。

repeat?: boolean

是否重复背景。

clip 裁剪模式属性

offset?: IPointData

偏移位置。

size?: numberISizeData

图片尺寸(拉伸), 自动换算出 scale。

scale?: numberIPointData

缩放大小, 优先使用 size 换算出的 scale。

rotation?: number

旋转角度。

repeat 平铺模式属性

size?: numberISizeData

图片尺寸(拉伸), 自动换算出 scale。

scale?: number

平铺图片的缩放比例,优先使用 size 换算出的 scale。

rotation?: number

旋转角度, 以 90 度递增旋转。

repeat?: IRepeat

重复背景的方式,可设置重复 x 或 y 轴, 默认同时重复两个轴。

ts
type IRepeat = boolean | 'x' | 'y'

图片缓存

图片缓存的全局配置,可根据需要动态调整。

ts
import { Platform } from 'leafer-ui'

// 最大缓存等级,默认2k: 2560 * 1600 像素
Platform.image.maxCacheSize = 2560 * 1600

// 最大重复pattern缓存等级, 默认4k: 4096 * 2160 像素
Platform.image.maxPatternSize = 4096 * 2160

// 图片后缀,区分dom中image标签的缓存,否则可能会有浏览器缓存跨域问题,默认: leaf
Platform.image.suffix = 'leaf'  // image.jpg?leaf

图片跨域

图片跨域的全局配置,可根据需要动态调整。

设为 null 时可以渲染未经服务端允许的跨域图片, 但不支持导出画板内容(浏览器的限制)。

ts
import { Platform } from 'leafer-ui'

// 默认配置,未经服务端允许的跨域图片不能渲染。
Platform.image.crossOrigin = 'anonymous'

图片事件

ImageEvent

归属

UI

示例

cover 覆盖模式

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    fill: {  
        type: 'image',
        url: '/image/leafer.jpg'
    }
})

leafer.add(rect)

cover 覆盖模式旋转 90 度

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    fill: {  
        type: 'image',
        url: '/image/leafer.jpg',
        rotation: 90
    }
})

leafer.add(rect)

fit 适应模式

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    fill: {  
        type: 'image',
        url: '/image/leafer.jpg',
        mode: 'fit'
    }
})

leafer.add(rect)

strench 拉伸模式

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 120,
    fill: {  
        type: 'image',
        url: '/image/leafer.jpg',
        mode: 'strench'
    }
})

leafer.add(rect)

clip 裁剪模式

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    fill: {  
        type: 'image',
        url: '/image/leafer.jpg',
        mode: 'clip',
        offset: { x: -40, y: -90 },
        scale: { x: 1.1, y: 1.1 },
        rotation: 20
    }
})

leafer.add(rect)

repeat 平铺模式

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    fill: {  
        type: 'image',
        url: '/image/leafer.jpg',
        mode: 'repeat',
        scale: 0.2
    }
})

leafer.add(rect)

repeat 平铺模式旋转 90 度

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    fill: {  
        type: 'image',
        url: '/image/leafer.jpg',
        mode: 'repeat',
        scale: 0.2,
        rotation: 90
    }
})

leafer.add(rect)

Released under the MIT License.