Image
图片对象，支持使用 svg 格式的图片，另外所有图形都支持通过 图案填充 来显示图片。
关键属性
width?: number
宽度，默认使用图片原始宽度。
height?: number
高度， 默认使用图片原始高度。
url: string
图片地址。
辅助属性
图案填充 的元素也支持这些辅助属性。
pixelRatio: number
图片的像素比， 默认为 1，（适配高清屏为 2，超高清屏为 3）。
自动宽高的图片，此属性才有效。
lazy: boolean
图片是否懒加载，可以加快页面显示速度， 默认为 false。
只读属性
ready: boolean
图片是否已经加载完成。
image?: ILeaferImage
原始图片封装对象, 图片加载完成才存在。
图片缓存
图片缓存的全局配置，可根据需要动态调整。
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'使用 Rect 代替 Image
想为图片设置 fill 时，请用 Rect 代替，Rect 不设置宽高也会自适应图片，并支持多个填充。
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
fill: {
type: 'image',
url: '/image/leafer.jpg',
mode: 'strench'
},
draggable: true
})
leafer.add(rect)图片事件
ImageEvent
继承
Rect
API
Image
示例
使用默认宽高
ts
import { Leafer, Image } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const image = new Image({
url: '/image/leafer.jpg',
draggable: true
})
leafer.add(image)监听图片加载
ts
import { Leafer, Image, ImageEvent } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const image = new Image({
url: '/image/leafer.jpg',
draggable: true
})
监听错误
ts
import { Leafer, Image, ImageEvent } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const image = new Image({
url: '/image/leafer.jpg',
draggable: true
})
image.once(ImageEvent.ERROR, function (e: ImageEvent) {
console.log(e.error)
})
leafer.add(image)