等分多点连线图片

src/app/working-area/model/multipointIcon.ts

@@ -48,6 +48,8 @@ export class MultipointIcon extends AxShape {
         this.text.visible = this.showName;
         this.text.angle = -this.workingArea.backgroundImage.angle;
         this.addChild(this.text);
+        this.assetData.Thickness = this.assetData.Thickness === 0 ? 32: this.assetData.Thickness;
+        var tileScale = this.assetData.Thickness/64;
         // 画线图标
         for (let i = 0, count = this.pointsData.length - 1; i < count; i++) {
             const pointA = this.pointsData[i];
@@ -58,15 +60,17 @@ export class MultipointIcon extends AxShape {
             const b = pointB.y - pointA.y;
             const distance = Math.sqrt(a * a + b * b);
 
-            const icon = new PIXI.TilingSprite(PIXI.Texture.from(this.assetData.ImageUrl), distance, 64);
+            const icon = new PIXI.TilingSprite(PIXI.Texture.from(this.assetData.ImageUrl), distance, this.assetData.Thickness);
+            icon.tileScale.set(tileScale);
             icon.anchor.set(0, 0.5);
             icon.x = pointA.x;
             icon.y = pointA.y;
             icon.angle = angle;
-            icon.scale.set(1,this.assetData.Thickness === 0 ? 32/64 : this.assetData.Thickness/64);
             this.iconsTilingSprite.push(icon);
             this.addChild(icon);
             this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]);
+            // 等距等分
+            this.tileDistanceEqual(icon);
         }
         this.sortableChildren = true;
         this.text.zIndex = this.pointsData.length;
@@ -128,6 +132,8 @@ export class MultipointIcon extends AxShape {
                             const distance = Math.sqrt(a * a + b * b);
                             this.iconsTilingSprite[index].angle = angle;
                             this.iconsTilingSprite[index].width = distance;
+
+                            this.tileDistanceEqual(this.iconsTilingSprite[index]);
                         } else if (index < array.length - 1) {// 不是第一个点，也不是最后一个点
                             this.iconsTilingSprite[index].x = newPosition.x;
                             this.iconsTilingSprite[index].y = newPosition.y;
@@ -143,12 +149,16 @@ export class MultipointIcon extends AxShape {
                             this.iconsTilingSprite[index].angle = angle;
                             this.iconsTilingSprite[index].width = distance;
 
+                            this.tileDistanceEqual(this.iconsTilingSprite[index]);
+
                             const angleC = Math.atan2((pointA.y - pointC.y), (pointA.x - pointC.x)) * (180 / Math.PI);
                             const aC = pointA.x - pointC.x;
                             const bC = pointA.y - pointC.y;
                             const distanceC = Math.sqrt(aC * aC + bC * bC);
                             this.iconsTilingSprite[index - 1].angle = angleC;
                             this.iconsTilingSprite[index - 1].width = distanceC;
+
+                            this.tileDistanceEqual(this.iconsTilingSprite[index - 1]);
                         } else if (index === array.length - 1) { // 最后一个点
                             const pointA = array[index]; // 当前点
                             const pointC = array[index - 1]; // 前一个点
@@ -159,6 +169,8 @@ export class MultipointIcon extends AxShape {
                             const distanceC = Math.sqrt(aC * aC + bC * bC);
                             this.iconsTilingSprite[index - 1].angle = angleC;
                             this.iconsTilingSprite[index - 1].width = distanceC;
+
+                            this.tileDistanceEqual(this.iconsTilingSprite[index - 1]);
                         }
                         this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
                         this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]);
@@ -192,12 +204,28 @@ export class MultipointIcon extends AxShape {
     }
     // 刷新数据
     public refresh() {
-        this.iconsTilingSprite.forEach(element => {
-            element.scale.set(1,this.assetData.Thickness === 0 ? 32/64 : this.assetData.Thickness/64);
+        this.assetData.Thickness = this.assetData.Thickness === 0 ? 32: this.assetData.Thickness;
+        this.iconsTilingSprite.forEach(item => {   
+            // 厚度优化
+            this.tileDistanceEqual(item);
         });
         this.text.text = this.assetData.Name
             + '\r\n'
             + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
         this.text.angle = -this.workingArea.backgroundImage.angle;
     }
+
+    // 等距等分
+    public tileDistanceEqual(icon: PIXI.TilingSprite) {
+        icon.height = this.assetData.Thickness;
+        var tileScale = this.assetData.Thickness / 64;
+        icon.tileScale.set(tileScale);
+        console.log(tileScale);
+        var tileWidth = tileScale * 64;
+        var tileCount = Math.ceil(icon.width / tileWidth);
+        tileWidth = icon.width / tileCount;
+        tileScale = tileWidth / 64;
+        console.log(tileScale);
+        icon.tileScale.set(tileScale);
+    }
 }