Tutorial: 教程 2: 创建按钮

本教程将演示如何通过创建一个无功能按钮来使用 MouseArea 和 JS 元件。

项目设计

包括：

• 一个模拟按钮行为的 JS 元件。

JS 元件设置

在 [形状] 设置中，从 [系统按钮] 图片库中选择一张图片。

源代码

// 创建一个 MouseArea 组件
let ma = new MouseArea();

// 将 MouseArea 绑定到 JS 元件
this.widget.add(ma);

// 当 MouseArea 触发 'mousedown' 事件时，将 JS 元件的当前状态设置为 1
ma.on("mousedown", (mouseEvent) => {
  this.state = 1;
});

// 当 MouseArea 触发 'mouseup' 事件时，将 JS 元件的当前状态设置为 0
ma.on("mouseup", (mouseEvent) => {
  this.state = 0;
});

执行结果

• 运行模拟并观察：
  • 当鼠标按钮被按下时，JS 元件将显示状态 1 的图片。
  • 当鼠标按钮被释放时，JS 元件将显示状态 0 的图片。

说明

• MouseArea（对象）
  • 用于检测鼠标事件，例如 'click'、'mouseup'、'mousedown' 和 'mousemove'，并允许用户根据这些事件触发特定操作。
• this.widget（对象）
  • 指代 JS 元件上的 Widget，实际类型为 Container，可用于容纳其他组件。
  • 创建 MouseArea 组件（或 Canvas 组件）后，用户必须将其插入到 this.widget 中才能生效。
• this.state（数字）
  • 表示 JS 元件的当前状态。
  • JS 元件的外观（如标签、形状和图片）将根据对象的当前状态发生变化。

参考

• JS 动作/对象 SDK
  • MouseArea
  • Container
  • JsObject