refactor(pattern): 内置 pattern 的属性设计 & 优化下创建逻辑

src/utils/pattern/dot.ts

@@ -1,8 +1,71 @@
 import { DotPatternCfg } from '../../types/pattern';
 import { deepAssign } from '../../utils';
 
-export function createDotPattern(cfg: DotPatternCfg): HTMLCanvasElement {
-  const dotOptions = deepAssign(
+/**
+ * 初始化 cavnas，设置宽高等
+ */
+export function initCanvas(canvas: HTMLCanvasElement, width: number, height: number = width) {
+  // ~~~ 后续再行测试 ~~~
+  const pixelRatio = window?.devicePixelRatio || 2;
+  const logicalWidth = width;
+  const logicalHeight = height;
+  // 画布尺寸
+  canvas.width = logicalWidth * pixelRatio;
+  canvas.height = logicalHeight * pixelRatio;
+  // 显示尺寸
+  canvas.style.width = `${logicalWidth}px`;
+  canvas.style.height = `${logicalHeight}px`;
+  // ~~~ 后续再行测试 ~~~
+}
+
+/**
+ * 绘制背景
+ *
+ * @param context
+ * @param cfg
+ * @param width
+ * @param height
+ */
+export function drawBackground(
+  context: CanvasRenderingContext2D,
+  cfg: DotPatternCfg,
+  width: number,
+  height: number = width
+) {
+  const { backgroundColor, opacity } = cfg;
+
+  context.globalAlpha = opacity;
+  context.fillStyle = backgroundColor;
+
+  context.beginPath();
+  context.fillRect(0, 0, width, height);
+  context.closePath();
+}
+
+function drawDot(context: CanvasRenderingContext2D, cfg: DotPatternCfg, x: number, y: number) {
+  const { radius, fill, lineWidth, stroke, fillOpacity } = cfg;
+
+  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) {
+    context.stroke();
+  }
+  context.closePath();
+}
+
+/**
+ * 创建 dot pattern，返回 HTMLCanvasElement
+ *
+ * @param cfg
+ * @returns HTMLCanvasElement
+ */
+export function createDotPattern(cfg: DotPatternCfg): CanvasPattern {
+  const dotCfg = deepAssign(
     {},
     {
       radius: 4,
@@ -18,62 +81,26 @@ export function createDotPattern(cfg: DotPatternCfg): HTMLCanvasElement {
     cfg
   );
 
-  const canvas = document.createElement('canvas');
-  const { radius, padding, isStagger } = dotOptions;
-  const unitSize = isStagger ? (radius + padding) * 4 : (radius + padding) * 2;
-  const dots = isStagger
-    ? [
-        [(unitSize / 4) * 1, (unitSize / 4) * 1],
-        [(unitSize / 4) * 3, (unitSize / 4) * 1],
-        [(unitSize / 4) * 0, (unitSize / 4) * 3],
-        [(unitSize / 4) * 2, (unitSize / 4) * 3],
-        [(unitSize / 4) * 4, (unitSize / 4) * 3],
-      ]
-    : [[unitSize / 2, unitSize / 2]];
+  /** 大小 */
+  const { radius, padding, isStagger } = dotCfg;
+  const dots = [[padding / 2 + radius, padding / 2 + radius]];
 
-  // 后续再行测试
-  // const dpr = window.devicePixelRatio;
-  // const logicalWidth = size / 2
-  // const logicalHeight = size / 2
-  // canvas.width = logicalWidth * dpr;
-  // canvas.height = logicalHeight * dpr;
-  // canvas.style.width = logicalWidth + 'px';
-  // canvas.style.height = logicalHeight + 'px';
-  // ctx.scale(dpr, dpr);
+  let size = radius * 2 + padding;
+  // 如果交错, size 放大两倍 交错绘制 dot
+  if (isStagger) {
+    dots.push([size + radius, size + radius]);
+    size *= 2;
+  }
 
-  // console.info('dpr', dpr)
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
 
-  drawBackground(dotOptions, canvas, unitSize);
+  initCanvas(canvas, size);
+  drawBackground(ctx, dotCfg, size);
   // 绘制图案
   for (const [x, y] of dots) {
-    drawDot(dotOptions, canvas, x, y);
+    drawDot(ctx, dotCfg, x, y);
   }
 
-  return canvas;
-}
-
-function drawBackground(options: DotPatternCfg, canvas: HTMLCanvasElement, unitSize: number) {
-  const { backgroundColor, opacity } = options;
-  const ctx = canvas.getContext('2d');
-
-  canvas.width = unitSize;
-  canvas.height = unitSize;
-  ctx.globalAlpha = opacity;
-  ctx.globalAlpha = opacity;
-  ctx.fillStyle = backgroundColor;
-  ctx.fillRect(0, 0, unitSize, unitSize);
-}
-
-function drawDot(options: DotPatternCfg, canvas: HTMLCanvasElement, x: number, y: number) {
-  const { radius, fill, lineWidth, stroke, fillOpacity } = options;
-  const ctx = canvas.getContext('2d');
-
-  ctx.beginPath();
-  ctx.globalAlpha = fillOpacity;
-  ctx.fillStyle = fill;
-  ctx.strokeStyle = stroke;
-  ctx.lineWidth = lineWidth;
-  ctx.arc(x, y, radius, 0, 2 * Math.PI);
-  ctx.fill();
-  ctx.stroke();
+  return ctx.createPattern(canvas, cfg.mode || 'repeat');
 }

src/utils/pattern/index.ts

@@ -3,8 +3,6 @@ import { createDotPattern } from './dot';
 import { createLinePattern } from './line';
 import { createSquarePattern } from './square';
 
-export type PatternShape = 'dot' | 'square' | 'line'; //...
-
 export type PatternOption =
   | {
       type: 'dot';
@@ -26,23 +24,15 @@ export type PatternOption =
  */
 export function getCanvasPattern(options: PatternOption): CanvasPattern {
   const { type, cfg } = options;
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
-  let patternCanvas;
 
   switch (type) {
     case 'dot':
-      patternCanvas = createDotPattern(cfg);
-      break;
+      return createDotPattern(cfg);
     case 'line':
-      patternCanvas = createLinePattern(cfg);
-      break;
+      return createLinePattern(cfg);
     case 'square':
-      patternCanvas = createSquarePattern(cfg);
-      break;
+      return createSquarePattern(cfg);
     default:
       return;
   }
-
-  return ctx.createPattern(patternCanvas, cfg?.mode || 'repeat');
 }

src/utils/pattern/line.ts

@@ -1,8 +1,20 @@
 import { LinePatternCfg } from '../../types/pattern';
 import { deepAssign } from '../../utils';
+import { drawBackground, initCanvas } from './dot';
 
-export function createLinePattern(cfg: LinePatternCfg): HTMLCanvasElement {
-  const lineOptions = deepAssign(
+function drawLine(context: CanvasRenderingContext2D, cfg: LinePatternCfg, d: string) {
+  const { stroke, lineWidth, strokeOpacity } = cfg;
+  const path = new Path2D(d);
+
+  context.globalAlpha = strokeOpacity;
+  context.lineCap = 'square';
+  context.strokeStyle = stroke;
+  context.lineWidth = lineWidth;
+  context.stroke(path);
+}
+
+export function createLinePattern(cfg: LinePatternCfg): CanvasPattern {
+  const lineCfg = deepAssign(
     {},
     {
       rotation: 45,
@@ -17,8 +29,10 @@ export function createLinePattern(cfg: LinePatternCfg): HTMLCanvasElement {
   );
 
   const canvas = document.createElement('canvas');
-  const { spacing } = lineOptions;
-  const rotation = lineOptions.rotation % 360;
+  const ctx = canvas.getContext('2d');
+
+  const { spacing } = lineCfg;
+  const rotation = lineCfg.rotation % 360;
   const radians = rotation * (Math.PI / 180);
   // w, h 画布宽高
   let w = Math.floor(Math.abs(spacing / Math.sin(radians)));
@@ -68,32 +82,9 @@ export function createLinePattern(cfg: LinePatternCfg): HTMLCanvasElement {
     }
   }
 
-  drawBackground(lineOptions, canvas, w, h);
-  drawLine(lineOptions, canvas, d);
-
-  return canvas;
-}
-
-function drawBackground(options: LinePatternCfg, canvas: HTMLCanvasElement, w: number, h: number) {
-  const { backgroundColor, opacity } = options;
-  const ctx = canvas.getContext('2d');
-
-  canvas.width = w;
-  canvas.height = h;
-  ctx.globalAlpha = opacity;
-  ctx.fillStyle = backgroundColor;
-  ctx.fillRect(0, 0, w, h);
-  ctx.fill();
-}
-
-function drawLine(options: LinePatternCfg, canvas: HTMLCanvasElement, d: string) {
-  const { stroke, lineWidth, strokeOpacity } = options;
-  const path = new Path2D(d);
-  const ctx = canvas.getContext('2d');
+  initCanvas(canvas, w, h);
+  drawBackground(ctx, lineCfg, w, h);
+  drawLine(ctx, lineCfg, d);
 
-  ctx.globalAlpha = strokeOpacity;
-  ctx.lineCap = 'square';
-  ctx.strokeStyle = stroke;
-  ctx.lineWidth = lineWidth;
-  ctx.stroke(path);
+  return ctx.createPattern(canvas, cfg.mode || 'repeat');
 }