ImagePaint
图案填充对象, 可以用于填充与描边，支持使用 svg 格式的图片。
平铺模式下超过 4096 x 2160 的 4k 图片会被优化显示。
关键属性
type: string
填充类型为 image。
url: string
图片 url 地址。
mode?: ImagePaintMode
图案填充模式, 默认为 cover。
ts
type ImagePaintMode =
| 'normal' // 正常
| '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，暂时仅针对颜色对象和图片有效。
around: IDirection
围绕方位定位图片，类似 CSS 的 background-position 属性。
ts
type IDirection =
| 'center'
| 'topLeft'
| 'top'
| 'topRight'
| 'right'
| 'bottomRight'
| 'bottom'
| 'bottomLeft'
| 'left'cover 覆盖模式属性
rotation?: number
旋转角度, 以 90 度递增旋转。
fit 适应模式属性
rotation?: number
旋转角度, 以 90 度递增旋转。
padding?: IFourNumber
内边距，默认为 0。
repeat?: boolean
是否重复背景。
clip 裁剪模式属性
offset?: IPointData
偏移位置。
size?: number ｜ ISizeData
图片尺寸（拉伸）， 自动换算出 scale。
scale?: number ｜ IPointData
缩放大小， 优先使用 size 换算出的 scale。
rotation?: number
旋转角度。
repeat 平铺模式属性
offset?: IPointData
偏移位置。
size?: number ｜ ISizeData
图片尺寸（拉伸）， 自动换算出 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)