[学习笔记]关于buttonMode

本文介绍了在不同组件中设置手型图标的技巧。对于一般组件,仅需设置buttonMode为true即可;若无效,可尝试增加useHandCursor为true。针对文本组件如Label等,则需额外设置mouseChildren为false来实现。

在一般的组件中,要设置手型图标,设置buttonMode="true"就可以了,

如果不行,可再加上useHandCursor="true",

而对于文本组件,如Label,Text,TextArea等,需再加上mouseChildren="false"。

同上请改在我的原文// uiDemo.js import uiBase from "./uiBase.js"; import { Container, Sprite, Assets, Point } from "pixi.js"; import { Button } from "@pixi/ui"; class uiDemo extends uiBase { constructor() { super(); } async init() { super.init(); // 创建一个背景遮罩 const mask = Sprite.from("https://pixijs.io/examples/examples/assets/bg_button.png"); mask.width = this.app.screen.width; mask.height = mask.height = this.app.screen.height; mask.alpha = 0.6; mask.interactive = true; // 创建弹出窗口容器 const popup = new Container(); popup.position.set(this.app.screen.width / 2, this.app.screen.height / 2); // 创建一个精灵(图案) const texture = await Assets.load("https://pixijs.io/examples/examples/assets/bunny.png"); const bunny = new Sprite(texture); bunny.anchor.set(0.5); bunny.interactive = true; bunny.buttonMode = true; // 添加拖拽功能 let dragging = false; let offset = new Point(); bunny.on("pointerdown", (event) => { dragging = true; offset = event.data.global.clone(); }); bunny.on("pointerup", () => { dragging = false; }); bunny.on("pointerupoutside", () => { dragging = false; }); bunny.on("pointermove", (event) => { if (dragging) { const newPosition = event.data.global; bunny.position.x += newPosition.x - offset.x; bunny.position.y += newPosition.y - offset.y; offset = newPosition; } }); // ✅ 创建按钮 const closeBtn = new Button("https://pixijs.io/examples/examples/assets/btn-close.png"); closeBtn.view.position.set(100, -100); closeBtn.onPress.connect(() => { this.hide(); }); 添加到容器 popup.addChild(bunny, closeBtn); // 添加到UI this.container.addChild(mask, popup); this.app.stage.addChild(this.container); this.isInist = true; } show() { if (!this.isInist) { this.init(); } this.container.visible = true; } hide() { this.container.visible = false; } } // 导出单例 export const UIDemo = new uiDemo();
09-12
// 提现历史创建方法 createWithdrawHistory() { const withdrawHistoryWidth = this.phoneWidth * 0.23; const withdrawHistoryHeight = this.phoneHeight * 0.1; this.withdrawHistory = new Sprite(Texture.from("assets/UIWithdraw/UI1_05.png")); this.withdrawHistory.width = withdrawHistoryWidth; this.withdrawHistory.height = withdrawHistoryHeight; this.withdrawHistory.anchor.set(0.5, 0.5); this.withdrawHistory.visible = true; this.withdrawHistory.x = this.phoneWidth * -0.84; this.withdrawHistory.y = this.phoneHeight * 0.21; this.withdrawHistory.interactive = true; this.withdrawHistory.buttonMode = true; this.withdrawHistory.on('pointerdown', () => { console.log("点击了提现历史记录按钮"); this.getPayoutRecord(); console.log("点击历史记录:", this.payoutRecordList); }); // 创建三条杠图标 const threeStripes = new Sprite(Texture.from("assets/UIWithdraw/UI1_07.png")); threeStripes.width *= this.app.rat * 2.5; threeStripes.height *= this.app.rat * 2.5; threeStripes.anchor.set(0.5, 0.5); threeStripes.position.set(-50, 0); this.withdrawHistory.addChild(threeStripes); // 创建文字// 原来的 this.withdrawHistoryText = new Text("Note Note", { fontFamily: "Arial", fontSize: 50 * this.app.rat, fill: 0xd87910, align: "center", }); this.withdrawHistoryText.anchor.set(0.5, 0.5); this.withdrawHistoryText.position.set(15, 0); this.withdrawHistory.addChild(this.withdrawHistoryText); // 添加到容器 this.bindingContainer.addChild(this.withdrawHistory); return this.withdrawHistory; } 需求: withdrawHistory.on('pointerdown', 点击的时候我希望弹出来一个弹窗,然后有标题 有叉叉按钮; 弹窗路径:assets/UIWithdraw/商店底5.png;叉叉按钮路径:assets/UIWithdraw/UI1_03.png; 帮我改一下,只要我需要的功能先 谢谢
最新发布
12-04
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值