feat: path curve util for lesson13

xiaoiver · Oct 27, 2024 · c177f63 · c177f63
1 parent 0bb3177
commit c177f63
Show file tree

Hide file tree

Showing 31 changed files with 2,428 additions and 28 deletions.
diff --git a/__tests__/unit/utils.spec.ts b/__tests__/unit/utils.spec.ts
@@ -14,6 +14,8 @@ import {
   Converter,
   pointToLine,
   bisect,
+  parsePath,
+  LineCurve,
 } from '../../packages/core/src/utils';
 
 describe('Utils', () => {
@@ -103,4 +105,33 @@ describe('Utils', () => {
       );
     });
   });
+
+  describe('Curve', () => {
+    it('LineCurve', () => {
+      const curve = new LineCurve(
+        vec2.fromValues(0, 0),
+        vec2.fromValues(120, 0),
+      );
+      expect(curve.getLength()).toBe(120);
+      expect(curve.getPoint(0)).toEqual(vec2.fromValues(0, 0));
+      expect(curve.getPoint(1)).toEqual(vec2.fromValues(120, 0));
+
+      expect(curve.getPointAt(0)).toEqual(vec2.fromValues(0, 0));
+      expect(curve.getPointAt(1)).toEqual(vec2.fromValues(120, 0));
+
+      expect(curve.getPoints().length).toEqual(6);
+      expect(curve.getPoints()[0]).toEqual(vec2.fromValues(0, 0));
+      expect(curve.getPoints()[1]).toEqual(vec2.fromValues(24, 0));
+      expect(curve.getPoints()[5]).toEqual(vec2.fromValues(120, 0));
+    });
+  });
+
+  // describe('Parse Path', () => {
+  //   it('should parse line correctly.', () => {
+  //     const path = parsePath('M 100 100 L 100 100');
+  //     expect(path.currentPath?.type).toEqual(LineCurve.TYPE);
+  //     expect(path.subPaths.length).toEqual(1);
+  //     // expect((path.subPaths[0].curves[0] as LineCurve).toEqual(1);
+  //   });
+  // });
 });
diff --git a/packages/core/examples/main.ts b/packages/core/examples/main.ts
@@ -1,4 +1,12 @@
-import { Canvas, ImageExporter, Rect, Polyline, Circle, Ellipse } from '../src';
+import {
+  Canvas,
+  ImageExporter,
+  Rect,
+  Polyline,
+  Path,
+  Circle,
+  Ellipse,
+} from '../src';
 
 const $canvas = document.getElementById('canvas') as HTMLCanvasElement;
 const resize = (width: number, height: number) => {
@@ -18,6 +26,49 @@ const canvas = await new Canvas({
   // shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
 }).initialized;
 
+const svg = {
+  circle: 'M40,0A40,40 0 1,1 0,-40A40,40 0 0,1 40,0Z',
+  triangle: `M${[0, 1, 2]
+    .map(
+      (i) =>
+        `${Math.sin((i / 3) * 2 * Math.PI)},${-Math.cos(
+          (i / 3) * 2 * Math.PI,
+        )}`,
+    )
+    .join('L')}Z`,
+  square: `M1,1L-1,1L-1,-1L1,-1Z`,
+  pentagon: `M${[0, 1, 2, 3, 4]
+    .map(
+      (i) =>
+        `${Math.sin((i / 5) * 2 * Math.PI)},${-Math.cos(
+          (i / 5) * 2 * Math.PI,
+        )}`,
+    )
+    .join('L')}Z`,
+  hexagon: `M${[0, 1, 2, 3, 4, 5]
+    .map(
+      (i) =>
+        `${Math.sin((i / 6) * 2 * Math.PI)},${-Math.cos(
+          (i / 6) * 2 * Math.PI,
+        )}`,
+    )
+    .join('L')}Z`,
+  star: `M${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+    .map(
+      (i) =>
+        `${Math.sin((i / 10) * 2 * Math.PI) * (i % 2 === 1 ? 0.5 : 1)},${
+          -Math.cos((i / 10) * 2 * Math.PI) * (i % 2 === 1 ? 0.5 : 1)
+        }`,
+    )
+    .join('L')}Z`,
+  plus: `M4,1L1,1L1,4L-1,4L-1,1L-4,1L-4,-1L-1,-1L-1,-4L1,-4L1,-1L4,-1Z`,
+};
+
+const path = new Path({
+  d: svg.hexagon,
+});
+canvas.appendChild(path);
+
 // const polyline1 = new Polyline({
 //   points: [
 //     [256, 100],
@@ -53,22 +104,22 @@ const canvas = await new Canvas({
 
 // console.log(svg);
 
-const rect2 = new Rect({
-  x: 256,
-  y: 100,
-  width: 100,
-  height: 100,
-  fill: 'black',
-  fillOpacity: 0.5,
-  stroke: 'red',
-  strokeWidth: 10,
-  dropShadowBlurRadius: 10,
-  dropShadowColor: 'black',
-  dropShadowOffsetX: 10,
-  dropShadowOffsetY: 10,
-  strokeDasharray: [5, 5],
-});
-canvas.appendChild(rect2);
+// const rect2 = new Rect({
+//   x: 256,
+//   y: 100,
+//   width: 100,
+//   height: 100,
+//   fill: 'black',
+//   fillOpacity: 0.5,
+//   stroke: 'red',
+//   strokeWidth: 10,
+//   dropShadowBlurRadius: 10,
+//   dropShadowColor: 'black',
+//   dropShadowOffsetX: 10,
+//   dropShadowOffsetY: 10,
+//   strokeDasharray: [5, 5],
+// });
+// canvas.appendChild(rect2);
 
 // const circle = new Circle({
 //   cx: 350,

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -37,14 +37,16 @@
   },
   "dependencies": {
     "@antv/g-device-api": "^1.6.12",
+    "@antv/util": "^3.3.10",
     "@loaders.gl/core": "^4.2.2",
     "@loaders.gl/images": "^4.2.2",
     "@pixi/math": "^7.4.2",
     "bezier-easing": "^2.1.0",
     "d3-color": "^3.1.0",
     "eventemitter3": "^5.0.1",
     "gl-matrix": "^3.4.3",
-    "rbush": "^3.0.1"
+    "rbush": "^3.0.1",
+    "svg-path-sdf": "^1.1.3"
   },
   "devDependencies": {
     "@types/d3-color": "^3.1.0",

diff --git a/packages/core/src/drawcalls/BatchManager.ts b/packages/core/src/drawcalls/BatchManager.ts
@@ -1,6 +1,6 @@
 import { Buffer, Device, RenderPass } from '@antv/g-device-api';
-import { Drawcall, SDF, ShadowRect, SmoothPolyline } from '.';
-import { Circle, Ellipse, Polyline, Rect, type Shape } from '../shapes';
+import { Drawcall, SDF, SDFPath, ShadowRect, SmoothPolyline } from '.';
+import { Circle, Ellipse, Path, Polyline, Rect, type Shape } from '../shapes';
 import { RenderCache } from '../utils/render-cache';
 
 /**
@@ -17,6 +17,7 @@ SHAPE_DRAWCALL_CTORS.set(Circle, [SDF, SmoothPolyline]);
 SHAPE_DRAWCALL_CTORS.set(Ellipse, [SDF, SmoothPolyline]);
 SHAPE_DRAWCALL_CTORS.set(Rect, [ShadowRect, SDF, SmoothPolyline]);
 SHAPE_DRAWCALL_CTORS.set(Polyline, [SmoothPolyline]);
+SHAPE_DRAWCALL_CTORS.set(Path, [SDFPath]);
 
 export class BatchManager {
   /**