clip

裁剪掉超出宽高的内容。

Box 和 Frame 支持通过 overflow 实现裁剪内容的效果。

Text 支持通过 textOverflow 实现裁剪内容的效果。

另外通过 图案填充 的 clip 模式可以快速实现裁剪图片效果。

关键属性

overflow: IOverflow

通过将 overflow 设为 hide 可以实现裁剪 Box 的效果。

type IOverflow = 'show' | 'hide'

textOverflow: IOverflow ｜ string

通过将 overflow 设为 hide 可以隐藏超出固定宽高的 Text, 或自定义省略内容。

type IOverflow = 'show' | 'hide'

// 自定义省略内容

text.textOverflow = '...'

归属

UI

示例

裁剪掉超出宽高的内容

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)

快速裁剪图片

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)