feat(basic): radius for Rect

dromara · Jun 5, 2024 · 6c8cf48 · 6c8cf48
1 parent d96c670
commit 6c8cf48
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 12 deletions.
diff --git a/examples/main.ts b/examples/main.ts
@@ -85,9 +85,12 @@ const app = createApp(document.querySelector('#milestone'))
 // circle.animate(nc.move(100, 100)(120))
 
 const scene = nc.createScene(
-  use(nc.createCircle(100, {
-    x: 0,
-    y: 0,
+  use(nc.createRect(100, 100, {
+    x: 100,
+    y: 100,
+    style: {
+      radius: 10
+    }
   })).animate(nc.fadeIn()(1))
 )
 

diff --git a/packages/basic/src/widgets/rect.ts b/packages/basic/src/widgets/rect.ts
@@ -3,6 +3,27 @@ import { changed, def, defineWidgetBuilder } from '@newcar/core'
 import type { Path, PathOptions, PathStyle } from './path'
 import { createPath } from './path'
 
+function mapRadius(source: RectStyle['radius']): [number, number, number, number, number, number, number, number] {
+  const target: [number, number, number, number, number, number, number, number] = [0, 0, 0, 0, 0, 0, 0, 0]
+  if (typeof source === 'number') {
+    target.fill(source, 0, 8)
+  }
+  else if (source.length === 2) {
+    target.fill(source[0], 0, 4)
+      .fill(source[1], 4, 8)
+  }
+  else if (source.length === 4) {
+    target.fill(source[0], 0, 2)
+      .fill(source[1], 2, 4)
+      .fill(source[2], 4, 6)
+      .fill(source[3], 6, 8)
+  }
+  else {
+    return source
+  }
+  return target
+}
+
 export interface RectOptions extends PathOptions {
   style?: RectStyle
 }
@@ -36,22 +57,33 @@ export function createRect(width: number, length: number, options: RectOptions)
 
     const path = createPath(options)(ck)
 
-    const rect = ck.LTRBRect(0, 0, widthProp.value * path.progress.value, lengthProp.value * path.progress.value)
-    path.path.addRect(rect)
+    const style = {
+      ...path.style,
+      radius: def(options.style.radius ?? 0),
+    }
+
+    path.path.addRRect(new Float32Array([
+      0,
+      0,
+      widthProp.value * path.progress.value,
+      lengthProp.value * path.progress.value,
+      ...mapRadius(style.radius.value),
+    ]))
 
     function reset() {
       path.path.rewind()
-      rect.set([0, 0, widthProp.value * path.progress.value, lengthProp.value * path.progress.value])
-      path.path.addRect(rect)
+      path.path.addRRect(new Float32Array([
+        0,
+        0,
+        widthProp.value * path.progress.value,
+        lengthProp.value * path.progress.value,
+        ...mapRadius(style.radius.value),
+      ]))
     }
 
     changed(widthProp, reset)
     changed(lengthProp, reset)
-
-    const style = {
-      ...path.style,
-      radius: def(options.style.radius ?? 0),
-    }
+    changed(style.radius, reset)
 
     return {
       ...path,