fix(line-pattern): 修复linewidth>=spacing 时，绘制异常问题 (#2801)

antvis · Aug 19, 2021 · c08e879 · c08e879
1 parent 27b17ed
commit c08e879
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 16 deletions.
diff --git a/examples/plugin/pattern/demo/bar-pattern.ts b/examples/plugin/pattern/demo/bar-pattern.ts
@@ -14,20 +14,14 @@ const PATTERN_MAP = {
   },
   分类二: {
     type: 'square',
-    cfg: {
-      size: 5,
-      padding: 0,
-      rotation: 0,
-      isStagger: true,
-    },
   },
   分类三: {
     type: 'line',
   },
   分类四: {
     type: 'square',
     cfg: {
-      size: 5,
+      size: 4,
       padding: 1,
       rotation: 45,
       isStagger: false,
@@ -36,7 +30,7 @@ const PATTERN_MAP = {
   分类五: {
     type: 'line',
     cfg: {
-      spacing: 6,
+      spacing: 3,
       lineWidth: 2,
       rotation: 90,
     },

diff --git a/src/utils/pattern/line.ts b/src/utils/pattern/line.ts
@@ -7,7 +7,7 @@ import { initCanvas, drawBackground, transformMatrix, getPixelRatio } from './ut
  */
 export const defaultLinePatternCfg = {
   rotation: 45,
-  spacing: 5,
+  spacing: 4,
   opacity: 1,
   backgroundColor: 'transparent',
   strokeOpacity: 0.5,
@@ -28,7 +28,7 @@ export function drawLine(context: CanvasRenderingContext2D, cfg: LinePatternCfg,
 
   context.globalAlpha = strokeOpacity;
   context.lineCap = 'square';
-  context.strokeStyle = stroke;
+  context.strokeStyle = lineWidth ? stroke : 'transparent';
   context.lineWidth = lineWidth;
   context.stroke(path);
 }
@@ -39,11 +39,11 @@ export function drawLine(context: CanvasRenderingContext2D, cfg: LinePatternCfg,
 export function createLinePattern(cfg?: LinePatternCfg): CanvasPattern {
   const lineCfg = deepAssign({}, defaultLinePatternCfg, cfg);
 
-  const { spacing, rotation } = lineCfg;
+  const { spacing, rotation, lineWidth } = lineCfg;
 
   // 计算 pattern 画布的大小， path 所需的 d
-  const width = spacing;
-  const height = spacing;
+  const width = spacing + lineWidth || 1;
+  const height = spacing + lineWidth || 1;
   const d = `
             M 0 0 L ${width} 0
             M 0 ${height} L ${width} ${height}

diff --git a/src/utils/pattern/square.ts b/src/utils/pattern/square.ts
@@ -13,9 +13,9 @@ import {
  * squarePattern 的 默认配置
  */
 export const defaultSquarePatternCfg = {
-  size: 4,
-  padding: 1,
-  isStagger: false,
+  size: 5,
+  padding: 0,
+  isStagger: true,
   backgroundColor: 'transparent',
   opacity: 1,
   rotation: 0,