Skip to content
导航

ImagePaint

图片填充对象, 可以用于填充与描边。

关键属性

type: string

填充类型为 image

url: string

图片 url 地址。

mode?: ImagePaintMode

图片填充模式, 默认为 cover。

ts
type ImagePaintMode =
  | 'cover' // 覆盖,不改变图片比例 (相当于background-size: cover)
  | 'fit' // 适应,不改变图片比例 (相当于background-size: contain)
  | 'strench' // 拉伸,会改变图片比例
  | 'clip' // 裁剪
  | 'repeat' // 平铺 (相当于background-repeat: repeat)

基础属性

blendMode?: BlendMode

混合模式,默认为 normal。

visible?: boolean

是否可见,默认为 true。

opacity?: number

不透明度,默认为 1,暂时仅针对颜色对象和图片有效。

cover 覆盖模式属性

rotation?: number

旋转角度, 以 90 度递增旋转。

fit 适应模式属性

rotation?: number

旋转角度, 以 90 度递增旋转。

clip 裁剪模式属性

offset?: IPointData

偏移位置。

scale?: numberIPointData

缩放大小。

rotation?: number

旋转角度。

repeat 平铺模式属性

scale?: number

平铺图片的缩放比例。

rotation?: number

旋转角度, 以 90 度递增旋转。

图片事件

ImageEvent

示例

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)

Released under the MIT License.