Image 元素
图片对象，支持使用 svg 格式的图片，另外所有图形都支持通过 图案填充 来显示图片。
关键属性
width?: number
宽度，默认使用图片原始宽度。
height?: number
高度， 默认使用图片原始高度。
url: string
图片地址。
辅助属性
图案填充 的元素也支持这些辅助属性。
pixelRatio: number
图片的像素比， 默认为 1，（适配高清屏为 2，超高清屏为 3）。
自动宽高的图片，此属性才有效。
lazy: boolean
图片是否懒加载，可以加快页面显示速度， 默认为 false。
placeholderColor: string
图片占位符的背景颜色，当图片加载中(延迟 100ms)或加载失败时均会显示。
只读属性
ready: boolean
图片是否已经加载完成。
image?: ILeaferImage
原始图片封装对象, 图片加载完成才存在。
辅助方法
load ()
手动加载图片。
一般用于元素未添加到 Leafer 中时，手动加载图片，获取图片自然宽高。
图片缓存
图片缓存的全局配置，可根据需要动态调整。
ts
图片跨域
图片跨域的全局配置，可根据需要动态调整。
设为 null 时可以渲染未经服务端允许的跨域图片， 但不支持导出画板内容（浏览器的限制）。
ts
使用 Rect 代替 Image
想为图片设置 fill 时，请用 Rect 代替，Rect 不设置宽高也会自适应图片，并支持多个填充。
ts
ts
// #使用 Rect 代替 Image (App) import { App, Rect } from 'leafer-ui' import '@leafer-in/editor' // 导入图形编辑器插件 import '@leafer-in/viewport' // 导入视口插件 (可选) const app = new App({ view: window, editor: {} }) const rect = new Rect({ fill: { type: 'image', url: '/image/leafer.jpg', mode: 'stretch' }, editable: true }) app.tree.add(rect)资源库
我们还提供了 资源库，可预加载图片，原始图片对象、画布对象可转为 url。
引擎中的所有图片都会通过 资源库 有序并行加载，当图片不再使用时，会进入回收列表，到达阈值会自动销毁。
图片事件
ImageEvent
示例
使用默认宽高
ts
固定宽度，自适应高度
ts
ts
// #创建Image [固定宽度，自适应高度 (App)] import { App, Image } from 'leafer-ui' import '@leafer-in/editor' // 导入图形编辑器插件 import '@leafer-in/viewport' // 导入视口插件 (可选) const app = new App({ view: window, editor: {} }) const image = new Image({ url: '/image/leafer.jpg', width: 50, editable: true }) app.tree.add(image)固定高度，自适应宽度
ts
ts
// #创建Image [固定高度，自适应宽度 (App)] import { App, Image } from 'leafer-ui' import '@leafer-in/editor' // 导入图形编辑器插件 import '@leafer-in/viewport' // 导入视口插件 (可选) const app = new App({ view: window, editor: {} }) const image = new Image({ url: '/image/leafer.jpg', height: 50, editable: true }) app.tree.add(image)图片占位符
ts
// #创建Image [图片占位符 (Leafer)] import { Leafer, Image } from 'leafer-ui' const leafer = new Leafer({ view: window }) const image = new Image({ url: '/image/leafer-error.jpg', width: 110, height: 80, draggable: true, placeholderColor: 'rgba(120,120,120,0.2)' // 设置图片占位符的背景颜色 // }) leafer.add(image) setTimeout(() => { image.url = '/image/leafer.jpg' // 变为正确的图片 }, 1000)ts
// #创建Image [图片占位符 (App)] import { App, Image } from 'leafer-ui' import '@leafer-in/editor' // 导入图形编辑器插件 import '@leafer-in/viewport' // 导入视口插件 (可选) const app = new App({ view: window, editor: {} }) const image = new Image({ url: '/image/leafer-error.jpg', width: 110, height: 80, draggable: true, placeholderColor: 'rgba(120,120,120,0.2)' // 设置图片占位符的背景颜色 // }) app.tree.add(image) setTimeout(() => { image.url = '/image/leafer.jpg' // 变为正确的图片 }, 1000)监听图片加载
ts
js
// #监听图片事件 [加载成功] import { Leafer, Image, ImageEvent } from 'leafer-ui' const leafer = new Leafer({ view: window }) const image = new Image({ url: '/image/leafer.jpg', draggable: true }) 监听错误
ts
js
// #监听图片事件 [加载失败] 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) { console.log(e.error) }) leafer.add(image)