@meta2d/core 1.0.5 → 1.0.7

package/src/pen/render.js

@@ -161,11 +161,20 @@ function formatGradient(color) {
             var _arr = arr[1].split('%,');
             var colors_1 = [];
             _arr.forEach(function (stap) {
-                var _arr = stap.split(') ');
-                colors_1.push({
-                    color: rgbaToHex(_arr[0] + ')'),
-                    i: parseFloat(_arr[1]) / 100,
-                });
+                if (/rgba?/.test(stap)) {
+                    var _arr_1 = stap.split(') ');
+                    colors_1.push({
+                        color: rgbaToHex(_arr_1[0] + ')'),
+                        i: parseFloat(_arr_1[1]) / 100,
+                    });
+                }
+                else {
+                    var _arr_2 = stap.split(' ');
+                    colors_1.push({
+                        color: _arr_2[0],
+                        i: parseFloat(_arr_2[1]) / 100,
+                    });
+                }
             });
             return {
                 angle: parseFloat(arr[0]),
@@ -252,27 +261,222 @@ function drawLinearGradientLine(ctx, pen, points) {
 }
 function ctxDrawLinearGradientPath(ctx, pen) {
     var anchors = pen.calculative.worldAnchors;
+    var smoothLenth = pen.calculative.lineWidth * (pen.calculative.gradientSmooth || 0);
     for (var i = 0; i < anchors.length - 1; i++) {
         if ((pen.lineName === 'curve' || pen.lineName === 'mind') &&
             anchors[i].curvePoints) {
-            drawLinearGradientLine(ctx, pen, [anchors[i], anchors[i].curvePoints[0]]);
-            for (var j = 0; j < anchors[i].curvePoints.length - 1; j++) {
+            if (i > 0) {
+                var lastCurvePoints = anchors[i - 1].curvePoints;
+                if (lastCurvePoints) {
+                    //上一个存在锚点
+                    smoothTransition(ctx, pen, smoothLenth, lastCurvePoints[lastCurvePoints.length - 1], anchors[i], anchors[i].curvePoints[0]);
+                }
+                else {
+                    smoothTransition(ctx, pen, smoothLenth, anchors[i - 1], anchors[i], anchors[i].curvePoints[0]);
+                }
+                //获取当前相对于0的位置
+                var next = getSmoothAdjacent(smoothLenth, anchors[i], anchors[i].curvePoints[0]);
+                drawLinearGradientLine(ctx, pen, [next, anchors[i].curvePoints[1]]);
+            }
+            else {
+                drawLinearGradientLine(ctx, pen, [
+                    anchors[i],
+                    anchors[i].curvePoints[0],
+                ]);
+                drawLinearGradientLine(ctx, pen, [
+                    anchors[i].curvePoints[0],
+                    anchors[i].curvePoints[1],
+                ]);
+            }
+            var len = anchors[i].curvePoints.length - 1;
+            for (var j = 1; j < len; j++) {
                 drawLinearGradientLine(ctx, pen, [
                     anchors[i].curvePoints[j],
                     anchors[i].curvePoints[j + 1],
                 ]);
             }
-            var index = anchors[i].curvePoints.length - 1;
-            drawLinearGradientLine(ctx, pen, [
-                anchors[i].curvePoints[index],
-                anchors[i + 1],
-            ]);
+            var last = getSmoothAdjacent(smoothLenth, anchors[i + 1], anchors[i].curvePoints[len]);
+            drawLinearGradientLine(ctx, pen, [anchors[i].curvePoints[len], last]);
         }
         else {
-            drawLinearGradientLine(ctx, pen, [anchors[i], anchors[i + 1]]);
+            var _next = anchors[i];
+            var _last = anchors[i + 1];
+            if (i > 0 && i < anchors.length - 1) {
+                //有突兀的地方
+                var lastCurvePoints = anchors[i - 1].curvePoints;
+                if (lastCurvePoints) {
+                    smoothTransition(ctx, pen, smoothLenth, lastCurvePoints[lastCurvePoints.length - 1], anchors[i], anchors[i + 1]);
+                }
+                else {
+                    smoothTransition(ctx, pen, smoothLenth, anchors[i - 1], anchors[i], anchors[i + 1]);
+                }
+            }
+            if (i > 0 && i < anchors.length - 1) {
+                _next = getSmoothAdjacent(smoothLenth, anchors[i], anchors[i + 1]);
+            }
+            if (i < anchors.length - 2) {
+                _last = getSmoothAdjacent(smoothLenth, anchors[i + 1], anchors[i]);
+            }
+            drawLinearGradientLine(ctx, pen, [_next, _last]);
         }
     }
 }
+function getSmoothAdjacent(smoothLenth, p1, p2) {
+    var nexLength = Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));
+    if (smoothLenth < nexLength) {
+        return {
+            x: p1.x + ((p2.x - p1.x) * smoothLenth) / nexLength,
+            y: p1.y + ((p2.y - p1.y) * smoothLenth) / nexLength,
+        };
+    }
+    else {
+        return {
+            x: p1.x + (p2.x - p1.x) / nexLength / 2,
+            y: p1.y + (p2.y - p1.y) / nexLength / 2,
+        };
+    }
+}
+function smoothTransition(ctx, pen, smoothLenth, p1, p2, p3) {
+    var last = getSmoothAdjacent(smoothLenth, p2, p1);
+    var next = getSmoothAdjacent(smoothLenth, p2, p3);
+    var contrlPoint = { x: p2.x, y: p2.y };
+    var points = getBezierPoints(100, last, contrlPoint, next);
+    for (var k = 0; k < points.length - 1; k++) {
+        drawLinearGradientLine(ctx, pen, [
+            {
+                x: points[k].x,
+                y: points[k].y,
+            },
+            {
+                x: points[k + 1].x,
+                y: points[k + 1].y,
+            },
+        ]);
+    }
+}
+function smoothAnimateTransition(ctx, smoothLenth, p2, p3) {
+    var next = getSmoothAdjacent(smoothLenth, p2, p3);
+    var contrlPoint = { x: p2.x, y: p2.y };
+    ctx.quadraticCurveTo(contrlPoint.x, contrlPoint.y, next.x, next.y);
+}
+function getGradientAnimatePath(pen) {
+    var anchors = pen.calculative.worldAnchors;
+    var smoothLenth = pen.calculative.lineWidth * (pen.calculative.gradientSmooth || 0);
+    //只创建一次
+    var _path = new Path2D();
+    for (var i = 0; i < anchors.length - 1; i++) {
+        var _next = anchors[i];
+        var _last = anchors[i + 1];
+        if (i == 0) {
+            _path.moveTo(anchors[i].x, anchors[i].y);
+        }
+        if (i > 0 && i < anchors.length - 1) {
+            //有突兀的地方
+            var lastCurvePoints = anchors[i - 1].curvePoints;
+            // const path = new Path2D();
+            if (lastCurvePoints) {
+                smoothAnimateTransition(_path, smoothLenth, anchors[i], anchors[i + 1]);
+            }
+            else {
+                smoothAnimateTransition(_path, smoothLenth, anchors[i], anchors[i + 1]);
+            }
+        }
+        if (i > 0 && i < anchors.length - 1) {
+            _next = getSmoothAdjacent(smoothLenth, anchors[i], anchors[i + 1]);
+        }
+        if (i < anchors.length - 2) {
+            _last = getSmoothAdjacent(smoothLenth, anchors[i + 1], anchors[i]);
+        }
+        _path.lineTo(_last.x, _last.y);
+    }
+    return _path;
+}
+function getAngle(p1, p2, p3) {
+    var a = { x: 0, y: 0 }, b = { x: 0, y: 0 };
+    a.x = p1.x - p2.x;
+    a.y = p1.y - p2.y;
+    b.x = p3.x - p2.x;
+    b.y = p3.y - p2.y;
+    return ((Math.acos((a.x * b.x + a.y * b.y) /
+        (Math.sqrt(a.x * a.x + a.y * a.y) * Math.sqrt(b.x * b.x + b.y * b.y))) /
+        Math.PI) *
+        180);
+}
+function getBezierPoints(num, p1, p2, p3, p4) {
+    if (num === void 0) { num = 100; }
+    var func = null;
+    var points = [];
+    if (!p3 && !p4) {
+        func = oneBezier;
+    }
+    else if (p3 && !p4) {
+        func = twoBezier;
+    }
+    else if (p3 && p4) {
+        func = threeBezier;
+    }
+    for (var i = 0; i < num; i++) {
+        points.push(func(i / num, p1, p2, p3, p4));
+    }
+    if (p4) {
+        points.push(p4);
+    }
+    else if (p3) {
+        points.push(p3);
+    }
+    return points;
+}
+/**
+ * @desc 一阶贝塞尔
+ * @param  t 当前百分比
+ * @param  p1 起点坐标
+ * @param  p2 终点坐标
+ */
+function oneBezier(t, p1, p2) {
+    var x1 = p1.x, y1 = p1.y;
+    var x2 = p2.x, y2 = p2.y;
+    var x = x1 + (x2 - x1) * t;
+    var y = y1 + (y2 - y1) * t;
+    return { x: x, y: y };
+}
+/**
+ * @desc 二阶贝塞尔
+ * @param  t 当前百分比
+ * @param  p1 起点坐标
+ * @param  p2 终点坐标
+ * @param  cp 控制点
+ */
+function twoBezier(t, p1, cp, p2) {
+    var x1 = p1.x, y1 = p1.y;
+    var cx = cp.x, cy = cp.y;
+    var x2 = p2.x, y2 = p2.y;
+    var x = (1 - t) * (1 - t) * x1 + 2 * t * (1 - t) * cx + t * t * x2;
+    var y = (1 - t) * (1 - t) * y1 + 2 * t * (1 - t) * cy + t * t * y2;
+    return { x: x, y: y };
+}
+/**
+ * @desc 三阶贝塞尔
+ * @param  t 当前百分比
+ * @param  p1 起点坐标
+ * @param  p2 终点坐标
+ * @param  cp1 控制点1
+ * @param  cp2 控制点2
+ */
+function threeBezier(t, p1, cp1, cp2, p2) {
+    var x1 = p1.x, y1 = p1.y;
+    var x2 = p2.x, y2 = p2.y;
+    var cx1 = cp1.x, cy1 = cp1.y;
+    var cx2 = cp2.x, cy2 = cp2.y;
+    var x = x1 * (1 - t) * (1 - t) * (1 - t) +
+        3 * cx1 * t * (1 - t) * (1 - t) +
+        3 * cx2 * t * t * (1 - t) +
+        x2 * t * t * t;
+    var y = y1 * (1 - t) * (1 - t) * (1 - t) +
+        3 * cy1 * t * (1 - t) * (1 - t) +
+        3 * cy2 * t * t * (1 - t) +
+        y2 * t * t * t;
+    return { x: x, y: y };
+}
 function strokeLinearGradient(ctx, pen) {
     var _a = pen.calculative, worldRect = _a.worldRect, lineGradientFromColor = _a.lineGradientFromColor, lineGradientToColor = _a.lineGradientToColor, lineGradientAngle = _a.lineGradientAngle;
     return linearGradient(ctx, worldRect, lineGradientFromColor, lineGradientToColor, lineGradientAngle);
@@ -772,6 +976,7 @@ export function renderPen(ctx, pen) {
     }
     if (lineGradientFlag) {
         ctxDrawLinearGradientPath(ctx, pen);
+        ctxDrawLinePath(true, ctx, pen, store);
     }
     else {
         ctxDrawPath(true, ctx, pen, store, fill);
@@ -1032,11 +1237,55 @@ export function ctxDrawPath(canUsePath, ctx, pen, store, fill) {
         }
     }
 }
+/**
+ * 连线配置线条渐进后，动画效果、起始点、终点的绘制
+ */
+export function ctxDrawLinePath(canUsePath, ctx, pen, store) {
+    if (canUsePath === void 0) { canUsePath = true; }
+    var path = canUsePath
+        ? store.path2dMap.get(pen)
+        : globalStore.path2dDraws[pen.name];
+    if (path) {
+        if (pen.type) {
+            if (pen.calculative.animatePos) {
+                ctx.save();
+                setCtxLineAnimate(ctx, pen, store);
+                ctx.beginPath();
+                if (path instanceof Path2D) {
+                    //是否设置了平滑度
+                    if (pen.calculative.gradientSmooth &&
+                        (pen.lineName === 'polyline' || pen.lineName === 'line')) {
+                        if (!pen.calculative.gradientAnimatePath) {
+                            pen.calculative.gradientAnimatePath = getGradientAnimatePath(pen);
+                        }
+                        ctx.stroke(pen.calculative.gradientAnimatePath);
+                    }
+                    else {
+                        ctx.stroke(path);
+                    }
+                }
+                else {
+                    path(pen, ctx);
+                    ctx.stroke();
+                }
+                ctx.restore();
+            }
+            pen.fromArrow && renderFromArrow(ctx, pen, store);
+            pen.toArrow && renderToArrow(ctx, pen, store);
+            //TODO 锚点处渐进色的过渡
+            if (pen.calculative.active && !pen.calculative.pencil) {
+                renderLineAnchors(ctx, pen);
+            }
+        }
+    }
+}
 /**
  * 设置线条动画，ctx 的 strokeStyle lineDash 等属性更改
  */
 export function setCtxLineAnimate(ctx, pen, store) {
     ctx.strokeStyle = pen.animateColor || store.options.animateColor;
+    pen.calculative.animateLineWidth &&
+        (ctx.lineWidth = pen.calculative.animateLineWidth * store.data.scale);
     var len = 0;
     switch (pen.lineAnimateType) {
         case LineAnimateType.Beads:
@@ -1066,7 +1315,8 @@ export function setCtxLineAnimate(ctx, pen, store) {
             if (len < 6) {
                 len = 6;
             }
-            ctx.lineWidth = len;
+            ctx.lineWidth =
+                (pen.calculative.animateLineWidth || len) * store.data.scale;
             ctx.setLineDash([0.1, pen.length]);
             break;
         default:
@@ -1270,6 +1520,7 @@ export function calcWorldAnchors(pen) {
             a.id === pen.calculative.activeAnchor.id;
         });
     }
+    pen.calculative.gradientAnimatePath = undefined;
 }
 export function calcWorldPointOfPen(pen, pt) {
     var p = __assign({}, pt);