feat:添加定位节点位置功能

release/preview-template/dist/index.html

@@ -1,3 +1,3 @@
-<script type="module" crossorigin src="/dist/assets/index.02b86726.js"></script>
+<script type="module" crossorigin src="/dist/assets/index.bec476d0.js"></script>
 <link rel="stylesheet" href="/dist/assets/index.1d01bced.css">
 <div id="app"></div>

src/components/CCNode.vue

@@ -2,7 +2,7 @@
     <div class="row">
         <el-checkbox v-model="ccNode!.active" size="small" style="margin-right: 10px;" />
         <span class="header-title" style="flex: 1;">Node</span>
-        <el-button size="small">+</el-button>
+        <el-button size="small" @click="Utils.drawNodeRect(ccNode)">+</el-button>
         <el-button size="small" @click="Utils.outputToConsole(ccNode)">></el-button>
     </div>
     <PropItem v-for="prop in NodeModel.props" :key="prop.key" :model="NodeModel" :prop-name="prop.name"

src/misc/Utils.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export default class Utils {
 
     static checkNodeValid(ccNode: any) {
@@ -18,6 +19,49 @@ export default class Utils {
         console.log(window['temp' + i]);
     }
 
+    static drawNodeRect(target: any) {
+        let rect;
+        let transform = target.getComponent(cc.UITransformComponent);
+        if (transform) {
+            rect = this.getSelfBoundingBoxToWold(transform);
+        } else {
+            let worldPos = cc.v3();
+            target.getWorldPosition(worldPos);
+            rect = cc.rect(worldPos.x, worldPos.y, 0, 0);
+        }
+        let canvasNode = new cc.Node('Canvas');
+        let scene = cc.director.getScene();
+        scene.addChild(canvasNode);
+        canvasNode.addComponent(cc.Canvas);
+        let bgNode = new cc.Node();
+        let graphics = bgNode.addComponent(cc.GraphicsComponent);
+        let bgTransform = bgNode.addComponent(cc.UITransformComponent);
+        canvasNode.addChild(bgNode);
+        let centerPos = cc.v3(rect.center.x, rect.center.y, 0);
+        let localPos = cc.v3();
+        canvasNode.getComponent(cc.UITransformComponent).convertToNodeSpaceAR(centerPos, localPos);
+        bgNode.setPosition(localPos);
+        bgNode.layer = target.layer;
+        let isZeroSize = rect.width === 0 || rect.height === 0;
+        if (isZeroSize) {
+            graphics.circle(0, 0, 100);
+            graphics.fillColor = cc.Color.GREEN;
+            graphics.fill();
+        } else {
+            bgTransform.width = rect.width;
+            bgTransform.height = rect.height;
+            graphics.rect(-bgTransform.width / 2, -bgTransform.height / 2, bgTransform.width, bgTransform.height);
+            graphics.fillColor = new cc.Color().fromHEX('#E91E6390');
+            graphics.fill();
+        }
+        setTimeout(() => {
+            if (cc.isValid(canvasNode)) {
+                canvasNode.destroy();
+            }
+        }, 2000);
+        return target;
+    }
+
     static getComponentName(component: any) {
         return component.__classname__;
     }
@@ -28,4 +72,22 @@ export default class Utils {
         });
     }
 
+    static getSelfBoundingBoxToWold(transform: any) {
+        let _worldMatrix = cc.mat4();
+        if (transform.node.parent) {
+            transform.node.parent.getWorldMatrix(_worldMatrix);
+            let parentMat = _worldMatrix;
+            let _matrix = cc.mat4();
+            cc.Mat4.fromRTS(_matrix, transform.node.getRotation(), transform.node.getPosition(), transform.node.getScale());
+            const width = transform._contentSize.width;
+            const height = transform._contentSize.height;
+            const rect = cc.rect(-transform._anchorPoint.x * width, -transform._anchorPoint.y * height, width, height);
+            cc.Mat4.multiply(_worldMatrix, parentMat, _matrix);
+            rect.transformMat4(_worldMatrix);
+            return rect;
+        } else {
+            return transform.getBoundingBox();
+        }
+    }
+
 }