feat: draw path outline

F-star · Mar 16, 2024 · 8284fe6 · 8284fe6
1 parent b73daed
commit 8284fe6
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 8 deletions.
diff --git a/packages/common/src/color.ts b/packages/common/src/color.ts
@@ -51,7 +51,10 @@ export const parseRGBToHex = (rgb: { r: number; g: number; b: number }) => {
   const hex = (r << 16) | (g << 8) | b;
   return hex.toString(16).toUpperCase().padStart(6, '0');
 };
-
+/**
+ * parse hex to rgb
+ * e.g. #FF0000 -> { r: 255, g: 0, b: 0 }
+ */
 export const parseHexToRGB = (hex: string): IRGB | null => {
   hex = normalizeHex(hex);
   if (!hex) {
@@ -63,6 +66,10 @@ export const parseHexToRGB = (hex: string): IRGB | null => {
   return { r, g, b };
 };
 
+/**
+ * parse hex to rgba
+ * e.g. #FF0000FF -> { r: 255, g: 0, b: 0, a: 1 }
+ */
 export const parseHexToRGBA = (hex: string): IRGBA | null => {
   hex = normalizeHex(hex);
   if (!hex) {

diff --git a/packages/core/src/graphs/path/path.ts b/packages/core/src/graphs/path/path.ts
@@ -1,13 +1,13 @@
-import { parseRGBAStr } from '@suika/common';
-import { addPoint, IRect, IRectWithRotation } from '@suika/geo';
+import { parseHexToRGBA, parseRGBAStr } from '@suika/common';
+import { addPoint, type IRect, type IRectWithRotation } from '@suika/geo';
 import { Bezier } from 'bezier-js';
 
-import { ImgManager } from '../../Img_manager';
-import { TextureType } from '../../texture';
+import { type ImgManager } from '../../Img_manager';
+import { type ITexture, TextureType } from '../../texture';
 import { GraphType } from '../../type';
 import { rotateInCanvas } from '../../utils';
-import { Graph, GraphAttrs } from '../graph';
-import { IPathItem, ISegment } from './type';
+import { Graph, type GraphAttrs } from '../graph';
+import { type IPathItem, type ISegment } from './type';
 
 export interface PathAttrs extends GraphAttrs {
   pathData: IPathItem[];
@@ -99,7 +99,37 @@ export class Path extends Graph<PathAttrs> {
     imgManager?: ImgManager | undefined,
     smooth?: boolean | undefined,
   ) {
-    const { pathData, rotation, fill, strokeWidth, stroke } = this.attrs;
+    this.realDraw(ctx, imgManager, smooth);
+  }
+
+  override drawOutline(
+    ctx: CanvasRenderingContext2D,
+    stroke: string,
+    strokeWidth: number,
+  ) {
+    this.realDraw(ctx, undefined, undefined, {
+      stroke: [
+        {
+          type: TextureType.Solid,
+          attrs: parseHexToRGBA(stroke)!,
+        },
+      ],
+      strokeWidth,
+    });
+  }
+
+  private realDraw(
+    ctx: CanvasRenderingContext2D,
+    imgManager?: ImgManager,
+    smooth?: boolean,
+    overrideStyle?: {
+      fill?: ITexture[];
+      stroke?: ITexture[];
+      strokeWidth?: number;
+    },
+  ) {
+    const { pathData, rotation } = this.attrs;
+    const { fill, strokeWidth, stroke } = overrideStyle || this.attrs;
     if (rotation) {
       const { x: cx, y: cy } = this.getCenter();