{"version":3,"file":"line.js","sourceRoot":"","sources":["../../../src/utils/pattern/line.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAEpF;;GAEG;AACH,MAAM,CAAC,IAAM,qBAAqB,GAAG;IACnC,QAAQ,EAAE,EAAE;IACZ,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;IACV,eAAe,EAAE,aAAa;IAC9B,aAAa,EAAE,GAAG;IAClB,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,CAAC;CACb,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,OAAiC,EAAE,GAAmB,EAAE,CAAS;IAChF,IAAA,MAAM,GAA+B,GAAG,OAAlC,EAAE,SAAS,GAAoB,GAAG,UAAvB,EAAE,aAAa,GAAK,GAAG,cAAR,CAAS;IACjD,IAAM,IAAI,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC;IAE3B,OAAO,CAAC,WAAW,GAAG,aAAa,CAAC;IACpC,OAAO,CAAC,OAAO,GAAG,QAAQ,CAAC;IAC3B,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC;IACzD,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AACvB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,GAAoB;IACpD,IAAM,OAAO,GAAG,UAAU,CAAC,EAAE,EAAE,qBAAqB,EAAE,GAAG,CAAC,CAAC;IAEnD,IAAA,OAAO,GAA0B,OAAO,QAAjC,EAAE,QAAQ,GAAgB,OAAO,SAAvB,EAAE,SAAS,GAAK,OAAO,UAAZ,CAAa;IAEjD,+BAA+B;IAC/B,IAAM,KAAK,GAAG,OAAO,GAAG,SAAS,IAAI,CAAC,CAAC;IACvC,IAAM,MAAM,GAAG,OAAO,GAAG,SAAS,IAAI,CAAC,CAAC;IACxC,IAAM,CAAC,GAAG,gCACU,KAAK,iCACT,MAAM,gBAAM,KAAK,cAAI,MAAM,mBAChC,CAAC;IAEZ,oBAAoB;IACpB,IAAM,MAAM,GAAG,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACzC,IAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAEpC,qBAAqB;IACrB,cAAc,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;IAC5C,QAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IAE1B,IAAM,OAAO,GAAG,GAAG,CAAC,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAEpD,IAAI,OAAO,EAAE;QACX,IAAM,GAAG,GAAG,aAAa,EAAE,CAAC;QAC5B,IAAM,MAAM,GAAG,eAAe,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;QAC9C,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;KAC9B;IAED,gBAAgB;IAChB,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["import { LinePatternCfg } from '../../types/pattern';\nimport { deepAssign } from '../../utils';\nimport { drawBackground, getPixelRatio, initCanvas, transformMatrix } from './util';\n\n/**\n * linePattern 的 默认配置\n */\nexport const defaultLinePatternCfg = {\n  rotation: 45,\n  spacing: 5,\n  opacity: 1,\n  backgroundColor: 'transparent',\n  strokeOpacity: 0.5,\n  stroke: '#fff',\n  lineWidth: 2,\n};\n\n/**\n * 绘制line\n *\n * @param context canvasContext\n * @param cfg linePattern 的配置\n * @param d 绘制 path 所需的 d\n */\nexport function drawLine(context: CanvasRenderingContext2D, cfg: LinePatternCfg, d: string) {\n  const { stroke, lineWidth, strokeOpacity } = cfg;\n  const path = new Path2D(d);\n\n  context.globalAlpha = strokeOpacity;\n  context.lineCap = 'square';\n  context.strokeStyle = lineWidth ? stroke : 'transparent';\n  context.lineWidth = lineWidth;\n  context.stroke(path);\n}\n\n/**\n * 创建 linePattern\n */\nexport function createLinePattern(cfg?: LinePatternCfg): CanvasPattern {\n  const lineCfg = deepAssign({}, defaultLinePatternCfg, cfg);\n\n  const { spacing, rotation, lineWidth } = lineCfg;\n\n  // 计算 pattern 画布的大小， path 所需的 d\n  const width = spacing + lineWidth || 1;\n  const height = spacing + lineWidth || 1;\n  const d = `\n            M 0 0 L ${width} 0\n            M 0 ${height} L ${width} ${height}\n            `;\n\n  // 初始化 patternCanvas\n  const canvas = initCanvas(width, height);\n  const ctx = canvas.getContext('2d');\n\n  // 绘制 background，line\n  drawBackground(ctx, lineCfg, width, height);\n  drawLine(ctx, lineCfg, d);\n\n  const pattern = ctx.createPattern(canvas, 'repeat');\n\n  if (pattern) {\n    const dpr = getPixelRatio();\n    const matrix = transformMatrix(dpr, rotation);\n    pattern.setTransform(matrix);\n  }\n\n  // 返回 Pattern 对象\n  return pattern;\n}\n"]}