From 0678a2c2ad7676d71cd105afe135678fe78d0c73 Mon Sep 17 00:00:00 2001 From: xu_yanfeng Date: Thu, 6 Feb 2025 14:59:43 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BD=BB=E5=BA=95=E4=BF=AE=E5=A4=8Dcreator3.x?= =?UTF-8?q?=E4=B8=AD=EF=BC=8C=E5=A4=9A=E4=B8=AACanvas=EF=BC=8C=E6=B8=B8?= =?UTF-8?q?=E6=88=8F=E6=A1=86=E9=80=89=E8=BE=85=E5=8A=A9=E7=BA=BF=E5=9C=A8?= =?UTF-8?q?=E5=BA=95=E9=83=A8=E7=9A=84bug=EF=BC=8C=E4=B8=8D=E5=86=8D?= =?UTF-8?q?=E4=BE=9D=E8=B5=96=E5=BC=80=E5=8F=91=E8=80=85=E7=9A=84Canvas?= =?UTF-8?q?=EF=BC=8C=E9=81=BF=E5=85=8D=E6=B2=A1=E6=9C=89Canvas=E5=AF=BC?= =?UTF-8?q?=E8=87=B4=E7=9A=84=E5=BC=82=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/scripts/inject/enumConfig.ts | 7 +++ src/scripts/inject/hint/adapter.ts | 7 ++- src/scripts/inject/hint/hint-v2.ts | 3 +- src/scripts/inject/hint/hint-v3.ts | 78 ++++++++++++++++++++++-------- src/views/devtools/comp/index.ts | 3 ++ 5 files changed, 74 insertions(+), 24 deletions(-) diff --git a/src/scripts/inject/enumConfig.ts b/src/scripts/inject/enumConfig.ts index 7d7c1e0..7b086f0 100644 --- a/src/scripts/inject/enumConfig.ts +++ b/src/scripts/inject/enumConfig.ts @@ -284,6 +284,13 @@ export function getEnumListConfig() { return cc.Camera.ISO.__enums__; }, }, + // TODO: 有时间再优化可以复选的枚举选项 + // { + // key: "visibility", + // values() { + // return cc.Layers.BitMask.__bitmask__; + // }, + // }, ], }, ]; diff --git a/src/scripts/inject/hint/adapter.ts b/src/scripts/inject/hint/adapter.ts index 6ba282d..1996575 100644 --- a/src/scripts/inject/hint/adapter.ts +++ b/src/scripts/inject/hint/adapter.ts @@ -63,13 +63,16 @@ export class HintAdapter { return; } let node = new cc.Node("draw-node"); - this.addDraw(scene, node); this.draw = node.addComponent(cc.Graphics || cc.GraphicsComponent); + if (!this.addDraw(scene, node)) { + node.destroy(); + this.draw = null; + } } public isDrawValid() { return this.draw && this.draw.isValid; } - protected addDraw(scene: any, node: any) { + protected addDraw(scene: any, node: any): boolean { throw new Error("not implemented"); } public drawRect(points: RectPoints, opts: DrawOptions) { diff --git a/src/scripts/inject/hint/hint-v2.ts b/src/scripts/inject/hint/hint-v2.ts index 6783491..766402a 100644 --- a/src/scripts/inject/hint/hint-v2.ts +++ b/src/scripts/inject/hint/hint-v2.ts @@ -5,8 +5,9 @@ export class HintV2 extends HintAdapter { constructor() { super(); } - protected addDraw(scene: any, node: any): void { + protected addDraw(scene: any, node: any): boolean { scene.addChild(node); + return true; } private canvasBoundingRect = { left: 0, diff --git a/src/scripts/inject/hint/hint-v3.ts b/src/scripts/inject/hint/hint-v3.ts index 8cd4756..ce0d45a 100644 --- a/src/scripts/inject/hint/hint-v3.ts +++ b/src/scripts/inject/hint/hint-v3.ts @@ -1,12 +1,10 @@ import { HintAdapter, Point, RectPoints } from "./adapter"; declare const cc: any; - export class HintV3 extends HintAdapter { resetIndex(): void { - const node = this.draw.node; - if (node.parent) { - const len = node.parent.children.length; - node.setSiblingIndex(len); + if (this.inspectorCanvas) { + const len = this.inspectorCanvas.parent.children.length; + this.inspectorCanvas.setSiblingIndex(len); } } private get transformComponent() { @@ -40,7 +38,7 @@ export class HintV3 extends HintAdapter { return { x, y }; } /** - * 这种方式能够获取到优先绘制的canvas，也能保证线框在顶部，但是方案不完美，会收到node.layer的影响 + * 这种方式能够获取到优先绘制的canvas，也能保证线框在顶部，但是方案不完美，会受到node.layer的影响 */ private getCanvas(scene: any) { const canvasArray: Array<{ canvas: any; index: number }> = []; @@ -53,22 +51,60 @@ export class HintV3 extends HintAdapter { } } }); - canvasArray.sort((a, b) => a.index - b.index); - return canvasArray[0].canvas.node; - } - protected addDraw(scene: any, node: any): void { - const canvas = this.getCanvas(scene); - if (canvas) { - if (canvas.layer) { - node.layer = canvas.layer; - } - const tr = node.getComponent(this.transformComponent) || node.addComponent(this.transformComponent); - if (tr) { - tr.setContentSize(0, 0); - } - // FIXME: 多canvas的情况下，如果hover和select的节点不在一个canvas下，绘制线框有问题，暂时先不支持多canvas的情况 - canvas.addChild(node); + if (canvasArray.length) { + canvasArray.sort((a, b) => a.index - b.index); + return canvasArray[0].canvas.node; } + return null; + } + private inspectorCanvas: any = null; + protected addDraw(scene: any, graphicsNode: any): boolean { + graphicsNode.layer = this.getLayerID(); + const tr = graphicsNode.getComponent(this.transformComponent) || graphicsNode.addComponent(this.transformComponent); + if (tr) { + tr.setContentSize(0, 0); + } + + const inspectorCanvas = this.createInspectorCanvas(); + scene.addChild(inspectorCanvas); + + const camera = this.createCamera(); + inspectorCanvas.addChild(camera.node); + inspectorCanvas.addChild(graphicsNode); + + const canvas = inspectorCanvas.addComponent(cc.Canvas); + canvas.cameraComponent = camera; + canvas.alignCavasWithScreen = true; + this.inspectorCanvas = inspectorCanvas; + return true; + } + private createInspectorCanvas() { + const node = new cc.Node("InspectorCanvas"); + node.layer = this.getLayerID(); + const widget = node.addComponent(cc.Widget); + widget.alignMode = cc.Widget.AlignMode.ALWAYS; + widget.isAlignBottom = true; + widget.isAlignTop = true; + widget.isAlignLeft = true; + widget.isAlignRight = true; + widget.left = widget.right = widget.top = widget.bottom = 0; + + return node; + } + private createCamera() { + const node = new cc.Node("Camera"); + const camera = node.addComponent(cc.Camera); + camera.priority = Number.MAX_VALUE; + camera.layer = this.getLayerID(); + camera.visibility = this.getLayerID(); + camera.clearFlags = cc.Camera.ClearFlag.DONT_CLEAR; + camera.clearColor = new cc.Color(0, 0, 0, 0); + camera.projection = cc.Camera.ProjectionType.ORTHO; + camera.far = 2000; + return camera; + } + private getLayerID() { + return cc.Layers.Enum.GIZMOS; } getRectPoints(node: any): RectPoints | null { if (!node.worldPosition) { diff --git a/src/views/devtools/comp/index.ts b/src/views/devtools/comp/index.ts index fe5348a..a03bf08 100644 --- a/src/views/devtools/comp/index.ts +++ b/src/views/devtools/comp/index.ts @@ -171,6 +171,8 @@ export function getSimpleProperties(typeName: string): string[] { //---------- "worldPosition", "worldScale", + "layer", + "mobility", // "worldRotation",// 渲染有问题，暂时先不支持这个属性 ]; config[CompType.UITransform] = [ @@ -222,6 +224,7 @@ export function getSimpleProperties(typeName: string): string[] { "zoomRatio", "priority", "alignWithScreen", + "visibility", "projection", "far", "near",