clip
裁剪掉超出宽高的内容。
Box 和 Frame 支持通过 overflow 实现裁剪内容的效果。
Text 支持通过 textOverflow 实现裁剪内容的效果。
另外通过 图案填充 的 clip 模式可以快速实现裁剪图片效果。
关键属性
overflow: IOverflow
通过将 overflow 设为 hide 可以实现裁剪 Box 的效果。
ts
type IOverflow = 'show' | 'hide'textOverflow: IOverflow ｜ string
通过将 overflow 设为 hide 可以隐藏超出固定宽高的 Text, 或自定义省略内容。
ts
type IOverflow = 'show' | 'hide'
// 自定义省略内容
text.textOverflow = '...'归属
UI
示例
裁剪掉超出宽高的内容
ts
import { Leafer, Box, Ellipse } from 'leafer-ui'
const leafer = new Leafer({ view: window, fill: 'gray' })
const box = new Box({
width: 100,
height: 100,
fill: '#FF4B4B',
overflow: 'hide'
})
const rect = new Ellipse({
x: 60,
y: 60,
width: 50,
height: 50,
fill: '#FEB027',
draggable: true
})
leafer.add(box)
box.add(rect)快速裁剪图片
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)