yinmi_h5_edit/assets/script/edit/animation/res_preview.ts

import { _decorator, Component, EventTouch, Label, Node, Size, Sprite, SpriteFrame, UITransform, Vec2, Vec3 } from 'cc';
import { ani_frame } from '../../../data/data';
const { ccclass, property } = _decorator;

@ccclass('res_preview')
export class res_preview extends Component {
    @property(Node) img_res:Node = null;
    @property(Node) img_point:Node = null;
    @property(Node) btn_cancel:Node = null;
    @property(Node) btn_sure:Node = null;
    @property(Node) lab_show:Node = null;
    private m_data:ani_frame = null;
    private m_anchor_point:Vec2 = new Vec2(0.5,0.5)
    private m_callback:Function = null;
    start() {
        this.btn_cancel.on(Node.EventType.TOUCH_END, ()=> {
            this.close()
        },this)
        this.btn_sure.on(Node.EventType.TOUCH_END, ()=> {
            this.close(true)
        },this)
        this.img_res.on(Node.EventType.TOUCH_END, (et:EventTouch)=> {
            let p = new Vec3(et.getUILocation().x,et.getUILocation().y)
            let n_p = this.img_res.getComponent(UITransform).convertToNodeSpaceAR(p)

            this.img_point.position = new Vec3(n_p.x, n_p.y)

            let img_contentSize = this.img_res.getComponent(UITransform).contentSize
            let anchor_point_x = (img_contentSize.width / 2 + n_p.x) / img_contentSize.width
            let anchor_point_y = (img_contentSize.height / 2 + n_p.y) / img_contentSize.height
            this.m_anchor_point = new Vec2(anchor_point_x, anchor_point_y)
            // console.log('当前锚点=',this.m_anchor_point)

            this.setupLabShow()
        },this)
    }

    initView(imgSf:SpriteFrame, data:ani_frame, callback:Function) {
        this.m_data = data
        this.m_callback = callback

        this.m_anchor_point = new Vec2(data.anchor_point_x, data.anchor_point_y)
        this.img_res.getComponent(Sprite).spriteFrame = imgSf
        this.img_res.getComponent(UITransform).contentSize = new Size(data.size_width, data.size_height)
        this.img_res.getComponent(UITransform).setAnchorPoint(0.5, 0.5) //进入就原始值

        // 计算小圆点坐标
        let img_contentSize = this.img_res.getComponent(UITransform).contentSize
        let n_p_x = (img_contentSize.width * this.m_anchor_point.x) - (img_contentSize.width / 2)
        let n_p_y = (img_contentSize.height * this.m_anchor_point.y) - (img_contentSize.height / 2)
        this.img_point.position = new Vec3(n_p_x, n_p_y)

        this.setupLabShow()
    }

    private setupLabShow() {
        let x = parseFloat(this.m_anchor_point.x.toFixed(2))
        let y = parseFloat(this.m_anchor_point.y.toFixed(2))
        this.lab_show.getComponent(Label).string = '锚点x: ' + x + ' ' + '锚点y: ' + y
    }

    close(isSure:boolean = false) {
        if(isSure) {
            this.m_data.anchor_point_x = parseFloat(this.m_anchor_point.x.toFixed(2))
            this.m_data.anchor_point_y = parseFloat(this.m_anchor_point.y.toFixed(2))
            this.m_callback(this.m_data)
        } else {
            this.m_callback(null)
        }
        this.node.active = false
    }
}