cocos creator 3.8 按钮的悬浮
·
非得弄一个差不多的悬浮按钮,脑壳疼,两秒后悬浮

import { _decorator, Component, EventTouch, Node, Vec3, UITransform, tween, view, Vec2, Size } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('BtnPhoto')
export class BtnPhoto extends Component {
private offset: Vec3 = new Vec3();
private winSize: Size = new Size();
private btnSize: Size = new Size();
private lastPosition: Vec3 = new Vec3();
private isMoving: boolean = false;
private lastPos: Vec2 = new Vec2();
private startTouchPos: Vec2 = new Vec2();
onLoad() {
this.winSize = view.getVisibleSize();
this.btnSize = this.node.getComponent(UITransform).contentSize;
//按钮初始位置在屏幕右侧
this.node.setPosition(new Vec3(this.winSize.width / 2 - this.btnSize.width / 2, this.node.position.y, 0));
}
start() {
this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
}
onTouchStart(event: EventTouch) {
this.unscheduleAllCallbacks();
tween(this.node).stop();
var touchLoc = event.getUILocation();
var worldPos = this.node.getWorldPosition();
this.offset.x = worldPos.x - touchLoc.x;
this.offset.y = worldPos.y - touchLoc.y;
this.isMoving = false;
this.lastPos = event.touch.getUILocation();
if (this.node.getComponent(UITransform).getBoundingBoxToWorld().contains(this.lastPos)) {
this.isMoving = true;
}
this.startTouchPos = event.touch.getUILocation();
}
onTouchMove(event: EventTouch) {
var touchLoc = event.touch.getUILocation();
var targetX = touchLoc.x + this.offset.x;
var targetY = touchLoc.y + this.offset.y;
this.node.setWorldPosition(targetX, targetY, 0);
this.lastPos = new Vec2(targetX, targetY);
}
onTouchCancel(event: EventTouch) {
var touchLoc = event.touch.getUILocation();
if (Math.abs(touchLoc.x - this.startTouchPos.x) < 10 && Math.abs(touchLoc.y - this.startTouchPos.y) < 10) {
//TODO按钮点击事件
}
if (this.isMoving) {
this.isMoving = false;
this.scheduleOnce(() => {
this.snapToEdge();
}, 2);
}
}
onTouchEnd(event: EventTouch) {
var touchLoc = event.touch.getUILocation();
if (Math.abs(touchLoc.x - this.startTouchPos.x) < 10 && Math.abs(touchLoc.y - this.startTouchPos.y) < 10) {
//TODO按钮点击事件
}
if (this.isMoving) {
this.isMoving = false;
this.scheduleOnce(() => {
this.snapToEdge();
}, 2);
}
}
onDestroy() {
this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
this.node.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
}
private snapToEdge() {
var uiTransform = this.node.getComponent(UITransform);
if (!uiTransform) return;
var x = this.node.getPosition().x;
var y = this.node.getPosition().y;
var absX = Math.abs(this.winSize.width / 2 - Math.abs(x));
var absY = Math.abs(this.winSize.height / 2 - Math.abs(y));
var isIn = absX < absY ? true : false;
if (x > 0 && y > 0) {
if (isIn) {
x = this.winSize.width / 2 - this.btnSize.width / 2;
y = y;
} else {
x = x;
y = this.winSize.height / 2 - this.btnSize.height / 2;
}
} else if (x > 0 && y <= 0) {
if (isIn) {
x = this.winSize.width / 2 - this.btnSize.width / 2;
y = y;
} else {
x = x;
y = -this.winSize.height / 2 + this.btnSize.height / 2;
}
} else if (x <= 0 && y > 0) {
if (isIn) {
x = -this.winSize.width / 2 + this.btnSize.width / 2;
y = y;
} else {
x = x;
y = this.winSize.height / 2 - this.btnSize.height / 2;
}
} else {
if (isIn) {
x = -this.winSize.width / 2 + this.btnSize.width / 2;
y = y;
} else {
x = x;
y = -this.winSize.height / 2 + this.btnSize.height / 2;
}
}
this.lastPosition = new Vec3(x, y, 0);
tween(this.node)
.to(0.1, { position: this.lastPosition }, { easing: 'backOut' })
.call(() => { })
.start();
}
}
更多推荐
所有评论(0)