双击事件
通过配置 onDoubleClick 参数，你可以监听元素的双击事件并执行相应的回调函数。
使用示例
下面是一个展示如何使用 iCraft Player 组件处理元素双击事件的示例。
import React, { useState } from "react";
import { MouseEventParams, ICraftPlayer } from "@icraft/player-react";
export default () => {
const [doubleClicked, setDoubleClicked] = useState<string>();
const onDoubleClick = (e: MouseEventParams) => {
console.log(e);
const { instance: element, data } = e;
setDoubleClicked(data?.name || "");
};
return (
<div style={style}>
<ICraftPlayer
src='/templates/AWSCloud.iplayer'
onDoubleClick={onDoubleClick}
/>
<div style={textStyle}>已双击: {doubleClicked}</div>
</div>
);
};
const style = {
width: "100%",
height: "100%",
position: "relative" as const,
overflow: "hidden" as const,
};
const textStyle = {
position: "absolute" as const,
bottom: 10,
right: 10,
};
API
| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| onDoubleClick | 双击事件回调 | (params: MouseEventParams) => void | undefined | 否 |
MouseEventParams
interface MouseEventParams {
instance: Element3D | null; // 被点击的3D元素实例
event: MouseEvent; // 原生鼠标事件对象
data: OptionsType | null; // 元素相关的数据
}