react-konvaを使ってみる（基本編）

備忘録。使い方や知ったことについて書きますが詳細説明は省くことがあります。

---

概要

konvaという2Dグラフィックを描くことができるライブラリをreactの書き方ができるようしたのがreact-konvaライブラリです。今回は導入と基本的な書き方を書いていきます。

環境

	version
React	17.0.2
Konva	17.0.2-5
react-konva	8.1.3

reactのtypescriptのテンプレートから作成します。

npx create-react-app --template typescript myapp

導入

# npm の場合
npm install react-konva konva --save
# yarnの場合
yarn add react-konva konva

概念

ここでは説明しません。
知りたい場合はほかの記事やkonvaについて調べてください。

基本的な使い方

app.tsx

import { Stage, Layer, Rect } from 'react-konva';

function App() {
  return (
    <Stage width={500} height={500}>
      <Layer>
        <Rect fill='red' width={300} height={200} />
      </Layer>
    </Stage>
  );
}

export default App;

これが最低限のコードです。赤い四角がありますが画面のサイズもわかりません。

・<Stage>・・・描画の土台。width、heightは画面のサイズ。可変にするとエラーや予期しない動作をするので固定値にしましょう。
・<Layer>・・・名前の通り。
・<Rect>・・・描画用タグ。この部分が描画される。

注意：<Stage>、<Layer>は必須です。どれだけ描画部分を記述しても何も表示されません。ただし、警告は出ますがエラーとしてページが停止することはありません。
<Stage>、<Layer>が一つでもある場合、その外に<Rect>等を記述するとコマンドプロンプト上は正常に動作している判断し、警告も出ません。気を付けてください。

種類

描画用タグはkonva公式サイトには全部で17種あります。
今回は基本的な四角を描画する<Rect>、真円を描画する<Circle>、文字列を描画する<Text>、画像を描画する<Image>について使用方法を書いていきます。

Rect

app.tsx

import { Stage, Layer, Rect } from 'react-konva';

function App() {
  return (
    <Stage width={500} height={500}>
      <Layer>
　　　　{/*枠です。見やすくするためにあります。*/}
        <Rect stroke='black' strokeWidth={1} x={0} y={0} width={500} height={500} />
        <Rect fill='red' x={100} y={100} width={300} height={200} />
      </Layer>
    </Stage>
  );
}

export default App;

・fill・・・色
・x、y・・・座標
・width、height・・・四角のサイズ

すべてのタグに共通しますがx、yの座標は<Stage>のサイズを超える座標に置くと見えなくなったり、途中で途切れたりします。

Circle

app.tsx

import { Stage, Layer, Circle  } from 'react-konva';

function App() {
  return (
    <Stage width={500} height={500}>
      <Layer>
　　　　{/*枠です。見やすくするためにあります。*/}
        <Rect stroke='black' strokeWidth={1} x={0} y={0} width={500} height={500} />
        <Circle fill='red' x={200} y={200} radius={150} />
      </Layer>
    </Stage>
  );
}

export default App;

・fill・・・色
・x、y・・・中心座標
・radius・・・半径

Text

app.tsx

import { Stage, Layer, Text} from 'react-konva';

function App() {
  return (
    <Stage width={500} height={500}>
      <Layer>
　　　　{/*枠です。見やすくするためにあります。*/}
        <Rect stroke='black' strokeWidth={1} x={0} y={0} width={500} height={500} />
          <Text text='aaaあああ' width={300} height={200} />
      </Layer>
    </Stage>
  );
}

export default App;

・text・・・テキスト
・width、height・・・文字を入れる枠のサイズ。テキストボックスのサイズ。

Image

app.tsx

import { Stage, Layer, Image} from 'react-konva';
import logo from './logo.svg';

function App() {
  let img = new window.Image();
  img.src = logo;
  return (
    <Stage width={500} height={500}>
      <Layer>
　　　　{/*枠です。見やすくするためにあります。*/}
        <Rect stroke='black' strokeWidth={1} x={0} y={0} width={500} height={500} />
          <Image image={img} width={img.width} height={img.height} />
      </Layer>
    </Stage>
  );
}

export default App;

・image・・・画像。型に注意が必要。
・width、height・・・画像サイズ。基本的には画像のサイズをそのまま使うのがいいが別途に設定すると横に引き延ばした画像になる。

終わりに

参考サイト

react-konvaライブラリが使って便利だったので使用法などをメモ

konva公式サイト