调整哈尔滨曲线封锁绘图

src/jmapNew/shape/Section/EblockLines.js

@@ -1,6 +1,13 @@
 import Group from 'zrender/src/container/Group';
 import Line from 'zrender/src/graphic/shape/Line';
 import BezierCurve from 'zrender/src/graphic/shape/BezierCurve';
+import { 
+    cubicSubdivide,
+    quadraticAt,
+    cubicAt,
+    quadraticDerivativeAt,
+    cubicDerivativeAt } from 'zrender/src/core/curve';
+import * as vec2 from 'zrender/src/core/vector';
 
 /** 创建区段线集合*/
 export default class ELines extends Group {
@@ -15,14 +22,12 @@ export default class ELines extends Group {
     create(model) {
         /** 创建区段*/
         if (model && model.points.length > 1) {
-            if (model.isCurve) { // 曲线 用贝塞尔曲线绘图 封锁有问题 待解决
+            if (model.isCurve) { // 曲线 用贝塞尔曲线绘图 封锁 必须4个点来绘图
                 const shape = {};
                 for (let i = 1; i < (model.points.length - 1); i++) {
                     shape[`cpx${i}`] = model.points[i].x;
                     shape[`cpy${i}`] = model.points[i].y;
                 }
-                // const spaceX= (model.points[model.points.length - 1].x - model.points[0].x) / 3;
-                // const spaceY= (model.points[model.points.length - 1].y - model.points[0].y) / 3;
 
                 shape[`x1`] = model.points[0].x;
                 shape[`y1`] = model.points[0].y;
@@ -34,14 +39,13 @@ export default class ELines extends Group {
                     progressive: model.progressive,
                     z: this.z + 1,
                     culling: true,
-                    shape: shape,
+                    shape: this.couvert(shape),
                     style: {
                         lineWidth: model.style.Section.line.width,
                         stroke: model.style.Section.line.blockColor,
                         fillOpacity: 0
                     }
                 });
-                // console.log(this.section, this.section.pointAt());
                 this.add(this.section);
             } else {
                 if (model.points.length == 2) {
@@ -116,4 +120,68 @@ export default class ELines extends Group {
             this.lineBorder && this.lineBorder.show();
         }
     }
+
+    // 寻找相同的曲线点位
+    someVectorAt(shape, t, isTangent) {
+        var cpx2 = shape.cpx2;
+        var cpy2 = shape.cpy2;
+        if (cpx2 === null || cpy2 === null) {
+            return [
+                (isTangent ? cubicDerivativeAt : cubicAt)(shape.x1, shape.cpx1, shape.cpx2, shape.x2, t),
+                (isTangent ? cubicDerivativeAt : cubicAt)(shape.y1, shape.cpy1, shape.cpy2, shape.y2, t)
+            ];
+        }
+        else {
+            return [
+                (isTangent ? quadraticDerivativeAt : quadraticAt)(shape.x1, shape.cpx1, shape.x2, t),
+                (isTangent ? quadraticDerivativeAt : quadraticAt)(shape.y1, shape.cpy1, shape.y2, t)
+            ];
+        }
+    }
+
+    // 重新计算居中距离点
+    couvert(shape) {
+        let out = [];
+        var x1 = shape.x1;
+        var y1 = shape.y1;
+        var x2 = shape.x2;
+        var y2 = shape.y2;
+        var cpx1 = shape.cpx1;
+        var cpy1 = shape.cpy1;
+        var cpx2 = shape.cpx2;
+        var cpy2 = shape.cpy2;
+    
+        cubicSubdivide(
+            x1, cpx1, cpx2, x2, 0.3, out
+        );
+        var n_x1 = out[3];
+        cubicSubdivide(
+            x1, cpx1, cpx2, x2, 0.7, out
+        );
+        var n_x2 = out[3];
+    
+        cubicSubdivide(
+            y1, cpy1, cpy2, y2, 0.3, out
+        );
+        var n_y1 = out[3];
+        cubicSubdivide(
+            y1, cpy1, cpy2, y2, 0.7, out
+        );
+        var n_y2 = out[3];
+    
+        var p = this.someVectorAt(shape, 0.5, true);
+        var v = vec2.normalize(p, p);
+    
+        var x0 = Math.sqrt((Math.pow(cpx1-x1, 2)+Math.pow(x2-cpx2, 2))/2, 2);
+        var y0 = Math.sqrt((Math.pow(cpy1-y1, 2)+Math.pow(y2-cpy2, 2))/2, 2);
+    
+        return {
+            x1: n_x1,
+            y1: n_y1,
+            x2: n_x2,
+            y2: n_y2,
+            cpx1: (cpx1+cpx2)/2 + v[1]*x0*0.128, 
+            cpy1: (cpy1+cpy2)/2 + v[0]*y0*0.128
+        };
+    }
 }