456

assets/script/edit/animation/new_frame.ts

@@ -1,9 +1,10 @@
-import { _decorator, Component, Director, director, EditBox, Label, Node, ScrollView, Sprite, SpriteFrame, UITransform } from 'cc';
+import { _decorator, Component, Director, director, EditBox, Label, Node, ScrollView, Size, Sprite, SpriteFrame, UITransform, Vec3 } from 'cc';
 import { tools } from '../../tools';
 import { ani_frame, bag_item_data } from '../../../data/data';
 import { Attributes } from '../Attributes';
 import { frame_item } from './frame_item';
 import { control } from '../control';
+import { res_preview } from './res_preview';
 const { ccclass, property } = _decorator;
 
 @ccclass('new_frame')
@@ -28,9 +29,11 @@ export class new_frame extends Component {
     @property(Node) rotation:Node = null;
     @property(Node) anchor_point_x:Node = null;
     @property(Node) anchor_point_y:Node = null;
-    @property(Node) btn_rotation_center:Node = null;
+    @property(Node) btn_anchor_point:Node = null;
     @property(Node) hide_spr:Node = null;
 
+    @property(Node) res_preview:Node = null;
+
     private m_up_frame:ani_frame = null;
     private m_create_call = null;
     private m_edit_call = null;
@@ -55,29 +58,55 @@ export class new_frame extends Component {
             this.close()
         })
 
+        this.btn_anchor_point.on(Node.EventType.TOUCH_END, ()=> {
+            // console.log('设置锚点')
+            if(this.m_data.url_name.length == 0 || this.m_data.url_name =='空') {
+                return tools.showToast('资源是空的')
+            }
+            this.res_preview.active = true
+            let res_sf = control.res_map.get(this.m_data.url_name)
+            this.res_preview.getComponent(res_preview).initView(res_sf,this.m_data, (data)=> {
+                if(data!=null) {
+                    this.m_data.anchor_point_x = data.anchor_point_x
+                    this.m_data.anchor_point_y = data.anchor_point_y
+                    this.anchor_point_x.getComponent(EditBox).string = this.m_data.anchor_point_x.toString()
+                    this.anchor_point_y.getComponent(EditBox).string = this.m_data.anchor_point_y.toString()
+                    this.setupSprRatationAction()
+                }
+            })
+        })
+
+        this.btn_origin_res.on(Node.EventType.TOUCH_END,()=>{
+            // console.log('资源原尺寸')
+            if(this.m_data.url_name.length == 0 || this.m_data.url_name =='空') {
+                return tools.showToast('资源是空的')
+            }
+            let res_sf = control.res_map.get(this.m_data.url_name)
+            this.m_data.size_width = res_sf.width
+            this.m_data.size_height = res_sf.height
+            this.size_width.getComponent(EditBox).string = this.m_data.size_width.toString()
+            this.size_height.getComponent(EditBox).string = this.m_data.size_height.toString()
+            this.setupSprContentSize()
+        })
+        
         this.btn_select_res.on(Node.EventType.TOUCH_END,()=>{
+            // console.log('选择资源')
             tools.select_res_list((data:bag_item_data)=>{
                 this.m_data.url = data.url;
                 this.m_data.url_name = data.name;
-                // this.btn_select_res.getComponent(Sprite).spriteFrame = control.res_map.get(this.m_data.url_name)
-                // this.hide_spr.getComponent(Sprite).spriteFrame = this.btn_select_res.getComponent(Sprite).spriteFrame
-                this.hide_spr.getComponent(Sprite).spriteFrame = control.res_map.get(this.m_data.url_name)
+
+                let res_sf = control.res_map.get(this.m_data.url_name)
+                this.hide_spr.getComponent(Sprite).spriteFrame = res_sf
+                this.m_data.size_width = res_sf.width
+                this.m_data.size_height = res_sf.height
+                this.size_width.getComponent(EditBox).string = this.m_data.size_width.toString()
+                this.size_height.getComponent(EditBox).string = this.m_data.size_height.toString()
                 this.setupInitAnchorPointXY()
                 this.setupSprRatationAction()
+                this.setupSprContentSize()
             })
         })
-
-        this.btn_origin_res.on(Node.EventType.TOUCH_END,()=>{
-            let size = this.hide_spr.getComponent(UITransform).contentSize;
-            this.m_data.size_width = size.width;
-            this.m_data.size_height = size.height;
-            this.size_width.getComponent(EditBox).string =  this.m_data.size_width.toString()
-            this.size_height.getComponent(EditBox).string =  this.m_data.size_height.toString()
-        })
-
-        this.btn_rotation_center.on(Node.EventType.TOUCH_END, ()=> {
-            this.setupInitAnchorPointXY()
-        },this)
+        
 
         this.next_time.on('editing-did-ended', this.change, this);
         this.pos_x.on('editing-did-ended', this.change, this);
@@ -142,11 +171,8 @@ export class new_frame extends Component {
                 url = this.m_up_frame.url;
             }
         }
-        // if(url_name.length>0){
-        //     this.btn_select_res.getComponent(Sprite).spriteFrame = control.res_map.get(url_name)
-        // }
-        // this.hide_spr.getComponent(Sprite).spriteFrame = this.btn_select_res.getComponent(Sprite).spriteFrame
-        if(url_name.length>0){
+
+        if(url_name.length>0&&url_name!='空'){
             this.hide_spr.getComponent(Sprite).spriteFrame = control.res_map.get(url_name)
         }
         let x = up_frame?up_frame.pos_x: Math.floor(att.x);
@@ -188,8 +214,6 @@ export class new_frame extends Component {
             }    
         }
         this.edit_status = true;
-        // this.btn_select_res.getComponent(Sprite).spriteFrame = control.res_map.get(this.m_data.url_name)
-        // this.hide_spr.getComponent(Sprite).spriteFrame = this.btn_select_res.getComponent(Sprite).spriteFrame
         this.hide_spr.getComponent(Sprite).spriteFrame = control.res_map.get(this.m_data.url_name)
         this.initAtt()
         this.setupSprRatationAction()
@@ -214,15 +238,18 @@ export class new_frame extends Component {
         }
         this.rotation.getComponent(EditBox).string =  this.m_data.rotation.toString()
         if(this.edit_status) {
-            this.anchor_point_x.getComponent(EditBox).string =  this.m_data.anchor_point_x.toString()
-            this.anchor_point_y.getComponent(EditBox).string =  this.m_data.anchor_point_y.toString()
+            this.anchor_point_x.getComponent(EditBox).string = this.m_data.anchor_point_x.toString()
+            this.anchor_point_y.getComponent(EditBox).string = this.m_data.anchor_point_y.toString()
         } else {
             this.setupInitAnchorPointXY()
         }
+
+        this.setupSprContentSize()
     }
 
     change(){
         this.updateData()
+        this.setupSprContentSize()
         this.setupSprRatationAction()
     }
 
@@ -258,6 +285,21 @@ export class new_frame extends Component {
         this.anchor_point_y.getComponent(EditBox).string = this.m_data.anchor_point_y.toString()
         this.hide_spr.getComponent(UITransform).setAnchorPoint(this.m_data.anchor_point_x, this.m_data.anchor_point_y)
     }
+
+    setupSprContentSize() {
+        let scale = 1
+        let reference_value:number = 200
+        if(this.m_data.size_width > reference_value || this.m_data.size_height > reference_value) {
+            if(this.m_data.size_width > this.m_data.size_height) {
+                scale = reference_value / this.m_data.size_width
+            } else {
+                scale = reference_value / this.m_data.size_height
+            }
+        }
+        // console.log('scale=',scale)
+        this.hide_spr.setScale(new Vec3(scale,scale))
+        this.hide_spr.getComponent(UITransform).contentSize = new Size(this.m_data.size_width, this.m_data.size_height)
+    }
     
     setupSprRatationAction() {
         this.hide_spr.angle = this.m_data.rotation

assets/script/edit/animation/res_preview.ts

@@ -0,0 +1,73 @@
+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
+    }
+}
+

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

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "d33191af-6fbf-49d7-bea7-bb7b9fd216a7",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/test.scene

@@ -0,0 +1,1138 @@
+[
+  {
+    "__type__": "cc.SceneAsset",
+    "_name": "test",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_native": "",
+    "scene": {
+      "__id__": 1
+    }
+  },
+  {
+    "__type__": "cc.Scene",
+    "_name": "test",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      }
+    ],
+    "_active": true,
+    "_components": [],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "autoReleaseAssets": false,
+    "_globals": {
+      "__id__": 26
+    },
+    "_id": "ae4a27b1-5809-444e-a772-54a37da3efd6"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Canvas",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 5
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 22
+      },
+      {
+        "__id__": 23
+      },
+      {
+        "__id__": 24
+      },
+      {
+        "__id__": 25
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 960,
+      "y": 960,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "beI88Z2HpFELqR4T5EMHpg"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Camera",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 4
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 1000
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "ebFwiq8gBFaYpqYbdoDODe"
+  },
+  {
+    "__type__": "cc.Camera",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 3
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_projection": 0,
+    "_priority": 0,
+    "_fov": 45,
+    "_fovAxis": 0,
+    "_orthoHeight": 960,
+    "_near": 0,
+    "_far": 1000,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_depth": 1,
+    "_stencil": 0,
+    "_clearFlags": 7,
+    "_rect": {
+      "__type__": "cc.Rect",
+      "x": 0,
+      "y": 0,
+      "width": 1,
+      "height": 1
+    },
+    "_aperture": 19,
+    "_shutter": 7,
+    "_iso": 0,
+    "_screenScale": 1,
+    "_visibility": 1108344832,
+    "_targetTexture": null,
+    "_postProcess": null,
+    "_usePostProcess": false,
+    "_cameraType": -1,
+    "_trackingType": 0,
+    "_id": "63WIch3o5BEYRlXzTT0oWc"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "bg",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [
+      {
+        "__id__": 6
+      },
+      {
+        "__id__": 12
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 19
+      },
+      {
+        "__id__": 20
+      },
+      {
+        "__id__": 21
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "15TB0Oc5JI5KccYOLW5OQE"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "img",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 5
+    },
+    "_children": [
+      {
+        "__id__": 7
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 10
+      },
+      {
+        "__id__": 11
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": -428.113,
+      "y": 40.205,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "89oTfDtbxJOKiI6xEYzBYt"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "img_point",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 6
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 8
+      },
+      {
+        "__id__": 9
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "58kvOAgu5C2ZbGkMLyfAxj"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 7
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 20,
+      "height": 20
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "51tbgDOAhPD782ypuFbXcR"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 7
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 31,
+      "g": 15,
+      "b": 219,
+      "a": 255
+    },
+    "_spriteFrame": {
+      "__uuid__": "b730527c-3233-41c2-aaf7-7cdab58f9749@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 1,
+    "_fillType": 0,
+    "_sizeMode": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": "c2CA99bs1EN6qjkFxL2k5+"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 6
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 500,
+      "height": 1000
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "850V82hhNHKIp6NHsbIwW4"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 6
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 236,
+      "g": 17,
+      "b": 17,
+      "a": 255
+    },
+    "_spriteFrame": {
+      "__uuid__": "b730527c-3233-41c2-aaf7-7cdab58f9749@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 1,
+    "_fillType": 0,
+    "_sizeMode": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": "8cmQC4a5VAnLbkAdj4zHkL"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "btn_rotate",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 5
+    },
+    "_children": [
+      {
+        "__id__": 13
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 16
+      },
+      {
+        "__id__": 17
+      },
+      {
+        "__id__": 18
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": -18.75,
+      "y": 384,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "b8C/IuHsJOkZrtqEKG3q7D"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Label",
+    "_objFlags": 512,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 12
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 14
+      },
+      {
+        "__id__": 15
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "71cBtt5fNOPJ/OK5i4UAdG"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 13
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 100,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "2aOqrieaFDz4eOXEb/J7GZ"
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 13
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_string": "旋转",
+    "_horizontalAlign": 1,
+    "_verticalAlign": 1,
+    "_actualFontSize": 20,
+    "_fontSize": 20,
+    "_fontFamily": "Arial",
+    "_lineHeight": 40,
+    "_overflow": 1,
+    "_enableWrapText": false,
+    "_font": null,
+    "_isSystemFontUsed": true,
+    "_spacingX": 0,
+    "_isItalic": false,
+    "_isBold": false,
+    "_isUnderline": false,
+    "_underlineHeight": 2,
+    "_cacheMode": 0,
+    "_id": "e88Uti3ZpI1ZgdBzolRUze"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 12
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 200,
+      "height": 60
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "7dSZVuqn5B2qJesQOcCjxq"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 12
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_spriteFrame": {
+      "__uuid__": "20835ba4-6145-4fbc-a58a-051ce700aa3e@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 1,
+    "_fillType": 0,
+    "_sizeMode": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": "a4roUKaE1FYY3C/+Y1dIsG"
+  },
+  {
+    "__type__": "cc.Button",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 12
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "clickEvents": [],
+    "_interactable": true,
+    "_transition": 3,
+    "_normalColor": {
+      "__type__": "cc.Color",
+      "r": 214,
+      "g": 214,
+      "b": 214,
+      "a": 255
+    },
+    "_hoverColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "_pressedColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_disabledColor": {
+      "__type__": "cc.Color",
+      "r": 124,
+      "g": 124,
+      "b": 124,
+      "a": 255
+    },
+    "_normalSprite": {
+      "__uuid__": "20835ba4-6145-4fbc-a58a-051ce700aa3e@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_hoverSprite": {
+      "__uuid__": "20835ba4-6145-4fbc-a58a-051ce700aa3e@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_pressedSprite": {
+      "__uuid__": "544e49d6-3f05-4fa8-9a9e-091f98fc2ce8@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_disabledSprite": {
+      "__uuid__": "951249e0-9f16-456d-8b85-a6ca954da16b@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_duration": 0.1,
+    "_zoomScale": 1.2,
+    "_target": {
+      "__id__": 12
+    },
+    "_id": "38zJFa3dNKQL5/Za4Nj5Uc"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 1920,
+      "height": 1920
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "b29bIetBVHP5fdTzM3yeFX"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_spriteFrame": {
+      "__uuid__": "b730527c-3233-41c2-aaf7-7cdab58f9749@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 1,
+    "_fillType": 0,
+    "_sizeMode": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": "96m3//o2VNhZMyYqb3HMiE"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 100,
+    "_originalHeight": 100,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": "8awqWKLpNMsK6K+v1KNh3F"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 1920,
+      "height": 1920
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "d6rUX5yfhMlKoWX2bSbawx"
+  },
+  {
+    "__type__": "cc.Canvas",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_cameraComponent": {
+      "__id__": 4
+    },
+    "_alignCanvasWithScreen": true,
+    "_id": "12O/ljcVlEqLmVm3U2gEOQ"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 5.684341886080802e-14,
+    "_bottom": 5.684341886080802e-14,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": "c5V1EV8IpMtrIvY1OE9t2u"
+  },
+  {
+    "__type__": "132e57T+itK4JcDeAs9Pzty",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "bg": {
+      "__id__": 5
+    },
+    "img": {
+      "__id__": 6
+    },
+    "img_point": {
+      "__id__": 7
+    },
+    "btn_rotate": {
+      "__id__": 12
+    },
+    "_id": "eeHGtWkvJCbpKJ3StfZoWg"
+  },
+  {
+    "__type__": "cc.SceneGlobals",
+    "ambient": {
+      "__id__": 27
+    },
+    "shadows": {
+      "__id__": 28
+    },
+    "_skybox": {
+      "__id__": 29
+    },
+    "fog": {
+      "__id__": 30
+    },
+    "octree": {
+      "__id__": 31
+    },
+    "skin": {
+      "__id__": 32
+    },
+    "lightProbeInfo": {
+      "__id__": 33
+    },
+    "postSettings": {
+      "__id__": 34
+    },
+    "bakedWithStationaryMainLight": false,
+    "bakedWithHighpLightmap": false
+  },
+  {
+    "__type__": "cc.AmbientInfo",
+    "_skyColorHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyColor": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyIllumHDR": 20000,
+    "_skyIllum": 20000,
+    "_groundAlbedoHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_groundAlbedo": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_skyColorLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.5,
+      "z": 0.8,
+      "w": 1
+    },
+    "_skyIllumLDR": 20000,
+    "_groundAlbedoLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.2,
+      "z": 0.2,
+      "w": 1
+    }
+  },
+  {
+    "__type__": "cc.ShadowsInfo",
+    "_enabled": false,
+    "_type": 0,
+    "_normal": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 1,
+      "z": 0
+    },
+    "_distance": 0,
+    "_shadowColor": {
+      "__type__": "cc.Color",
+      "r": 76,
+      "g": 76,
+      "b": 76,
+      "a": 255
+    },
+    "_maxReceived": 4,
+    "_size": {
+      "__type__": "cc.Vec2",
+      "x": 512,
+      "y": 512
+    }
+  },
+  {
+    "__type__": "cc.SkyboxInfo",
+    "_envLightingType": 0,
+    "_envmapHDR": null,
+    "_envmap": null,
+    "_envmapLDR": null,
+    "_diffuseMapHDR": null,
+    "_diffuseMapLDR": null,
+    "_enabled": false,
+    "_useHDR": true,
+    "_editableMaterial": null,
+    "_reflectionHDR": null,
+    "_reflectionLDR": null,
+    "_rotationAngle": 0
+  },
+  {
+    "__type__": "cc.FogInfo",
+    "_type": 0,
+    "_fogColor": {
+      "__type__": "cc.Color",
+      "r": 200,
+      "g": 200,
+      "b": 200,
+      "a": 255
+    },
+    "_enabled": false,
+    "_fogDensity": 0.3,
+    "_fogStart": 0.5,
+    "_fogEnd": 300,
+    "_fogAtten": 5,
+    "_fogTop": 1.5,
+    "_fogRange": 1.2,
+    "_accurate": false
+  },
+  {
+    "__type__": "cc.OctreeInfo",
+    "_enabled": false,
+    "_minPos": {
+      "__type__": "cc.Vec3",
+      "x": -1024,
+      "y": -1024,
+      "z": -1024
+    },
+    "_maxPos": {
+      "__type__": "cc.Vec3",
+      "x": 1024,
+      "y": 1024,
+      "z": 1024
+    },
+    "_depth": 8
+  },
+  {
+    "__type__": "cc.SkinInfo",
+    "_enabled": false,
+    "_blurRadius": 0.01,
+    "_sssIntensity": 3
+  },
+  {
+    "__type__": "cc.LightProbeInfo",
+    "_giScale": 1,
+    "_giSamples": 1024,
+    "_bounces": 2,
+    "_reduceRinging": 0,
+    "_showProbe": true,
+    "_showWireframe": true,
+    "_showConvex": false,
+    "_data": null,
+    "_lightProbeSphereVolume": 1
+  },
+  {
+    "__type__": "cc.PostSettingsInfo",
+    "_toneMappingType": 0
+  }
+]

assets/test.scene.meta

@@ -0,0 +1,11 @@
+{
+  "ver": "1.1.49",
+  "importer": "scene",
+  "imported": true,
+  "uuid": "ae4a27b1-5809-444e-a772-54a37da3efd6",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {}
+}

assets/test.ts

@@ -0,0 +1,50 @@
+import { _decorator, Component, EventTouch, Label, Node, UITransform, Vec2, Vec3 } from 'cc';
+const { ccclass, property } = _decorator;
+
+@ccclass('test')
+export class test extends Component {
+    @property(Node) bg:Node = null;
+    @property(Node) img:Node = null;
+    @property(Node) img_point:Node = null;
+    @property(Node) btn_rotate:Node = null;
+    protected is_rotate:boolean = false;
+    protected anchor_point:Vec2 = new Vec2(0.5,0.5)
+    start() {
+        this.img.on(Node.EventType.TOUCH_END, (et:EventTouch)=> {
+            let p = new Vec3(et.getUILocation().x,et.getUILocation().y)
+            let n_p = this.img.getComponent(UITransform).convertToNodeSpaceAR(p)
+            // console.log('n_p',n_p)
+            let img_position_x = n_p.x 
+            let img_position_y = n_p.y
+            this.img_point.position = new Vec3(img_position_x, img_position_y, 1)
+
+            this.anchor_point = new Vec2(0.5,0.5)
+            this.img.getComponent(UITransform).setAnchorPoint(this.anchor_point)
+
+            let img_contentSize = this.img.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.anchor_point = new Vec2(anchor_point_x, anchor_point_y)
+            console.log('当前锚点=',this.anchor_point)
+        },this)
+
+        this.btn_rotate.on(Node.EventType.TOUCH_END, ()=> {
+            if(this.is_rotate) {
+                // 归位
+                this.btn_rotate.children[0].getComponent(Label).string = '旋转'
+                this.img.angle = 0
+                this.anchor_point = new Vec2(0.5,0.5)
+                this.img_point.position = new Vec3(0, 0, 1)
+            } else {
+                // 旋转
+                this.btn_rotate.children[0].getComponent(Label).string = '归位'
+                this.img.angle = 10
+            }
+            this.img.getComponent(UITransform).setAnchorPoint(this.anchor_point)
+            this.is_rotate = !this.is_rotate
+        },this)
+        
+    }
+
+}
+

assets/test.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "132e5ed3-fa2b-4ae0-9703-780b3d3f3b72",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}