Selaa lähdekoodia

新增 多边形箭头类

haojianlong 4 vuotta sitten
vanhempi
commit
9e22251b3a

+ 2 - 1
persagy-web-big/.eslintrc.js

@@ -52,6 +52,7 @@ module.exports = {
         // 语句
         'curly': ["error", "multi-line"],               // if、else if、else、for、while强制使用大括号,但允许在单行中省略大括号。
         'semi': ['error', 'always'],                    //不得省略语句结束的分号
-        '@typescript-eslint/explicit-member-accessibility': ['error', { accessibility: 'no-public' }]       // public访问不需加访问修饰符
+        '@typescript-eslint/explicit-member-accessibility': ['error', { accessibility: 'no-public' }],       // public访问不需加访问修饰符
+        "@typescript-eslint/no-explicit-any": ["off"]
     }
 };

+ 1 - 1
persagy-web-big/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/big",
-    "version": "2.2.17",
+    "version": "2.2.18",
     "description": "博锐尚格建筑信息化库",
     "main": "lib/index.js",
     "types": "lib/index.d.js",

+ 110 - 2
persagy-web-big/src/items/SArrowPoly.ts

@@ -24,11 +24,119 @@
  * *********************************************************************************************************************
  */
 
-import { SGraphItem } from "@persagy-web/graph";
+import { SLineItem } from "./SLineItem";
+import { SColor, SLine, SPainter, SPoint } from "@persagy-web/draw";
+import { SMathUtil } from "@persagy-web/graph/lib/utils/SMathUtil";
+import { SItemStatus } from "..";
 
 /**
  * 箭头多边形类型
  *
  * @author  郝建龙 <haojianlong@sagacloud.cn>
  */
-export class SArrowPoly extends SGraphItem {} // Class SArrowPoly
+export class SArrowPoly extends SLineItem {
+    /** 多边形数组 */
+    pointList: SPoint[] = [];
+    /** 绘制时需要旋转的角度 */
+    private _ang: number = 0;
+    /** 箭头中间粗细 */
+    arrowWidth: number = 8;
+
+    /** 是否为单向箭头 是-只绘制末端箭头 */
+    _isSingle: boolean = true;
+    get isSingle(): boolean {
+        return this._isSingle;
+    } // Get isSingle
+    set isSingle(v: boolean) {
+        this._isSingle = v;
+        this.update();
+    } // Set isSingle
+
+    /** 多边形填充色 */
+    private _polyFillColor: SColor = SColor.White;
+    get polyFillColor(): SColor {
+        return this._polyFillColor;
+    } // Get polyFillColor
+    set polyFillColor(v: SColor) {
+        this._polyFillColor = v;
+        this.update();
+    } // Set polyFillColor
+
+    /**
+     * 根据两个顶点生成多边形数组
+     */
+    pointChange(): void {
+        if (this.line.length > 1) {
+            const line = new SLine(this.line[0], this.line[1]);
+            const dis = SMathUtil.pointDistance(
+                this.line[0].x,
+                this.line[0].y,
+                this.line[1].x,
+                this.line[1].y
+            );
+            if (line.dx != 0) {
+                const tempFo = Math.atan(line.dy / line.dx);
+                this._ang = line.dx > 0 ? tempFo : tempFo + Math.PI;
+            } else {
+                this._ang = line.dy > 0 ? Math.PI / 2 : (3 * Math.PI) / 2;
+            }
+
+            if (this.isSingle) {
+                this.pointList = [
+                    new SPoint(0, this.arrowWidth / 2),
+                    new SPoint(dis - this.arrowWidth, this.arrowWidth / 2),
+                    new SPoint(dis - this.arrowWidth, this.arrowWidth),
+                    new SPoint(dis, 0),
+                    new SPoint(dis - this.arrowWidth, -this.arrowWidth),
+                    new SPoint(dis - this.arrowWidth, -this.arrowWidth / 2),
+                    new SPoint(0, -this.arrowWidth / 2)
+                ];
+            } else {
+                this.pointList = [
+                    new SPoint(0, 0),
+                    new SPoint(this.arrowWidth, this.arrowWidth),
+                    new SPoint(this.arrowWidth, this.arrowWidth / 2),
+                    new SPoint(dis - this.arrowWidth, this.arrowWidth / 2),
+                    new SPoint(dis - this.arrowWidth, this.arrowWidth),
+                    new SPoint(dis, 0),
+                    new SPoint(dis - this.arrowWidth, -this.arrowWidth),
+                    new SPoint(dis - this.arrowWidth, -this.arrowWidth / 2),
+                    new SPoint(this.arrowWidth, -this.arrowWidth / 2),
+                    new SPoint(this.arrowWidth, -this.arrowWidth)
+                ];
+            }
+        }
+    } // Function pointChange()
+
+    /**
+     * 绘制
+     *
+     * @param painter   绘制对象
+     */
+    onDraw(painter: SPainter): void {
+        if (this.line.length) {
+            painter.save();
+            painter.pen.lineWidth = painter.toPx(this.lineWidth);
+            painter.translate(this.line[0].x, this.line[0].y);
+            painter.rotate((this._ang * 180) / Math.PI);
+            painter.pen.color = this.strokeColor;
+            painter.brush.color = this.polyFillColor;
+            painter.drawPolygon(this.pointList);
+            painter.restore();
+
+            if (
+                this.status == SItemStatus.Edit ||
+                this.status == SItemStatus.Create
+            ) {
+                this.line.forEach((p, i) => {
+                    painter.brush.color = this.fillColor;
+                    if (i == this.curIndex) {
+                        painter.brush.color = this.activeFillColor;
+                    }
+
+                    painter.drawCircle(p.x, p.y, painter.toPx(5));
+                });
+            }
+        }
+    } // Function onDraw()
+} // Class SArrowPoly

+ 29 - 19
persagy-web-big/src/items/SLineItem.ts

@@ -140,7 +140,7 @@ export class SLineItem extends SGraphItem {
      * 构造函数
      *
      * @param parent  父级
-    */
+     */
     constructor(parent: SGraphItem | null);
 
     /**
@@ -148,7 +148,7 @@ export class SLineItem extends SGraphItem {
      *
      * @param parent  父级
      * @param line    坐标集合
-    */
+     */
     constructor(parent: SGraphItem | null, line: SPoint[]);
 
     /**
@@ -156,7 +156,7 @@ export class SLineItem extends SGraphItem {
      *
      * @param parent  父级
      * @param point   第一个点坐标
-    */
+     */
     constructor(parent: SGraphItem | null, point: SPoint);
 
     /**
@@ -164,7 +164,7 @@ export class SLineItem extends SGraphItem {
      *
      * @param parent    父级
      * @param line      坐标集合|第一个点坐标
-    */
+     */
     constructor(parent: SGraphItem | null, line?: SPoint | SPoint[]) {
         super(parent);
         if (line) {
@@ -179,10 +179,17 @@ export class SLineItem extends SGraphItem {
     } // Constructor
 
     /**
+     * 点发生变化
+     */
+    protected pointChange(): void {
+        // do nothing
+    } // Function pointChange()
+
+    /**
      * 添加点至数组中
      *
      * @param p 添加的点
-    */
+     */
     private addPoint(p: SPoint): void {
         if (this.line.length < 2) {
             this.line.push(p);
@@ -193,6 +200,7 @@ export class SLineItem extends SGraphItem {
             this.status = SItemStatus.Normal;
             this.releaseItem();
             this.$emit("finishCreated");
+            this.pointChange();
         }
         this.update();
     } // Function addPoint()
@@ -202,7 +210,7 @@ export class SLineItem extends SGraphItem {
      *
      * @param event     事件参数
      * @return 是否处理事件
-    */
+     */
     onDoubleClick(event: SMouseEvent): boolean {
         if (this.status == SItemStatus.Normal) {
             this.status = SItemStatus.Edit;
@@ -220,7 +228,7 @@ export class SLineItem extends SGraphItem {
      *
      * @param event     鼠标事件
      * @return 是否处理事件
-    */
+     */
     onMouseDown(event: SMouseEvent): boolean {
         this.curIndex = -1;
         this.curPoint = null;
@@ -247,7 +255,7 @@ export class SLineItem extends SGraphItem {
      *
      * @param event     事件参数
      * @return 是否处理事件
-    */
+     */
     onMouseUp(event: SMouseEvent): boolean {
         if (this.status == SItemStatus.Edit) {
             if (this.curIndex > -1) {
@@ -277,7 +285,7 @@ export class SLineItem extends SGraphItem {
      *
      * @param event     事件参数
      * @return 是否处理事件
-    */
+     */
     onMouseMove(event: SMouseEvent): boolean {
         if (event.shiftKey) {
             event = this.compare(event);
@@ -286,11 +294,13 @@ export class SLineItem extends SGraphItem {
         if (this.status == SItemStatus.Create) {
             if (this.line[0] instanceof SPoint) {
                 this.line[1] = new SPoint(event.x, event.y);
+                this.pointChange();
             }
         } else if (this.status == SItemStatus.Edit) {
             if (-1 != this.curIndex) {
                 this.line[this.curIndex].x = event.x;
                 this.line[this.curIndex].y = event.y;
+                this.pointChange();
             }
         } else {
             return super.onMouseMove(event);
@@ -304,7 +314,7 @@ export class SLineItem extends SGraphItem {
      * 获取点击点与 Point[] 中的点距离最近点
      *
      * @param p     鼠标点击点
-    */
+     */
     findNearestPoint(p: SPoint): void {
         let len = this.sceneDis;
         for (let i = 0; i < this.line.length; i++) {
@@ -327,7 +337,7 @@ export class SLineItem extends SGraphItem {
      *
      * @param SGraphCommand 相关命令类
      * @param any           对应传入参数
-    */
+     */
     protected recordAction(SGraphCommand: any, any: any[]): void {
         // 记录相关命令并推入堆栈中 todo
         const command = new SGraphCommand(this.scene, this, ...any);
@@ -339,7 +349,7 @@ export class SLineItem extends SGraphItem {
      *
      * @param x     x 坐标
      * @param y     y 坐标
-    */
+     */
     moveToOrigin(x: number, y: number): void {
         super.moveToOrigin(x, y);
         this.line = this.line.map(t => {
@@ -356,7 +366,7 @@ export class SLineItem extends SGraphItem {
      *
      * @param event     事件
      * @return 处理后的事件对象
-    */
+     */
     compare(event: SMouseEvent): SMouseEvent {
         if (this.line.length) {
             let last = new SPoint(event.x, event.y);
@@ -387,7 +397,7 @@ export class SLineItem extends SGraphItem {
      * @param x     x 坐标
      * @param y     y 坐标
      * @return 是否包含
-    */
+     */
     contains(x: number, y: number): boolean {
         if (this.line.length == 2) {
             let p = new SPoint(x, y);
@@ -404,7 +414,7 @@ export class SLineItem extends SGraphItem {
 
     /**
      * 撤销操作
-    */
+     */
     undo(): void {
         if (this.status != SItemStatus.Normal) {
             this.undoStack.undo();
@@ -413,7 +423,7 @@ export class SLineItem extends SGraphItem {
 
     /**
      * 重做操作
-    */
+     */
     redo(): void {
         if (this.status != SItemStatus.Normal) {
             this.undoStack.redo();
@@ -422,7 +432,7 @@ export class SLineItem extends SGraphItem {
 
     /**
      * 取消操作 item 事件
-    */
+     */
     cancelOperate(): void {
         if (this.status == SItemStatus.Create) {
             this.parent = null;
@@ -437,7 +447,7 @@ export class SLineItem extends SGraphItem {
      * Item 对象边界区域
      *
      * @return 边界区域
-    */
+     */
     boundingRect(): SRect {
         if (this.line.length) {
             this.minX = this.line[0].x;
@@ -474,7 +484,7 @@ export class SLineItem extends SGraphItem {
      * Item 绘制操作
      *
      * @param painter   绘制对象
-    */
+     */
     onDraw(painter: SPainter): void {
         this.sceneDis = painter.toPx(this.dis);
         painter.pen.lineWidth = painter.toPx(this.lineWidth);