@jiujue/react-canvas-fiber 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -0
- package/dist/index.cjs +1452 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +170 -0
- package/dist/index.d.ts +170 -0
- package/dist/index.js +1443 -0
- package/dist/index.js.map +1 -0
- package/package.json +48 -0
package/README.md
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# react-canvas-fiber
|
|
2
|
+
|
|
3
|
+
基于 `react-reconciler` 的 Canvas 自定义渲染器（2D），并集成 Yoga Flexbox 布局。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
发布到 npm 后可直接安装：
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @jiujue/react-canvas-fiber
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
本仓库内通过 pnpm workspace 引用（见 demo）。
|
|
14
|
+
|
|
15
|
+
## 使用
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { Canvas, Rect, Text, View } from '@jiujue/react-canvas-fiber'
|
|
19
|
+
|
|
20
|
+
export function Example() {
|
|
21
|
+
return (
|
|
22
|
+
<Canvas width={600} height={400} dpr={devicePixelRatio} clearColor="#0b1020">
|
|
23
|
+
<View style={{ width: 600, height: 400, padding: 16, flexDirection: 'column', gap: 12 }}>
|
|
24
|
+
<Text text="Hello" style={{ fontSize: 24, fontWeight: 700 }} color="#e6edf7" />
|
|
25
|
+
<Rect style={{ width: 180, height: 44 }} borderRadius={10} fill="#2b6cff" />
|
|
26
|
+
</View>
|
|
27
|
+
</Canvas>
|
|
28
|
+
)
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## 已支持的节点
|
|
33
|
+
|
|
34
|
+
- `View`：布局容器，可设置 `background/borderRadius`
|
|
35
|
+
- `Rect`：圆角矩形（fill/stroke/lineWidth/borderRadius）
|
|
36
|
+
- `Text`：文本（text/color + font style 子集）
|
|
37
|
+
|
|
38
|
+
## 布局（Yoga 子集）
|
|
39
|
+
|
|
40
|
+
主要通过 `style` 提供：
|
|
41
|
+
|
|
42
|
+
- 尺寸：`width/height/min/max`
|
|
43
|
+
- Flex：`flexDirection/justifyContent/alignItems/flexGrow/flexShrink/flexBasis/flexWrap/gap`
|
|
44
|
+
- 边距：`padding*`、`margin*`
|
|
45
|
+
- 定位：`position/top/right/bottom/left`
|
|
46
|
+
|
|
47
|
+
## 实现说明
|
|
48
|
+
|
|
49
|
+
详见 [docs/ARCHITECTURE.md](../../docs/ARCHITECTURE.md)。
|
|
50
|
+
|
|
51
|
+
## 参与贡献
|
|
52
|
+
|
|
53
|
+
见仓库根目录的 [CONTRIBUTING.md](../../CONTRIBUTING.md)。
|
|
54
|
+
|
|
55
|
+
## License
|
|
56
|
+
|
|
57
|
+
MIT，见 [LICENSE](../../LICENSE)。
|