@meta2d/core 1.0.6 → 1.0.8

package/src/pen/render.js

@@ -170,10 +170,18 @@ function formatGradient(color) {
                 }
                 else {
                     var _arr_2 = stap.split(' ');
-                    colors_1.push({
-                        color: _arr_2[0],
-                        i: parseFloat(_arr_2[1]) / 100,
-                    });
+                    if (_arr_2.length > 2) {
+                        colors_1.push({
+                            color: _arr_2[1],
+                            i: parseFloat(_arr_2[2]) / 100,
+                        });
+                    }
+                    else {
+                        colors_1.push({
+                            color: _arr_2[0],
+                            i: parseFloat(_arr_2[1]) / 100,
+                        });
+                    }
                 }
             });
             return {
@@ -261,27 +269,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);
@@ -712,7 +915,7 @@ export function renderPen(ctx, pen) {
                 }
             }
             else {
-                stroke = pen.calculative.color;
+                stroke = pen.calculative.color || getGlobalColor(store);
             }
             ctx.strokeStyle = stroke;
         }
@@ -1055,8 +1258,19 @@ export function ctxDrawLinePath(canUsePath, ctx, pen, store) {
             if (pen.calculative.animatePos) {
                 ctx.save();
                 setCtxLineAnimate(ctx, pen, store);
+                ctx.beginPath();
                 if (path instanceof Path2D) {
-                    ctx.stroke(path);
+                    //是否设置了平滑度
+                    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);
@@ -1314,6 +1528,7 @@ export function calcWorldAnchors(pen) {
             a.id === pen.calculative.activeAnchor.id;
         });
     }
+    pen.calculative.gradientAnimatePath = undefined;
 }
 export function calcWorldPointOfPen(pen, pt) {
     var p = __assign({}, pt);