@jiujue/react-canvas-fiber 1.1.8 → 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 react-canvas-fiber contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,18 +1,20 @@
 # react-canvas-fiber
 
-基于 `react-reconciler` 的 Canvas 自定义渲染器（2D），并集成 Yoga Flexbox 布局。
+[中文](./README.zh.md.md) | English
 
-## 安装
+A Canvas custom renderer (2D) based on `react-reconciler`, integrated with Yoga Flexbox layout.
 
-发布到 npm 后可直接安装：
+## Installation
+
+Once published to npm, you can install it directly:
 
 ```bash
 pnpm add @jiujue/react-canvas-fiber
 ```
 
-本仓库内通过 pnpm workspace 引用（见 demo）。
+Inside this monorepo, it is referenced via pnpm workspace (see the demo).
 
-## 使用
+## Usage
 
 ```tsx
 import { Canvas, Rect, Text, View } from '@jiujue/react-canvas-fiber'
@@ -29,29 +31,29 @@ export function Example() {
 }
 ```
 
-## 已支持的节点
+## Supported Nodes
 
-- `View`：布局容器，可设置 `background/borderRadius`
-- `Rect`：圆角矩形（fill/stroke/lineWidth/borderRadius）
-- `Text`：文本（text/color + font style 子集）
+- `View`: layout container, supports `background/borderRadius`
+- `Rect`: rounded rectangle (fill/stroke/lineWidth/borderRadius)
+- `Text`: text (`text/color` + a subset of font styles)
 
-## 布局（Yoga 子集）
+## Layout (Yoga Subset)
 
-主要通过 `style` 提供：
+Provided mainly via `style`:
 
-- 尺寸：`width/height/min/max`
-- Flex：`flexDirection/justifyContent/alignItems/flexGrow/flexShrink/flexBasis/flexWrap/gap`
-- 边距：`padding*`、`margin*`
-- 定位：`position/top/right/bottom/left`
+- Size: `width/height/min/max`
+- Flex: `flexDirection/justifyContent/alignItems/flexGrow/flexShrink/flexBasis/flexWrap/gap`
+- Spacing: `padding*`, `margin*`
+- Positioning: `position/top/right/bottom/left`
 
-## 实现说明
+## Implementation Notes
 
-详见 [docs/ARCHITECTURE.md](../../docs/ARCHITECTURE.md)。
+See [docs/ARCHITECTURE.md](../../docs/ARCHITECTURE.md).
 
-## 参与贡献
+## Contributing
 
-见仓库根目录的 [CONTRIBUTING.md](../../CONTRIBUTING.md)。
+See the repo root [CONTRIBUTING.md](../../CONTRIBUTING.md).
 
 ## License
 
-MIT，见 [LICENSE](../../LICENSE)。
+MIT. See [LICENSE](../../LICENSE).

package/README.zh.md

@@ -0,0 +1,59 @@
+# react-canvas-fiber
+
+中文 | [English](./README.en.md)
+
+基于 `react-reconciler` 的 Canvas 自定义渲染器（2D），并集成 Yoga Flexbox 布局。
+
+## 安装
+
+发布到 npm 后可直接安装：
+
+```bash
+pnpm add @jiujue/react-canvas-fiber
+```
+
+本仓库内通过 pnpm workspace 引用（见 demo）。
+
+## 使用
+
+```tsx
+import { Canvas, Rect, Text, View } from '@jiujue/react-canvas-fiber'
+
+export function Example() {
+	return (
+		<Canvas width={600} height={400} dpr={devicePixelRatio} clearColor="#0b1020">
+			<View style={{ width: 600, height: 400, padding: 16, flexDirection: 'column', gap: 12 }}>
+				<Text text="Hello" style={{ fontSize: 24, fontWeight: 700 }} color="#e6edf7" />
+				<Rect style={{ width: 180, height: 44 }} borderRadius={10} fill="#2b6cff" />
+			</View>
+		</Canvas>
+	)
+}
+```
+
+## 已支持的节点
+
+- `View`：布局容器，可设置 `background/borderRadius`
+- `Rect`：圆角矩形（fill/stroke/lineWidth/borderRadius）
+- `Text`：文本（text/color + font style 子集）
+
+## 布局（Yoga 子集）
+
+主要通过 `style` 提供：
+
+- 尺寸：`width/height/min/max`
+- Flex：`flexDirection/justifyContent/alignItems/flexGrow/flexShrink/flexBasis/flexWrap/gap`
+- 边距：`padding*`、`margin*`
+- 定位：`position/top/right/bottom/left`
+
+## 实现说明
+
+详见 [docs/ARCHITECTURE.md](../../docs/ARCHITECTURE.md)。
+
+## 参与贡献
+
+见仓库根目录的 [CONTRIBUTING.md](../../CONTRIBUTING.md)。
+
+## License
+
+MIT，见 [LICENSE](../../LICENSE)。