一,前景
1,点击区域不是一个矩形,如下图所示
二,新建一个节点(Node)
1,添加Sprite组件
2,继续添加Button组件
3, 添加PolygonCollider2D组件
三,核心代码
import {
_decorator,
Component,
Node,
isValid,
PolygonCollider2D,
Intersection2D,
UITransform,
Vec3,
v2,
EventTouch,
math,
v3,
Sprite, SpriteFrame, ImageAsset
} from 'cc';
服务器托管网import IBundleResItemType from "../manager/bundle/IBundl服务器托管网eResItemType";
import AppUtil from "../utils/AppUtil";
import { ResConfig } from "../manager/bundle/ResConfig";
import BundleResManager from "../manager/bundle/BundleResManager";
const { ccclass, property } = _decorator;
@ccclass('ButtonUI')
export class ButtonUI extends Component {
@property({ type: Node, tooltip: "按钮" })
private btnImg: Node = null;
protected start(): void {
const item: IBundleResItemType = AppUtil.getPreload(ResConfig, "red") as IBundleResItemType;
let imageAsset: ImageAsset = BundleResManager.instance.getAsset(AppUtil.getLoadingABName(ResConfig), item.urls as string);
this.btnImg.getComponent(Sprite).spriteFrame = SpriteFrame.createWithImage(imageAsset);
}
protected onEnable(): void {
this.listener(true);
}
protected onDisable(): void {
this.listener(false);
}
private listener(isAdd: boolean): void {
if (isAdd) {
this.btnImg.on(Node.EventType.TOUCH_END, this.onClickHandler, this);
} else {
this.btnImg.off(Node.EventType.TOUCH_END, this.onClickHandler, this);
}
}
private onClickHandler(event: EventTouch): void {
if (!isValid(this.node)) return;
if (this.isCheckAreaSuccess(this.btnImg, event)) {
console.log("点击成功");
} else {
console.log("点击失败");
}
}
private isCheckAreaSuccess(btnNode: Node, event: EventTouch): boolean {
if (!isValid(btnNode) || !event) {
return false;
}
let collider: PolygonCollider2D = btnNode.getComponent(PolygonCollider2D);
let mathV2: math.Vec2 = event.getUILocation();
let local: Vec3 = btnNode.getComponent(UITransform).convertToNodeSpaceAR(v3(mathV2.x, mathV2.y));
return Intersection2D.pointInPolygon(v2(local.x, local.y), collider.points);
}
}
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
相关推荐: 阿里云APP备案操作详细流程_工信部App备案工作
阿里云APP备案流程分为6步,APP备案成功后应用可以上架,登录阿里云账号填写APP信息,等待阿里云初审,初审通过后进行工信部短信核验,管局审核通过后APP即可备案成功,最后移动APP应用可以分发平台上架,阿里云百科分享阿里云APP备案详细流程: 阿里云APP…