chore: update hand-drawn style drawing docs

xiaoiver · Nov 11, 2024 · 5a24a03 · 5a24a03
1 parent 6d7e569
commit 5a24a03
Show file tree

Hide file tree

Showing 23 changed files with 798 additions and 369 deletions.
diff --git a/packages/core/examples/main.ts b/packages/core/examples/main.ts
@@ -1,6 +1,7 @@
 import {
   Canvas,
   Rect,
+  RoughCircle,
   RoughRect,
   Path,
   fromSVGElement,
@@ -25,44 +26,20 @@ const canvas = await new Canvas({
   // shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
 }).initialized;
 
-// fetch(
-//   '/Ghostscript_Tiger.svg',
-//   // '/photo-camera.svg',
-// ).then(async (res) => {
-//   const svg = await res.text();
-
-//   const $container = document.createElement('div');
-//   $container.innerHTML = svg;
-
-//   const $svg = $container.children[0];
-
-//   for (const child of $svg.children) {
-//     const group = await deserializeNode(fromSVGElement(child as SVGElement));
-//     canvas.appendChild(group);
-//   }
-// });
-
-//   const path = new Path({
-//     d,
-//     fill: 'none',
-//     strokeWidth: 2,
-//     stroke: 'red',
-//   });
-//   canvas.appendChild(path);
-// });
-
-// const rect = new Rect({
-//   x: 0,
-//   y: 0,
-//   width: 100,
-//   height: 100,
-//   fill: 'black',
-//   strokeWidth: 2,
-//   stroke: 'red',
-// });
-// canvas.appendChild(rect);
+const circle = new RoughCircle({
+  cx: 0,
+  cy: 0,
+  r: 50,
+  fill: 'black',
+  strokeWidth: 2,
+  stroke: 'red',
+  seed: 1,
+  roughness: 1,
+  fillStyle: 'dots',
+});
+canvas.appendChild(circle);
 
-const ring = new RoughRect({
+const rect = new RoughRect({
   x: 0,
   y: 0,
   width: 100,
@@ -74,15 +51,15 @@ const ring = new RoughRect({
   roughness: 1,
   fillStyle: 'dots',
 });
-ring.position.x = 200;
-ring.position.y = 200;
-canvas.appendChild(ring);
+rect.position.x = 200;
+rect.position.y = 200;
+canvas.appendChild(rect);
 
-ring.addEventListener('pointerenter', () => {
-  ring.fill = 'blue';
+rect.addEventListener('pointerenter', () => {
+  rect.fill = 'blue';
 });
-ring.addEventListener('pointerleave', () => {
-  ring.fill = 'black';
+rect.addEventListener('pointerleave', () => {
+  rect.fill = 'black';
 });
 
 // setTimeout(() => {

diff --git a/packages/core/src/drawcalls/BatchManager.ts b/packages/core/src/drawcalls/BatchManager.ts
@@ -6,6 +6,7 @@ import {
   Path,
   Polyline,
   Rect,
+  RoughCircle,
   RoughRect,
   type Shape,
 } from '../shapes';
@@ -28,6 +29,12 @@ SHAPE_DRAWCALL_CTORS.set(Rect, [ShadowRect, SDF, SmoothPolyline]);
 SHAPE_DRAWCALL_CTORS.set(Polyline, [SmoothPolyline]);
 // SHAPE_DRAWCALL_CTORS.set(Path, [SDFPath]);
 SHAPE_DRAWCALL_CTORS.set(Path, [Mesh, SmoothPolyline]);
+// @ts-expect-error Property 'getGeometryBounds' is missing in type 'RoughCircle'
+SHAPE_DRAWCALL_CTORS.set(RoughCircle, [
+  Mesh, // fillStyle === 'solid'
+  SmoothPolyline, // fill
+  SmoothPolyline, // stroke
+]);
 // @ts-expect-error Property 'getGeometryBounds' is missing in type 'RoughRect'
 SHAPE_DRAWCALL_CTORS.set(RoughRect, [
   ShadowRect,

diff --git a/packages/core/src/drawcalls/Mesh.ts b/packages/core/src/drawcalls/Mesh.ts
@@ -18,7 +18,7 @@ import {
   Texture,
   StencilOp,
 } from '@antv/g-device-api';
-import { Path, RoughRect, TesselationMethod } from '../shapes';
+import { Path, RoughCircle, RoughRect, TesselationMethod } from '../shapes';
 import { Drawcall, ZINDEX_FACTOR } from './Drawcall';
 import { vert, frag, Location } from '../shaders/mesh';
 import { isString, paddingMat3, triangulate } from '../utils';
@@ -91,7 +91,10 @@ export class Mesh extends Drawcall {
     if (instance instanceof Path) {
       rawPoints = instance.points;
       tessellationMethod = instance.tessellationMethod;
-    } else if (instance instanceof RoughRect) {
+    } else if (
+      instance instanceof RoughCircle ||
+      instance instanceof RoughRect
+    ) {
       rawPoints = instance.fillPathPoints;
       tessellationMethod = TesselationMethod.EARCUT;
     }

diff --git a/packages/core/src/drawcalls/SmoothPolyline.ts b/packages/core/src/drawcalls/SmoothPolyline.ts
@@ -23,6 +23,7 @@ import {
   Path,
   Polyline,
   Rect,
+  RoughCircle,
   RoughRect,
   Shape,
   hasValidStroke,
@@ -45,6 +46,7 @@ export class SmoothPolyline extends Drawcall {
   static check(shape: Shape) {
     return (
       shape instanceof Polyline ||
+      shape instanceof RoughCircle ||
       shape instanceof RoughRect ||
       ((shape instanceof Rect ||
         shape instanceof Circle ||
@@ -80,6 +82,7 @@ export class SmoothPolyline extends Drawcall {
     if (
       instance instanceof Polyline ||
       instance instanceof Path ||
+      instance instanceof RoughCircle ||
       instance instanceof RoughRect
     ) {
       return this.pointsBuffer.length / strideFloats - 3;
@@ -101,7 +104,8 @@ export class SmoothPolyline extends Drawcall {
     this.shapes.forEach((shape: Polyline) => {
       const { pointsBuffer: pBuffer, travelBuffer: tBuffer } = updateBuffer(
         shape,
-        this.index === 3,
+        (shape instanceof RoughCircle && this.index === 2) ||
+          (shape instanceof RoughRect && this.index === 3),
       );
 
       pointsBuffer.push(...pBuffer);
@@ -475,7 +479,10 @@ export class SmoothPolyline extends Drawcall {
       0,
     ];
 
-    if (instance instanceof RoughRect && this.index === 2) {
+    if (
+      (instance instanceof RoughCircle && this.index === 1) ||
+      (instance instanceof RoughRect && this.index === 2)
+    ) {
       u_StrokeColor = [fr / 255, fg / 255, fb / 255, fo];
       u_Opacity[2] = fillOpacity;
     }
@@ -534,7 +541,7 @@ export function updateBuffer(object: Shape, useRoughStroke = true) {
   let points: number[] = [];
   // const triangles: number[] = [];
 
-  if (object instanceof RoughRect) {
+  if (object instanceof RoughCircle || object instanceof RoughRect) {
     const { strokePoints, fillPoints } = object;
     points = (useRoughStroke ? strokePoints : fillPoints)
       .map((subPathPoints, i) => {