refactor: 一些代码上的优化 & 删除无用的代码

antvis · Aug 11, 2021 · 85b7e02 · 85b7e02
1 parent 75e5d08
commit 85b7e02
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 67 deletions.
diff --git a/src/utils/pattern/dot.ts b/src/utils/pattern/dot.ts
@@ -1,8 +1,8 @@
 import { DotPatternCfg } from '../../types/pattern';
 import { deepAssign } from '../../utils';
 
-export function drawRect(options: DotPatternCfg, canvas: HTMLCanvasElement, width: number, height?: number) {
-  const { backgroundColor, opacity } = options;
+export function drawRect(canvas: HTMLCanvasElement, cfg: DotPatternCfg, width: number, height: number = width) {
+  const { backgroundColor, opacity } = cfg;
   const ctx = canvas.getContext('2d');
 
   const w = width;
@@ -18,21 +18,20 @@ export function drawRect(options: DotPatternCfg, canvas: HTMLCanvasElement, widt
   ctx.closePath();
 }
 
-function drawDot(options: DotPatternCfg, canvas: HTMLCanvasElement, x: number, y: number) {
-  const { radius, fill, lineWidth, stroke, fillOpacity } = options;
-  const ctx = canvas.getContext('2d');
+function drawDot(cfg: DotPatternCfg, context: CanvasRenderingContext2D, x: number, y: number) {
+  const { radius, fill, lineWidth, stroke, fillOpacity } = cfg;
 
-  ctx.beginPath();
-  ctx.globalAlpha = fillOpacity;
-  ctx.fillStyle = fill;
-  ctx.strokeStyle = stroke;
-  ctx.lineWidth = lineWidth;
-  ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-  ctx.fill();
+  context.beginPath();
+  context.globalAlpha = fillOpacity;
+  context.fillStyle = fill;
+  context.strokeStyle = stroke;
+  context.lineWidth = lineWidth;
+  context.arc(x, y, radius, 0, 2 * Math.PI, false);
+  context.fill();
   if (lineWidth) {
-    ctx.stroke();
+    context.stroke();
   }
-  ctx.closePath();
+  context.closePath();
 }
 
 /**
@@ -42,7 +41,7 @@ function drawDot(options: DotPatternCfg, canvas: HTMLCanvasElement, x: number, y
  * @returns HTMLCanvasElement
  */
 export function createDotPattern(cfg: DotPatternCfg): CanvasPattern {
-  const pixelRatio = typeof window === 'object' && window.devicePixelRatio ? window.devicePixelRatio : 1;
+  const pixelRatio = window?.devicePixelRatio || 2;
 
   const dotCfg = deepAssign(
     {},
@@ -85,10 +84,10 @@ export function createDotPattern(cfg: DotPatternCfg): CanvasPattern {
   canvas.style.height = `${logicalHeight}px`;
   // ~~~ 后续再行测试 ~~~
 
-  drawRect(dotCfg, canvas, size);
+  drawRect(canvas, dotCfg, size);
   // 绘制图案
   for (const [x, y] of dots) {
-    drawDot(dotCfg, canvas, x, y);
+    drawDot(dotCfg, ctx, x, y);
   }
 
   return ctx.createPattern(canvas, cfg.mode || 'repeat');

diff --git a/src/utils/pattern/line.ts b/src/utils/pattern/line.ts
@@ -2,16 +2,15 @@ import { LinePatternCfg } from '../../types/pattern';
 import { deepAssign } from '../../utils';
 import { drawRect } from './dot';
 
-function drawLine(options: LinePatternCfg, canvas: HTMLCanvasElement, d: string) {
+function drawLine(options: LinePatternCfg, context: CanvasRenderingContext2D, d: string) {
   const { stroke, lineWidth, strokeOpacity } = options;
   const path = new Path2D(d);
-  const ctx = canvas.getContext('2d');
 
-  ctx.globalAlpha = strokeOpacity;
-  ctx.lineCap = 'square';
-  ctx.strokeStyle = stroke;
-  ctx.lineWidth = lineWidth;
-  ctx.stroke(path);
+  context.globalAlpha = strokeOpacity;
+  context.lineCap = 'square';
+  context.strokeStyle = stroke;
+  context.lineWidth = lineWidth;
+  context.stroke(path);
 }
 
 export function createLinePattern(cfg: LinePatternCfg): CanvasPattern {
@@ -83,8 +82,8 @@ export function createLinePattern(cfg: LinePatternCfg): CanvasPattern {
     }
   }
 
-  drawRect(lineCfg, canvas, w, h);
-  drawLine(lineCfg, canvas, d);
+  drawRect(canvas, lineCfg, w, h);
+  drawLine(lineCfg, ctx, d);
 
   return ctx.createPattern(canvas, cfg.mode || 'repeat');
 }
diff --git a/src/utils/pattern/pattern.ts b/src/utils/pattern/pattern.ts
diff --git a/src/utils/pattern/square.ts b/src/utils/pattern/square.ts
@@ -2,16 +2,15 @@ import { SquarePatternCfg } from '../../types/pattern';
 import { deepAssign } from '../../utils';
 import { drawRect } from './dot';
 
-function drawSquare(options: SquarePatternCfg, canvas: HTMLCanvasElement, x: number, y: number) {
+function drawSquare(options: SquarePatternCfg, context: CanvasRenderingContext2D, x: number, y: number) {
   const { stroke, size, fill, lineWidth, fillOpacity, rotation } = options;
-  const ctx = canvas.getContext('2d');
   const radians = (rotation % 360) * (Math.PI / 180);
 
-  ctx.globalAlpha = fillOpacity;
-  ctx.strokeStyle = stroke;
-  ctx.lineWidth = lineWidth;
-  ctx.fillStyle = fill;
-  ctx.fillRect(x, y, size, size);
+  context.globalAlpha = fillOpacity;
+  context.strokeStyle = stroke;
+  context.lineWidth = lineWidth;
+  context.fillStyle = fill;
+  context.fillRect(x, y, size, size);
 
   // todo 控制旋转
   // ctx.translate(x, y);
@@ -53,9 +52,9 @@ export function createSquarePattern(cfg: SquarePatternCfg): CanvasPattern {
     unitSize *= 2;
   }
 
-  drawRect(squareCfg, canvas, unitSize);
+  drawRect(canvas, squareCfg, unitSize);
   for (const [x, y] of squares) {
-    drawSquare(squareCfg, canvas, x, y);
+    drawSquare(squareCfg, ctx, x, y);
   }
   return ctx.createPattern(canvas, cfg.mode || 'repeat');
 }