> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pensiv.so/llms.txt
> Use this file to discover all available pages before exploring further.

# キャンバスの描画ツール

> キャンバスに図形と線・矢印、フリーハンドの線を描き、図形のプロパティパネルで塗りと線と手描き感を整える方法です。

キャンバスに置かれるものはカードだけではありません。二人の人物を矢印でつなぎ、第三部に入る場面を四角形で囲んでおけば、カードを動かさなくても物語の骨組みが見えてきます。

## 六つのツール

画面下のツールバーの区切り線の右に、四角形、楕円、直線、矢印、ペン、テキストが置かれています。`R`、`O`、`L`、`A`、`P`、`T` キーでも直接つかめます。

ツールを選ぶとキャンバスの上に描画の層がかぶさってカードをつかめなくなり、ツールバーの上に `Esc` 描画を終了の案内が出ます。図形は好きな大きさまで引いて描き、テキストは置きたい場所を一度押せば済みます。ひとつ描くとすぐ選択状態に戻りますが、ペンだけは例外で続けて引けます。描きかけを取り消すときも、描画を終えるときも `Esc` です。

<div className="app-window block dark:hidden">
  <img src="https://mintcdn.com/raumlabsinc/RpnImTRrZig0qdL9/images/ja/structure/canvas-drawing--01.png?fit=max&auto=format&n=RpnImTRrZig0qdL9&q=85&s=0a67d624a47f9709667b12f19904932f" alt="ツールバーで四角形ツールが押されたままキャンバスの上をドラッグしていて点線のプレビューが出ており、ツールバーのすぐ上に「Esc 描画を終了」の案内が見える。" width="2880" height="1800" data-path="images/ja/structure/canvas-drawing--01.png" />
</div>

<div className="app-window hidden dark:block">
  <img src="https://mintcdn.com/raumlabsinc/RpnImTRrZig0qdL9/images/ja/structure/canvas-drawing--01-dark.png?fit=max&auto=format&n=RpnImTRrZig0qdL9&q=85&s=bb8ef56d5c30c8c22ecea1f05dea8612" alt="ツールバーで四角形ツールが押されたままキャンバスの上をドラッグしていて点線のプレビューが出ており、ツールバーのすぐ上に「Esc 描画を終了」の案内が見える。" width="2880" height="1800" data-path="images/ja/structure/canvas-drawing--01-dark.png" />
</div>

<p className="app-caption">ツールを選んで引くと描かれます。Esc で抜けます。</p>

## 図形のプロパティ

描いたものをひとつだけ選ぶと、キャンバスの上に図形のプロパティパネルが出ます。見出しをつかんで引けば場所を移せ、右の山形でパネルを折りたたむとパネルを展開をします。項目は選んだ図形によって変わります。

| 項目                 | 出てくる図形       |
| ------------------ | ------------ |
| 線の色                | すべて          |
| 配置 / 縦位置 / フォントサイズ | ペンを除くすべて     |
| 線の太さ               | テキストを除くすべて   |
| 線の種類 / 線・矢印        | 直線、矢印        |
| 手描き感               | 四角形、楕円、直線、矢印 |
| 塗り色 / 塗りパターン       | 四角形、楕円       |

線の色は、既定に七色を足した八マスです。手描き感は三段階で、定規で引いたようにまっすぐな線から、二度なぞったようにけばだった線まで動きます。線・矢印は、まっすぐな線と、ゆるやかな曲線と、直角に折れる線の三つです。新しく引いた線と矢印は曲線から始まります。塗り色で色を選ぶとその下に塗りパターンが現れて斜線・クロスハッチ・べた塗りを出し、塗りなしに戻すと消えます。

<div className="app-window block dark:hidden">
  <img src="https://mintcdn.com/raumlabsinc/RpnImTRrZig0qdL9/images/ja/structure/canvas-drawing--02.png?fit=max&auto=format&n=RpnImTRrZig0qdL9&q=85&s=c73102e9357229e6fd1cfdb51065e0da" alt="塗り色を指定した楕円がひとつだけ選ばれ、キャンバスの上に図形のプロパティパネルが開いた状態。線の色・配置・縦位置・フォントサイズ・線の太さ・手描き感・塗り色・塗りパターンがすべて見える。" width="2880" height="1800" data-path="images/ja/structure/canvas-drawing--02.png" />
</div>

<div className="app-window hidden dark:block">
  <img src="https://mintcdn.com/raumlabsinc/RpnImTRrZig0qdL9/images/ja/structure/canvas-drawing--02-dark.png?fit=max&auto=format&n=RpnImTRrZig0qdL9&q=85&s=ffb20d3e5cac2864c09726b29ebfb84a" alt="塗り色を指定した楕円がひとつだけ選ばれ、キャンバスの上に図形のプロパティパネルが開いた状態。線の色・配置・縦位置・フォントサイズ・線の太さ・手描き感・塗り色・塗りパターンがすべて見える。" width="2880" height="1800" data-path="images/ja/structure/canvas-drawing--02-dark.png" />
</div>

<p className="app-caption">図形をひとつ選ぶと出るプロパティパネル。引いて移し、折りたたむこともできます。</p>

## 文字と回転

四角形・楕円・直線・矢印を二度押すと、その中に直接文字が書けます。テキスト図形は描いた直後から入力を受け付けます。フォントサイズは小から最大まで五段階あるので、遠くからでも読める章タイトルを付けておけます。縦位置の上・中央・下で、文字を図形のどこに寄せるかを決めます。

選んだ図形の上には回転ハンドルが付きます。引いて回し、Shift を押しながら引くと 15° 単位に合います。直線と矢印は真ん中のひし形のハンドルを引いて弓なりに曲げ、また真ん中の近くで放すとまっすぐに戻ります。
