import { LogUtils } from "../Util/LogUtils"; import FMItemLayout from "./FMItemLayout"; 1./* * @Descripttion: 自定义带遮罩的容器，里面包含一个 content节点 * @version: 1.0.0 * @Author: YeeChan * @Date: 2020-07-17 16:52:59 */ const { ccclass, property, requireComponent, disallowMultiple, menu, } = cc._decorator; const EPSILON = 1e-4; //滑动的方向 export enum SlideDirection { HORIZONTAL = 1,//水平滚动 VERTICAL = 2//垂直滚动 } export enum FMTouchEvent { TouchStart = "touch_start", Scrolling = "scrolling", TouchEnded = "touch_ended" } @ccclass @disallowMultiple() //防止多个相同类型（或子类型）的组件被添加到同一个节点 //@menu("FM组件/FMTouchMaskView") export default class FMTouchMaskView extends cc.Component { //layout预制体 @property({ tooltip: "layout预制体(0,1)", type: cc.Prefab }) public itemPrefab: cc.Prefab = null; //滑动模式 @property() protected _slideDirection: SlideDirection = SlideDirection.HORIZONTAL; @property({ type: cc.Enum(SlideDirection), tooltip: "滚动方向:\n HORIZONTAL 水平滚动\nVERTICAL垂直滚动" }) set slideDirection(val: SlideDirection) { this._slideDirection = val; } get slideDirection() { return this._slideDirection; } //----------------------------------- private _tempPoint_custom = cc.v2(); private _tempPrevPoint_custom = cc.v2(); private _outOfBoundaryAmount_custom = cc.v2(0, 0); private _outOfBoundaryAmountDirty_custom = true; //是否初始化过 标签 private _inited_custom: boolean = false; //------------------------- //是否移动 protected _touchMoved_custom = false; //如果这个属性被设置为 true，那么滚动行为会取消子节点上注册的触摸事件，默认被设置为 true。* 注意，子节点上的 touchstart 事件仍然会触发，触点移动距离非常短的情况下 touchmove 和 touchend 也不会受影响。 protected cancelInnerEvents_custom = true; //预制的宽高 protected itemPrefabWidth_custom: number = 0; protected itemPrefabHeight_custom: number = 0; //滚动区域 protected content_custom: cc.Node; //预制体的脚本 private scriptItemPrefab_custom: FMItemLayout; protected onLoad() { this._init_custom(); } /** * 初始 */ protected _init_custom(): boolean { if (this._inited_custom) { //是否初始化过 return false; } let widget = this.node.getComponent(cc.Widget); if (widget) { widget.updateAlignment(); } //遮罩 let view: cc.Node = new cc.Node(); view.anchorX = 0; view.anchorY = 1; let viewWidget = view.addComponent(cc.Widget); viewWidget.top = 0; viewWidget.left = 0; viewWidget.right = 0; viewWidget.bottom = 0; viewWidget.isAlignTop = true; viewWidget.isAlignLeft = true; viewWidget.isAlignRight = true; viewWidget.isAlignBottom = true; this.node.addChild(view); viewWidget.updateAlignment(); let mash = view.addComponent(cc.Mask); mash.type = cc.Mask.Type.RECT; //显示面板 滚动节点 this.content_custom = new cc.Node(); view.addChild(this.content_custom); this.content_custom.width = view.width; this.content_custom.height = view.height; this.content_custom.anchorX = 0; this.content_custom.anchorY = 1; this.content_custom.x = 0; this.content_custom.y = 0; this.itemPrefabWidth_custom = this.itemPrefab.data.width; this.itemPrefabHeight_custom = this.itemPrefab.data.height; this.scriptItemPrefab_custom = this.itemPrefab.data.getComponent(FMItemLayout); if (!this.scriptItemPrefab_custom) { LogUtils.error_custom("FMTouchMaskView -> _init -> scriptItemPrefab is null"); } else { if (this.scriptItemPrefab_custom.getItemChildrenCount_custom() == 0) { LogUtils.error_custom("FMTouchMaskView -> _init -> scriptItemPrefab item child count ==0"); } } this._inited_custom = true; return true; } protected _dispatchEvent_custom(name: FMTouchEvent) { console.log("FMTouchMaskView -> _dispatchEvent -> name", name); } /** * 如果这个属性被设置为 true，那么滚动行为会取消子节点上注册的触摸事件，默认被设置为 true。* * 注意，子节点上的 touchstart 事件仍然会触发，触点移动距离非常短的情况下 touchmove 和 touchend 也不会受影响。 * @param inner */ public setCancelInnerEvents_custom(inner: boolean) { this.cancelInnerEvents_custom = inner; } /** * 按下 * @param touch */ protected handlePressLogic_custom(touch: cc.Touch) { this._dispatchEvent_custom(FMTouchEvent.TouchStart); } /** * 移动 * @param touch */ protected handleMoveLogic_custom(touch: cc.Touch) { let deltaMove = this.getLocalAxisAlignDelta_custom(touch); deltaMove = this.clampDelta_custom(deltaMove); let realMove = deltaMove; let outOfBoundary = this.getHowMuchOutOfBoundary_custom(realMove); realMove = realMove.add(outOfBoundary); if (realMove.x !== 0 || realMove.y !== 0) { this._moveContent_custom(realMove); this._dispatchEvent_custom(FMTouchEvent.Scrolling); } } /** * 释放 * @param touch */ protected handleReleaseLogic_custom(touch: cc.Touch) { let delta = this.getLocalAxisAlignDelta_custom(touch); this._dispatchEvent_custom(FMTouchEvent.TouchEnded); } private _flattenVectorByDirection_custom(vector) { let result = vector; result.x = this._slideDirection == SlideDirection.HORIZONTAL ? result.x : 0; result.y = this._slideDirection == SlideDirection.VERTICAL ? result.y : 0; return result; } private _moveContent_custom(deltaMove) { let adjustedMove = this._flattenVectorByDirection_custom(deltaMove); let newPosition = this.getContentPosition_custom().add(adjustedMove); this.setContentPosition_custom(newPosition); } // Contains node angle calculations private getLocalAxisAlignDelta_custom(touch): cc.Vec2 { this.node.convertToNodeSpaceAR(touch.getLocation(), this._tempPoint_custom); this.node.convertToNodeSpaceAR(touch.getPreviousLocation(), this._tempPrevPoint_custom); return this._tempPoint_custom.sub(this._tempPrevPoint_custom); } //this is for nested scrollview private _hasNestedViewGroup_custom(event: cc.Event.EventTouch, captureListeners) { if (event.eventPhase !== cc.Event.CAPTURING_PHASE) return; if (captureListeners) { //captureListeners are arranged from child to parent for (let i = 0; i < captureListeners.length; ++i) { let item = captureListeners[i]; if (this.node === item) { if (event.target.getComponent(cc.ViewGroup)) { return true; } return false; } if (item.getComponent(cc.ViewGroup)) { return true; } } } return false; } //This is for Scrollview as children of a Button private _stopPropagationIfTargetIsMe_custom(event) { if (event.eventPhase === cc.Event.AT_TARGET && event.target === this.node) { event.stopPropagation(); } } // touch event handler private _onTouchBegan_custom(event: cc.Event.EventTouch, captureListeners) { if (!this.enabledInHierarchy) return; if (this._hasNestedViewGroup_custom(event, captureListeners)) return; let touch = event.touch; if (this.content_custom) { this.handlePressLogic_custom(touch); } this._touchMoved_custom = false; this._stopPropagationIfTargetIsMe_custom(event); } private _onTouchMoved_custom(event: cc.Event.EventTouch, captureListeners) { if (!this.enabledInHierarchy) return; if (this._hasNestedViewGroup_custom(event, captureListeners)) return; let touch = event.touch; if (!this.node["_hitTest"](touch.getLocation(), this.node)) {//过滤掉不在区域内移动 return; } if (this.content_custom) { this.handleMoveLogic_custom(touch); } // Do not prevent touch events in inner nodes if (!this.cancelInnerEvents_custom) { return; } let deltaMove = touch.getLocation().sub(touch.getStartLocation()); //FIXME: touch move delta should be calculated by DPI. if (deltaMove.mag() > 7) { if (!this._touchMoved_custom) { // && event.target !== this.node // Simulate touch cancel for target node let cancelEvent = new cc.Event.EventTouch( event.getTouches(), event.bubbles ); cancelEvent.type = cc.Node.EventType.TOUCH_CANCEL; cancelEvent.touch = event.touch; cancelEvent["simulate"] = true; event.target.dispatchEvent(cancelEvent); this._touchMoved_custom = true; } } this._stopPropagationIfTargetIsMe_custom(event); } private _onTouchEnded_custom(event: cc.Event.EventTouch, captureListeners) { if (!this.enabledInHierarchy) return; if (this._hasNestedViewGroup_custom(event, captureListeners)) return; let touch = event.touch; if (this.content_custom) { this.handleReleaseLogic_custom(touch); } if (this._touchMoved_custom) { event.stopPropagation(); } else { this._stopPropagationIfTargetIsMe_custom(event); } } private _onTouchCancelled_custom(event, captureListeners) { if (!this.enabledInHierarchy) return; if (this._hasNestedViewGroup_custom(event, captureListeners)) return; // Filte touch cancel event send from self if (!event.simulate) { let touch = event.touch; if (this.content_custom) { this.handleReleaseLogic_custom(touch); } } this._stopPropagationIfTargetIsMe_custom(event); } private clampDelta_custom(delta) { if (this._slideDirection == SlideDirection.HORIZONTAL) { delta.y = 0; } else if (this._slideDirection == SlideDirection.VERTICAL) { delta.x = 0; } return delta; } private getHowMuchOutOfBoundary_custom(addition) { addition = addition || cc.v2(0, 0); if (addition.fuzzyEquals(cc.v2(0, 0), EPSILON) && !this._outOfBoundaryAmountDirty_custom) { return this._outOfBoundaryAmount_custom; } let outOfBoundaryAmount = cc.v2(0, 0); if (addition.fuzzyEquals(cc.v2(0, 0), EPSILON)) { this._outOfBoundaryAmount_custom = outOfBoundaryAmount; this._outOfBoundaryAmountDirty_custom = false; } outOfBoundaryAmount = this.clampDelta_custom(outOfBoundaryAmount); return outOfBoundaryAmount; } private getContentPosition_custom() { return this.content_custom.getPosition(); } private setContentPosition_custom(position) { if (position.fuzzyEquals(this.getContentPosition_custom(), EPSILON)) { return; } this.content_custom.setPosition(position); this._outOfBoundaryAmountDirty_custom = true; } onEnable() { this._registerEvent_custom(); } onDisable() { this._unregisterEvent_custom(); } //private methods private _registerEvent_custom() { this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchBegan_custom, this, true); this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved_custom, this, true); this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnded_custom, this, true); this.node.on( cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancelled_custom, this, true ); } private _unregisterEvent_custom() { this.node.off( cc.Node.EventType.TOUCH_START, this._onTouchBegan_custom, this, true ); this.node.off(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved_custom, this, true); this.node.off(cc.Node.EventType.TOUCH_END, this._onTouchEnded_custom, this, true); this.node.off( cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancelled_custom, this, true ); } }