)
}
```
-### 跨组件状态访问
+### Cross-component State Access
-ReactFabricProvider 是一个上下文提供程序，允许您从组件树中的任何位置访问流的内部状态，例如子组件，甚至在 ReactFabric 之外 元件。它通常用于应用程序的顶层。
-在这种情况下，您可能需要使用 ReactFabricProvider 组件
+ReactFabricProvider is a context provider that allows you to access the internal state of the flow from anywhere in the component tree, such as child components, or even outside the ReactFabric component. It is typically used at the top level of the application.
+In this case, you may need to use the ReactFabricProvider component
```tsx
import { ReactFabricProvider, useReactFabric } from '@cs-open/react-fabric'
@@ -309,20 +310,20 @@ function App() {
return (
- {/* 画布内容 */}
+ {/* Canvas content */}
)
}
function Toolbar() {
const { zoomIn, zoomOut, resetViewport } = useReactFabric()
- // 可以在 ReactFabric 外部访问状态
+ // Can access state outside ReactFabric
}
```
-## 🎨 高级用法
+## 🎨 Advanced Usage
-### 受控模式
+### Controlled Mode
```tsx
import { useState } from 'react'
@@ -345,7 +346,7 @@ function ControlledCanvas() {
}
```
-### 非受控模式
+### Uncontrolled Mode
```tsx
import { ReactFabric, Rect, Group } from '@cs-open/react-fabric'
@@ -361,7 +362,7 @@ function UncontrolledCanvas() {
}
```
-### DOM 集成
+### DOM Integration
```tsx
import { ReactFabric, Rect } from '@cs-open/react-fabric'
@@ -370,16 +371,16 @@ function CanvasWithDOM() {
return (
-