添加旋转角度提示

添加父元素变换时子元素包围盒等辅助元素显隐控制

src/jlgraphic/plugins/GraphicTransformPlugin.ts

@@ -14,7 +14,7 @@ import {
 } from '.';
 import { GraphicApp } from '../app';
 import { JlGraphic } from '../core';
-import { AbsorbablePosition } from '../graphic';
+import { AbsorbablePosition, VectorText } from '../graphic';
 import { DraggablePoint } from '../graphic/DraggablePoint';
 import {
   angleToAxisx,
@@ -447,6 +447,10 @@ export class TransformPoints extends Container {
    * 起始图形角度
    */
   startAngle = 0;
+  /**
+   * 当前角度信息文本辅助
+   */
+  angleAssistantText: VectorText;
   /**
    * 旋转角度步长
    */
@@ -461,6 +465,10 @@ export class TransformPoints extends Container {
     this.obj = obj;
     this.name = TransformPoints.Name;
 
+    this.angleAssistantText = new VectorText('');
+    this.angleAssistantText.setVectorFontSize(16);
+    this.angleAssistantText.anchor.set(0.5);
+
     // 创建缩放拖拽点
     this.ltScalePoint = new DraggablePoint(new Point());
     this.ltScalePoint.name = TransformPoints.LeftTopName;
@@ -495,6 +503,11 @@ export class TransformPoints extends Container {
         child.on('transformend', this.onObjTransformEnd, this);
       });
     }
+    const pg = this.obj.getGraphic();
+    if (pg != null) {
+      pg.on('transformstart', this.onObjTransformStart, this);
+      pg.on('transformend', this.onObjTransformEnd, this);
+    }
 
     this.obj.on('repaint', this.onGraphicRepaint, this);
     this.children.forEach((dp) => {
@@ -556,6 +569,19 @@ export class TransformPoints extends Container {
     );
     this.obj.emit('transformstart', GraphicTransformEvent.rotate(this.obj));
     // app.emit('transformstart', app.selectedGraphics);
+    this.obj.getCanvas().addAssistantAppends(this.angleAssistantText);
+    this.updateAngleAssistantText(de);
+  }
+  updateAngleAssistantText(de: GraphicTransformEvent) {
+    this.angleAssistantText.text = this.obj.angle + '°';
+    let cursorPoint = de.data?.startPosition;
+    if (de.data?.currentPosition) {
+      cursorPoint = de.data?.currentPosition;
+    }
+    if (cursorPoint) {
+      this.angleAssistantText.position.x = cursorPoint.x;
+      this.angleAssistantText.position.y = cursorPoint.y - 10;
+    }
   }
   /**
    * 旋转移动
@@ -571,6 +597,7 @@ export class TransformPoints extends Container {
       angle = angle - 360;
     }
     this.obj.angle = angle;
+    this.updateAngleAssistantText(de);
     // this.obj.emit('rotatemove', this.obj);
   }
   /**
@@ -579,6 +606,7 @@ export class TransformPoints extends Container {
    */
   onRotateEnd() {
     this.showAll();
+    this.obj.getCanvas().removeAssistantAppends(this.angleAssistantText);
     this.rotateAngleStepKeyListeners.forEach((listener) =>
       this.obj.getGraphicApp().removeKeyboardListener(listener)
     );
@@ -832,6 +860,11 @@ export class BoundsGraphic extends Graphics {
         child.on('transformend', this.onObjTransformEnd, this);
       });
     }
+    const pg = this.obj.getGraphic();
+    if (pg != null) {
+      pg.on('transformstart', this.onObjTransformStart, this);
+      pg.on('transformend', this.onObjTransformEnd, this);
+    }
     this.obj.on('repaint', this.onGraphicRepaint, this);
     graphic.addAssistantAppend(this);
   }