react-artboard - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #llm #golang #rust #deep-learning #windows #awesome-list #vue #pytorch #ios

react-artboard

(★ 102)

A realistic paint component

파일 탐색기

최종 버전 다운로드 (.zip)

- App.tsx
- index.html
- index.tsx
- style.css
- airbrush.png
- marker.png
- paint.png
- shading.gif
- shading.png
- watercolor.png
- - Artboard.tsx
  - Cursor.tsx
- - cursors.ts
  - pointUtils.ts
- history.ts
- index.ts
.eslintrc.json
.gitignore
.prettierrc
artboard.png
package.json
README.md
tsconfig.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/ascorbic/react-artboard

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-artboard

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install react-artboard

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-artboard

A freeform sketching component for React.
[Try the demo](https://react-artboard.netlify.app/)

![artboard](https://raw.githubusercontent.com/ascorbic/react-artboard/main/artboard.png)

![shading](https://raw.githubusercontent.com/ascorbic/react-artboard/main/images/shading.gif)

react-artboard includes an `Artboard` component and several tools, including a
realistic paintbrush, a marker pen and airbrush, as well as the abstract shading
tool. Tools are implemented as custom hooks, so you can add your own brushes and
other tools.

[Try the demo](https://react-artboard.netlify.app/)

- [react-artboard](#react-artboard)
  - [Installation](#installation)
  - [Usage](#usage)
  - [API](#api)
    - [`Artboard`](#artboard)
      - [Props](#props)
    - [Paintbrush](#paintbrush)
      - [Options](#options)
    - [Shading](#shading)
      - [Options](#options-1)
    - [Watercolor](#watercolor)
      - [Options](#options-2)
    - [Marker pen](#marker-pen)
      - [Options](#options-3)
    - [Airbrush](#airbrush)
      - [Options](#options-4)
  - [Custom brushes](#custom-brushes)
  - [History](#history)
  - [Sources](#sources)

## Installation

```shell
npm install react-artboard
```

## Usage

For a full usage example, see
[this file](https://github.com/ascorbic/react-artboard/blob/main/example/App.tsx).
The simplest usage of the component is like this:

```jsx
import React from "react";
import { useBrush, Artboard } from "react-artboard";
export function App() {
  const brush = useBrush({ color: "#663399", strokeWidth: 40 });

return <Artboard tool={brush} style={{ width: 800, height: 600 }} />;
}
```

You probably want to allow users to change the colors and size of the brush.
Here is an example that uses native `color` and `range` inputs:

```jsx
import React, { useState } from "react";
import { useBrush, Artboard } from "react-artboard";
export function App() {
  const [color, setColor] = useState("#993366");
  const [strokeWidth, setStrokeWidth] = useState(40);
  const brush = useBrush({ color, strokeWidth });

return (
    <main>
      <div>
        <input
          type="color"
          value={color}
          onInput={(evt) => setColor(evt.currentTarget.value)}
        />
        <input
          type="range"
          min={5}
          max={50}
          value={strokeWidth}
          onInput={(evt) => setStrokeWidth(parseInt(evt.currentTarget.value))}
        />
      </div>
      <Artboard tool={brush} style={{ width: 800, height: 600 }} />
    </main>
  );
}
```

You could use a custom component instead of these inputs if you want more
control over them, as long as they return a number for the brush size and a
string for the color.

If you want to export your creations or clear the canvas, you can use the ref
like this:

```jsx
import React, { useState } from "react";
import { useBrush, Artboard } from "react-artboard";
export function App() {
  const [color, setColor] = useState("#993366");
  const [strokeWidth, setStrokeWidth] = useState(40);
  const brush = useBrush({ color, strokeWidth });

const [artboardRef, setArtboardRef] = useState();

return (
    <main>
      <div>
        <button onClick={() => artboardRef?.download()}>Download</button>
        <button onClick={() => artboardRef?.clear()}>Clear</button>
        <input
          type="color"
          value={color}
          onInput={(evt) => setColor(evt.currentTarget.value)}
        />
        <input
          type="range"
          min={5}
          max={50}
          value={strokeWidth}
          onInput={(evt) => setStrokeWidth(parseInt(evt.currentTarget.value))}
        />
      </div>
      <Artboard tool={brush} style={{ width: 800, height: 600 }} />
    </main>
  );
}
```

## API

### `Artboard`

#### Props

- **`tool`**

This is the tool returned by the `useBrush()` hook. You can also implement
  your own tools and pass them in here.

- **`ref`**

This accepts a callback that will be passed a ref that you can use to make the
  following calls:

- **`download`**: `(filename: string, type: string) => void`

Downloads the canvas as an image. You can pass in a filename (default
    "image.png"), and a mimetype (default "image/png"). If you pass an
    unsupported type it will fallback to PNG.

- **`getImageAsDataUri`**: `(type: string) => string | undefined`

Returns the image as a data URI, which can be displayed in an `<img>` tag
    for example.

- **`clear`**: `() => void`

Clears the image

- **`context`**: `CanvasRenderingContext2D | null | undefined`

Canvas rendering context

- **`onStartStroke`**: `(point: Point) => void`

Callback at the start of a stroke

- **`onContinueStroke`**: `(point: Point) => void`

Callback at the continuing of a stroke

- **`onEndStroke`**: `() => void`

Callback at the end of a stroke

### Paintbrush

`useBrush(options)`

![paint](https://raw.githubusercontent.com/ascorbic/react-artboard/main/images/paint.png)

#### Options

- **`color`** A CSS string color.
- **`strokeWidth`** The width of the brush

### Shading

`useShadingBrush()`

This tools is inspired by [some blog posts](#sources), exploring the use of
"neighbour point" sketching. It gives a fun, unusual effect that is similar to
pencil shading. It is highly configurable, giving quite different effects
according to the different parameters.

![shading](https://raw.githubusercontent.com/ascorbic/react-artboard/main/images/shading.png)

#### Options

- **`color`** A CSS string color. _Default: `#000000`_
- **`spreadFactor`** The length of the connecting line. A value of `1` means it
  exactly joins the two points, while `0.5` only covers half the distance. A
  value above `1` gives a "fur" effect as the line extends beyond the points.
  _Default: 0.9_
- **`distanceThreshold`** How near the point needs to be to join, in pixels.
  _Default: 50_
- **`neighbourStrokeWidth`** Width of the stroke joining the points. _Default:
  1_
- **`neighbourColor`** Color of the line joining the points. _Default: `color`
  value with 0.2 alpha_

### Watercolor

`useWatercolor(options)`

![paint](https://raw.githubusercontent.com/ascorbic/react-artboard/main/images/watercolor.png)

#### Options

- **`color`** A CSS string color.
- **`strokeWidth`** The width of the brush

### Marker pen

`useMarker(options)`

![marker](https://raw.githubusercontent.com/ascorbic/react-artboard/main/images/marker.png)

#### Options

- **`color`** A CSS string color.
- **`strokeWidth`** The width of the brush

### Airbrush

`useAirbrush(options)`

![airbrush](https://raw.githubusercontent.com/ascorbic/react-artboard/main/images/airbrush.png)

#### Options

- **`color`** A CSS string color.
- **`strokeWidth`** The width of the brush

## Custom brushes

See the source for `useBrush` to see how to create a brush. It must return an
object, with the following optional callbacks:

- **`startStroke?`**:
  `(point: Point, context: CanvasRenderingContext2D) => void`
- **`continueStroke?`**:
  `(point: Point, context: CanvasRenderingContext2D) => void`
- **`endStroke?`**: `(context: CanvasRenderingContext2D) => void`
- **`cursor?`**: `string` A CSS-compatible string for the cursor to display. You
  can use the `circleCursor()` helper to display a resizable circle for the
  cursor

## History

The `useHistory()` hook allows undo/redo functionality. Pass it a `size` value
to limit the size of the history stack. It returns and object with the
following:

- **`history`**: The `History` object. Pass this to the `Artboard`.
- **`undo()`**: Reverts the image to the previous state.
- **`redo()`**: Move forward in history, if available.
- **`canUndo`**: History is available to undo
- **`canRedo`**: History is available to redo

## Sources

These posts gave inspiration, particularly for the shading tool.

- [Exploring canvas drawing techniques](http://perfectionkills.com/exploring-canvas-drawing-techniques/)
- [Harmony brush adoption in Krita: Sketch](http://lukast.mediablog.sk/log/?p=347)

Inspiration for the watercolor tool:

- [Generative watercolor in Processing](https://sighack.com/post/generative-watercolor-in-processing)
- [How to hack a painting](https://tylerxhobbs.com/essays/2020/how-to-hack-a-painting)

© Copyright [Matt Kane](https://mk.gg)
([@ascorbic](https://github.com/ascorbic)) 2021. MIT Licence