GuideViewImpl.ts 2.84 KB
import { CCPureView } from "../../../../common/classbase/CCViewBase";
import { DirectionType } from "../../../Enums";
import { RegView } from "../../PresenterCCViewFactory";
import { GuideView, GuideViewProps, GuideViewType } from "../type/GuideView";

const { ccclass, property } = cc._decorator;

@ccclass
@RegView(GuideViewType, "prefab/ui/GuideView")
export default class GuideViewImpl extends CCPureView<GuideViewProps> implements GuideView {

    @property({ type: cc.Node, visible: true, displayName: "maskNode", tooltip: "蒙板节点" })
    maskNode: cc.Node = new cc.Node;
    @property({ type: cc.Node, visible: true, displayName: "maskSprNode", tooltip: "蒙板图片节点" })
    maskSprNode: cc.Node = new cc.Node;
    @property({ type: cc.Node, visible: true, displayName: "frameSprNode", tooltip: "边框节点" })
    frameSprNode: cc.Node = new cc.Node;
    @property({ type: cc.Node, visible: true, displayName: "guideBtn", tooltip: "引导按钮" })
    guideBtn: cc.Node = new cc.Node;
    @property({ type: cc.Node, visible: true, displayName: "arrowNode", tooltip: "箭头节点" })
    arrowNode: cc.Node = new cc.Node;

    onGuideClick() {
        this._props.clickCallFunc();
    }

    setGuideInfo(x: number, y: number, w: number, h: number, direction: DirectionType) {
        this.maskSprNode.getComponent(cc.Widget).updateAlignment();
        w += 46;
        h += 46;
        let pos: cc.Vec3 = cc.v3(x, y, 0);
        let srcSize: cc.Size = cc.size(w, h);
        let clickSize: cc.Size = cc.size(w + 20, h + 20);

        this.maskNode.position = pos;
        this.frameSprNode.position = pos;
        this.guideBtn.position = pos;

        this.maskNode.setContentSize(srcSize);
        this.frameSprNode.setContentSize(clickSize);
        this.guideBtn.setContentSize(clickSize);

        let r = 0;

        let g = this.arrowNode.height / 2;
        let py = y;
        let px = x;
        switch (direction) {
            case DirectionType.UP:
                {
                    r = 180;
                    py += (h / 2 + g) * (-1);
                    px = x;
                }
                break;
            case DirectionType.DOWM:
                {
                    r = 0;
                    py += h / 2 + g;
                    px = x;
                }
                break;
            case DirectionType.LEFT:
                {
                    r = 90;
                    py = y;
                    px += (w / 2 + g) * (-1);

                }
                break;
            case DirectionType.RIGHT:
                {
                    r = -90;
                    py = y;
                    px += w / 2 + g;
                }
                break;
        }
        this.arrowNode.angle = r;
        this.arrowNode.x = px;
        this.arrowNode.y = py;
        this.maskSprNode.getComponent(cc.Widget).updateAlignment();
    }
}