feat: support for dash line scale. (apache/echarts#12961)

plainheart · Jul 20, 2020 · 1eb9885 · 1eb9885
1 parent b2eb64a
commit 1eb9885
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/src/canvas/graphic.ts b/src/canvas/graphic.ts
@@ -14,6 +14,7 @@ import TSpan, {TSpanStyleProps} from '../graphic/TSpan';
 import { DEFAULT_FONT } from '../contain/text';
 import { IncrementalDisplayable } from '../export';
 import { MatrixArray } from '../core/matrix';
+import { map } from '../core/util';
 
 const pathProxyForDraw = new PathProxy(true);
 
@@ -151,15 +152,23 @@ function brushPath(ctx: CanvasRenderingContext2D, el: Path, inBatch: boolean) {
         }
     }
 
-    const lineDash = style.lineDash;
-    const lineDashOffset = style.lineDashOffset;
+    let lineDash = style.lineDash;
+    let lineDashOffset = style.lineDashOffset;
 
     const ctxLineDash = !!ctx.setLineDash;
 
     // Update path sx, sy
     const scale = el.getGlobalScale();
     path.setScale(scale[0], scale[1], el.segmentIgnoreThreshold);
 
+    if (lineDash) {
+        const lineScale = (style.strokeNoScale && el && el.getLineScale) ? el.getLineScale() : 1;
+        lineDash = map(lineDash, function (rawVal) {
+            return rawVal / lineScale;
+        });
+        lineDashOffset /= lineScale;
+    }
+
     let needsRebuild = true;
     // Proxy context
     // Rebuild path in following 2 cases

diff --git a/src/svg/graphic.ts b/src/svg/graphic.ts
@@ -10,6 +10,7 @@ import { PathStyleProps } from '../graphic/Path';
 import ZRImage, { ImageStyleProps } from '../graphic/Image';
 import { DEFAULT_FONT, getLineHeight } from '../contain/text';
 import TSpan, { TSpanStyleProps } from '../graphic/TSpan';
+import { map } from '../core/util';
 
 export interface SVGProxy<T> {
     brush(el: T): void
@@ -106,10 +107,14 @@ function bindStyle(svgEl: SVGElement, style: AllStyleOption, el?: Path | TSpan |
         // stroke then fill for text; fill then stroke for others
         attr(svgEl, 'paint-order', style.strokeFirst ? 'stroke' : 'fill');
         attr(svgEl, 'stroke-opacity', (style.strokeOpacity != null ? style.strokeOpacity * opacity : opacity) + '');
-        const lineDash = style.lineDash;
+        let lineDash = style.lineDash;
         if (lineDash) {
-            attr(svgEl, 'stroke-dasharray', (style.lineDash as number[]).join(','));
-            attr(svgEl, 'stroke-dashoffset', mathRound(style.lineDashOffset || 0) + '');
+            lineDash = map(lineDash, function (rawVal) {
+                return rawVal / strokeScale;
+            });
+            const lineDashOffset = mathRound((style.lineDashOffset || 0) / strokeScale);
+            attr(svgEl, 'stroke-dasharray', (lineDash as number[]).join(','));
+            attr(svgEl, 'stroke-dashoffset', lineDashOffset + '');
         }
         else {
             attr(svgEl, 'stroke-dasharray', '');