feat: add ghostscript in path rendering test

xiaoiver · Nov 6, 2024 · 2c6b251 · 2c6b251
1 parent ab4ba11
commit 2c6b251
Show file tree

Hide file tree

Showing 12 changed files with 360 additions and 143 deletions.
diff --git a/packages/core/examples/Ghostscript_Tiger.svg b/packages/core/examples/Ghostscript_Tiger.svg
diff --git a/packages/core/examples/main.ts b/packages/core/examples/main.ts
@@ -7,6 +7,8 @@ import {
   Circle,
   Ellipse,
   parsePath,
+  fromSVGElement,
+  deserializeNode,
 } from '../src';
 
 const $canvas = document.getElementById('canvas') as HTMLCanvasElement;
@@ -23,8 +25,8 @@ resize(window.innerWidth, window.innerHeight);
 
 const canvas = await new Canvas({
   canvas: $canvas,
-  renderer: 'webgpu',
-  shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
+  // renderer: 'webgpu',
+  // shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
 }).initialized;
 
 // const svg = {
@@ -65,36 +67,76 @@ const canvas = await new Canvas({
 //   plus: `M4,1L1,1L1,4L-1,4L-1,1L-4,1L-4,-1L-1,-1L-1,-4L1,-4L1,-1L4,-1Z`,
 // };
 
+// const rect = new Rect({
+//   x: 0,
+//   y: 0,
+//   width: 100,
+//   height: 100,
+//   fill: 'red',
+//   stroke: 'black',
+//   strokeWidth: 2,
+// });
+// canvas.appendChild(rect);
+// rect.position.x = 100;
+// rect.position.y = 100;
+
 const polyline = new Polyline({
   points: [
+    [10, 10],
+    [90, 10],
+    [90, 90],
+    [10, 90],
+    [10, 10],
+    [NaN, NaN],
     [0, 0],
-    [100, 0],
+    [0, 100],
     [100, 100],
-    // [NaN, NaN],
-    [200, 0],
-    [300, 0],
-    [300, 100],
+    [100, 0],
+    [0, 0],
   ],
+  // points: [
+  //   [10, 10],
+  //   [100, 0],
+  //   [NaN, NaN],
+  //   [100, 100],
+  //   [200, 100],
+  // ],
   stroke: 'black',
-  strokeWidth: 2,
+  strokeWidth: 8,
+  strokeLinecap: 'round',
   fill: 'none',
 });
 canvas.appendChild(polyline);
-// polyline.position.x = 100;
-// polyline.position.y = 100;
+polyline.position.x = 100;
+polyline.position.y = 100;
 
-// const ring = new Path({
-//   // d: 'M 50 10 A 40 40 0 1 0 50 90 A 40 40 0 1 0 50 10 Z M 50 30 A 20 20 0 1 1 50 70 A 20 20 0 1 1 50 30 Z',
-//   d: 'M 0 0 L 100 0 L 100 100 L 0 100 Z',
-//   fill: 'black',
-//   // opacity: 0.5,
-//   strokeWidth: 10,
-//   stroke: 'red',
-//   batchable: false,
-// });
-// ring.position.x = 100;
-// ring.position.y = 100;
-// canvas.appendChild(ring);
+fetch('/Ghostscript_Tiger.svg').then(async (res) => {
+  const svg = await res.text();
+
+  const $container = document.createElement('div');
+  $container.innerHTML = svg;
+
+  const group = await deserializeNode(
+    fromSVGElement($container.children[0].children[0] as SVGElement),
+  );
+  console.log(group);
+
+  canvas.appendChild(group);
+});
+
+const ring = new Path({
+  // d: 'M 50 10 A 40 40 0 1 0 50 90 A 40 40 0 1 0 50 10 Z M 50 30 A 20 20 0 1 1 50 70 A 20 20 0 1 1 50 30 Z',
+  d: 'M 10 10 L 90 10 L 90 90 L 10 90 Z M 0 0 L 0 100 L 100 100 L 100 0 Z',
+  // d: 'M 0 0 L 100 0 L 100 100 L 0 100 Z',
+  fill: 'black',
+  // opacity: 0.5,
+  // strokeWidth: 10,
+  stroke: 'red',
+  batchable: false,
+});
+ring.position.x = 200;
+ring.position.y = 200;
+canvas.appendChild(ring);
 
 canvas.render();