1、可拖动区域计算

根据UI的世界坐标了宽高信息计算出handle的坐标范围

this.posMin = new Vec2(this.node.worldPosition.x - this.uiSelf.contentSize.width * 0.5, this.node.worldPosition.y - this.uiSelf.contentSize.height * 0.5);
this.posMax = new Vec2(this.node.worldPosition.x + this.uiSelf.contentSize.width * 0.5, this.node.worldPosition.y + this.uiSelf.contentSize.height * 0.5);

2、归一化

let posLD = new Vec2(this.handle.node.position.x + this.uiSelf.contentSize.width * 0.5, this.handle.node.position.y + this.uiSelf.contentSize.height * 0.5);
return new Vec2(posLD.x / this.uiSelf.contentSize.width, posLD.y / this.uiSelf.contentSize.height);

3、Handle位置处理

this.handle.node.worldPosition = new Vec3(mousePosition.x, mousePosition.y, 0);
this.handle.node.worldPosition = this.handle.node.worldPosition.clampf(this.posMin.toVec3(), this.posMax.toVec3());

4、说明

4.1 到边界拖动位置不变时，不执行回调

if (Vec2.distance(this.progress, this.calculateProgress()) == 0) return;

4.2 事件处理

只添加了背景板的点击和拖动事件，所以对于Handle，要关闭其事件接接收

5、整体代码

import { _decorator, Component, Node, Sprite, UITransform, Vec2, Vec3 } from 'cc';
const { ccclass, property } = _decorator;@ccclass('SliderXY')
export class SliderXY extends Component {@property(Sprite)private handle: Sprite;private progress: Vec2 = Vec2.ZERO;private uiSelf: UITransform;private posMin: Vec2;private posMax: Vec2;private callbacks: Function[] = Array<Function>();public addCallback(callback: Function) {this.callbacks.push(callback);}public getProgress(): Vec2 {this.progress = this.calculateProgress();return this.progress;}protected onLoad(): void {this.uiSelf = this.getComponent(UITransform);}protected start(): void {this.posMin = new Vec2(this.node.worldPosition.x - this.uiSelf.contentSize.width * 0.5, this.node.worldPosition.y - this.uiSelf.contentSize.height * 0.5);this.posMax = new Vec2(this.node.worldPosition.x + this.uiSelf.contentSize.width * 0.5, this.node.worldPosition.y + this.uiSelf.contentSize.height * 0.5);this.node.on(Node.EventType.TOUCH_START, (event) => {this.setHandlePosition(event.getLocation());}, this);this.node.on(Node.EventType.TOUCH_MOVE, (event) => {this.setHandlePosition(event.getLocation());}, this);}private setHandlePosition(mousePosition: Vec3) {this.handle.node.worldPosition = new Vec3(mousePosition.x, mousePosition.y, 0);this.handle.node.worldPosition = this.handle.node.worldPosition.clampf(this.posMin.toVec3(), this.posMax.toVec3());if (Vec2.distance(this.progress, this.calculateProgress()) == 0) return;this.getProgress();for (let i = 0; i < this.callbacks.length; i++) {this.callbacks[i]?.(this.progress);}}private calculateProgress(): Vec2 {let posLD = new Vec2(this.handle.node.position.x + this.uiSelf.contentSize.width * 0.5, this.handle.node.position.y + this.uiSelf.contentSize.height * 0.5);return new Vec2(posLD.x / this.uiSelf.contentSize.width, posLD.y / this.uiSelf.contentSize.height);}
}