Skip to content

Commit

Permalink
docs: update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@mym0404
mym0404 committed May 4, 2024
1 parent c447b7b commit 37e39ce
Showing 1 changed file with 17 additions and 112 deletions.
129 changes: 17 additions & 112 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@
yarn add react-native-pencil-kit
```

Link `PencilKit.framework`
Link `PencilKit.framework` in the Xcode application project settings

![xcode](https://raw.githubusercontent.com/mym0404/image-archive/master/202405040319998.webp)
![xcode](https://raw.githubusercontent.com/mym0404/image-archive/master/202405041628753.webp)

> With Fabric, we should access c++ functions and we should use objective-c++.
> This prevents us from Apple SDK framework module importing and we cannot link PencilKit automatically at now.
Expand All @@ -37,104 +37,7 @@ import PencilKitView, { type PencilKitRef, type PencilKitTool } from 'react-nati
```

> [!NOTE]
> You can expand to show full example!
<details>
<summary>Full Example</summary>
```tsx
const allPens = [
'pen',
'pencil',
'marker',
'crayon',
'monoline',
'watercolor',
'fountainPen',
] satisfies PencilKitTool[];

const allErasers = [
'eraserBitmap',
'eraserVector',
'eraserFixedWidthBitmap',
] satisfies PencilKitTool[];

function getRandomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);

return 'rgb(' + r + ',' + g + ',' + b + ')';
}

export default function App() {
const ref = useRef<PencilKitRef>(null);

const path = `${DocumentDirectoryPath}/drawing.dat`;

return (
<View style={{ width: '100%', height: '100%' }}>
<PencilKitView
ref={ref}
style={{ flex: 1 }}
alwaysBounceVertical={false}
alwaysBounceHorizontal={false}
drawingPolicy={'anyinput'}
backgroundColor={'#aaaaff22'}
/>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
gap: 4,
padding: 8,
paddingBottom: 120,
}}
>
<Btn onPress={() => ref.current?.showToolPicker()} text={'show'} />
<Btn onPress={() => ref.current?.hideToolPicker()} text={'hide'} />
<Btn onPress={() => ref.current?.clear()} text={'clear'} />
<Btn onPress={() => ref.current?.undo()} text={'undo'} />
<Btn onPress={() => ref.current?.redo()} text={'redo'} />
<Btn onPress={() => ref.current?.saveDrawing(path).then(console.log)} text={'save'} />
<Btn onPress={() => ref.current?.loadDrawing(path)} text={'load'} />
<Btn onPress={() => ref.current?.getBase64Data().then(console.log)} text={'get base64'} />
<Btn onPress={() => ref.current?.loadBase64Data('')} text={'load base64'} />
{allPens.map((p) => (
<Btn
key={p}
variant={1}
onPress={() =>
ref.current?.setTool({
toolType: p,
width: 3 + Math.random() * 5,
color: getRandomColor(),
})
}
text={p}
/>
))}
{allErasers.map((p) => (
<Btn
variant={2}
key={p}
onPress={() =>
ref.current?.setTool({
toolType: p,
width: 3 + Math.random() * 5,
color: getRandomColor(),
})
}
text={p}
/>
))}
</View>
</View>
);
}
```

</details>
> You can explorer full example! [Full Example](https://github.com/mym0404/react-native-pencil-kit/blob/main/example/src/App.tsx)
## Props

Expand All @@ -158,18 +61,20 @@ export default function App() {
## Commands


| Method | Description |
|---------------------------------------------------------------------------------------------|--------------------------------------------------------|
| clear() | Clear canvas |
| showToolPicker() | Show Palette |
| hideToolPicker() | Hide Palette |
| redo() | Redo last drawing action |
| undo() | Undo last drawing action |
| saveDrawing: (path: string) => Promise<string>; | Save drawing data into file system, return base64 data |
| loadDrawing: (path: string) => void; | Load drawing data from file system |
| getBase64Data: () => Promise<string>; | Get current drawing data as base64 string form |
| loadBase64Data: (base64: string) => void; | Load base64 drawing data into canvas |
| setTool: (params: { toolType: PencilKitTool; width?: number; color?: ColorValue }) => void; | Set `PencilKitTool` type with width and color |
| Method | Description | Etc |
|------------------------------------------------------------------------------------------|--------------------------------------------------------|------------------------------------------------------------------------------------|
| `clear(): void` | Clear canvas | |
| `showToolPicker(): void` | Show Palette | |
| `hideToolPicker(): void` | Hide Palette | |
| `redo(): void` | Redo last drawing action | |
| `undo(): void` | Undo last drawing action | |
| `saveDrawing(path: string): Promise<string>` | Save drawing data into file system, return base64 data | |
| `getBase64Data(): Promise<string>` | Get current drawing data as base64 string form | |
| `getBase64PngData(options: { scale?: number }): Promise<string>` | Get current drawing data as base64 png form | `scale = 0` means use default `UIScreen.main.scale` |
| `getBase64JpegData(options: { scale?: number; compression?: number }): Promise<string>` | Get current drawing data as base64 jpeg form | `scale = 0` means use default `UIScreen.main.scale`. default compression is `0.93` |
| `loadDrawing(path: string): Promise<void>` | Load drawing data from file system | |
| `loadBase64Data(base64: string): Promise<void>` | Load base64 drawing data into canvas | Use base64 get from `getBase64Data()` |
| `setTool(params: { toolType: PencilKitTool; width?: number; color?: ColorValue }): void` | Set `PencilKitTool` type with width and color | |

## Tools

Expand Down

0 comments on commit 37e39ce

Please sign in to comment.