Skip to content

hittable

元素与光标碰撞的交互属性,可在 应用配置 中设置默认光标的碰撞半径。

关键属性

hittable: boolean

是否响应交互事件,默认为 true。

若设为 false, 自身和子元素将不再响应交互事件。

hitChildren: boolean

子元素是否响应交互事件,默认为 true。

hitSelf: boolean

自身是否接收交互事件,子元素不受影响,默认为 true。

辅助属性

hitFill: IHitType

fill 的交互类型,默认为 path。

ts
type IHitType =
  | 'path' // 碰撞可见的fill 路径形状
  | 'pixel' // 碰撞可见的fill 像素点(计划开发)
  | 'all' // 总是碰撞fill, 即使不可见
  | 'none' // 不碰撞fill

hitStroke: IHitType

stroke 的交互类型,默认为 path。

ts
type IHitType =
  | 'path' // 碰撞可见的 stroke 路径形状
  | 'pixel' // 碰撞可见的 stroke 像素点(计划开发)
  | 'all' // 总是碰撞 stroke, 即使不可见
  | 'none' // 不碰撞 stroke

hitBox: boolean

元素的 boxBounds 区域是否总是响应交互事件(包含透明像素),默认为 false。

Group 不支持此属性。

hitRadius: number

设置光标的碰撞半径,当光标距离元素在 hitRadius 范围内时,应用可以优先拾取到元素。

归属

UI

示例

只有 stroke 能响应交互

拖动矩形试一试。

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    fill: '#FEB02730',
    stroke: {
        type: "radial",
        stops: [{ offset: 0, color: '#FF4A2C' }, { offset: 1, color: '#FEB027' }]
    },
    strokeWidth: 10,
    draggable: true,
    hitFill: 'none' 
})

leafer.add(rect)

不可见的 fill 也能响应交互

拖动矩形试一试。

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    stroke: {
        type: 'linear',
        stops: [{ offset: 0, color: '#FF4B4B' }, { offset: 1, color: '#FEB027' }]
    },
    strokeWidth: 10,
    draggable: true,
    hitFill: 'all' 
})

leafer.add(rect)

Released under the MIT License.