hittable

元素是否响应鼠标、触摸或其他指针设备的交互事件，类似 CSS 的 pointer-events 属性。

可在 引擎配置 中设置默认光标的碰撞半径，或单独设置元素的 hitRadius。

关键属性

hittable: boolean

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

可进一步细化响应细节 hitChildren、hitSelf、hitFill、hitStroke，注意 hitFill 支持像素检测。

辅助属性

hitBox: boolean

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

一般用于带 padding 的 Text 元素，Group 不支持此属性。

hitRadius: number

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

hitThrough?: IHitThrough

定义元素可被穿透拾取的范围，即使被其他元素遮住也能拾取到，默认为 undefined，表示不可穿透。

type IHitThrough =
  | 'parent' // 在同一个父级内可穿透
  | 'leafer' // 在同一个leafer层内可穿透
  | 'app' // 整个app内可穿透

关键方法

hit ( worldPoint: IPointData, hitRadius: number = 0 ): boolean

快速检测 worldPoint 坐标点（世界坐标）是否碰撞到元素，支持设置点的碰撞半径 hitRadius 。

归属

UI 元素

示例

停用元素响应交互事件

Leafer

// #停用元素交互事件 (Leafer)
import { Leafer, Rect } from 'leafer-ui'

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

const rect = Rect.one({ fill: '#32cd79', draggable: true })

leafer.add(rect)

setTimeout(() => {

    // 停用元素交互事件，将无法拖拽元素
    rect.hittable = false

}, 1000)

App

// #停用元素交互事件 (App)
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

const rect = Rect.one({ fill: '#32cd79', draggable: true })

app.tree.add(rect)

setTimeout(() => {

    // 停用元素交互事件，将无法拖拽元素
    rect.hittable = false

}, 1000)