1つ選択する
「選択」ツールに切り替え、対象をクリックまたはタップします。選択した図形には枠、端点、通過点、ベジェー制御点など、その図形に合った編集表示が現れます。
EDIT, LAYERS & EXPORT
編集・レイヤー・保存
描いたものの選択、色と線幅、整理、表示操作、保存と共有について説明します。
選択、複数選択、移動、変形
複数選択する
何もない場所からドラッグして選択範囲を作ります。範囲に入った同じレイヤー上の図形をまとめて選択できます。
移動する
選択した図形をドラッグします。複数選択やグループの場合は、まとまりを保ったまま移動できます。
変形する
通常の図形は選択枠のハンドルで拡大縮小・回転できます。直線、通常曲線、ベジェーパスは専用の点をドラッグして形を編集します。
編集できるレイヤー選択と編集の対象になるのは、現在選ばれている表示中のレイヤーです。
内部色・線色・線幅の変更
上部の色と、選択中に表示される線幅を決めてから「選択操作…」を開きます。
| 選択操作 | 動作 | 対象 |
|---|---|---|
| 中を塗る | 現在選んでいる色で、線の始点と終点を結んだ内側を塗ります。 | ペン、筆、曲線、ベジェーパス、四角、丸 |
| グラデーションで塗る | 開始色・終了色を指定し、線形または円形のグラデーションを適用します。線形は4方向（→、↓、↘、↗）から選び、円形はパネルをクリックまたはタップして「＋」の中心位置を指定します。「色を反転」で2色を入れ替えられます。 | ペン、筆、曲線、ベジェーパス、四角、丸 |
| 中を塗らない | 内部の塗りを解除し、線だけの状態へ戻します。 | ペン、筆、曲線、ベジェーパス、四角、丸 |
| 線を塗り直す | 輪郭線を、上部で現在選んでいる色へ変更します。 | ペン、筆、直線、曲線、ベジェーパス、四角、丸 |
| 線を塗らない | 輪郭線を非表示にします。線だけの図形は見えなくなるため、必要な場合は選択状態のまま「線を塗り直す」で再表示してください。 | ペン、筆、直線、曲線、ベジェーパス、四角、丸 |
| 線の太さ変更 | 輪郭線を、選択中の線幅スライダーの値へ変更します。 | ペン、筆、直線、曲線、ベジェーパス、四角、丸 |
複数選択・グループ選択時単色やグラデーションは、対応する各図形へ個別に適用されます。グラデーションの方向は各図形の範囲を基準にします。対象外の文字・画像・消し線は変更されません。塗りの変更はUndo／Redoできます。
グラデーションの終了色終了色は第二色としてブラウザーへ保存され、次にグラデーション画面を開いた時にも引き継がれます。第二色は最近使用した色にも追加されます。
グラデーションの開始色開始色は通常の描画色と共通です。開始色の変更や「色を反転」は通常の描画色にも反映され、次回利用時まで保存されます。
円形グラデーション中心位置の初期値は、球体風の表現に使いやすい左上寄りの35%・35%です。中心位置は各図形の範囲に対する相対位置としてプロジェクトへ保存されます。
スポイトスポイトを選び、キャンバスをクリックまたはタップすると、現在編集中のレイヤーに描かれている位置の色を取得します。取得色は通常の描画色とグラデーションの開始色へ反映されます。透明な位置では色を変更しません。
グループ化、複写、左右反転、重なり順
Group化
同じレイヤーの複数図形または既存グループを選択し、「Group化」を実行します。グループA、図形B、グループCを新しいグループDとしてまとめるなど、最大8階層まで多段グループ化できます。以後は最上位のグループ全体を選択、移動、変形できます。
「グループ解除」は最上位の階層を1段だけ解除します。グループDを解除した場合は、配下のグループA、図形B、グループCへ戻ります。
複写
選択した図形またはグループのコピーを作ります。コピーは少しずれた位置に置かれるため、そのまま移動できます。
左右反転
選択内容を、その中心を基準に水平方向へ反転します。複数図形にもまとめて適用できます。
最前面／最背面
同じレイヤー内での描画順を変更します。「最前面へ」は他の図形より上へ、「最背面へ」は下へ移します。
レイヤー操作
ゲストレイヤー最大5枚の通常レイヤーに加えて、全参加者で共有する「ゲスト」レイヤーがあります。ゲストレイヤーは常に最下位・表示固定で、名前変更、並べ替え、複写、統合、削除はできません。主催者と編集を許可された参加者は、ゲストレイヤーも選択して編集できます。
レイヤーパネルを開く
操作パネル3行目の「レイヤー」を押します。レイヤー名を押すと、そのレイヤーが描画・選択・編集の対象になります。＋で通常レイヤーを追加でき、通常レイヤーは最大5枚です。
表示／非表示と名前変更
☑／□で通常レイヤーを非表示または再表示できます。非表示にしても内容は削除されません。✎またはレイヤー名のダブルクリックから、30文字以内で名前を変更できます。
選択内容を移す
図形を選択し、移動先のLayerを選んで「選択 → L…」を実行します。グループも移動できます。
レイヤー順を変える
1つ上／1つ下、最前面／最背面を使い、レイヤー全体の重なり順を変更します。
レイヤーを複写
レイヤーパネルの「メニュー → 選択レイヤー複写する」で、選択中レイヤーの図形と表示状態をすぐ上の新しいレイヤーへ複写します。通常レイヤーが5枚ある場合は利用できません。
下のレイヤーと統合
「メニュー → 選択レイヤーを下のレイヤーと統合」で、選択中レイヤーの図形を直下の通常レイヤーへ移し、選択レイヤーを削除します。非表示レイヤー、最下位の通常レイヤー、消しゴムを含むレイヤーでは利用できません。
レイヤー消去「L…を消去」は、そのレイヤー上の内容をまとめて削除します。必要な内容がないか確認してから実行してください。
編集を許可されていない参加者ゲストレイヤーだけに描画できます。レイヤー選択・レイヤー操作と「メニュー…」は表示されず、画像追加、PNG・SVG・プロジェクトの保存・読込、全消去は利用できません。ほぼ同時に更新された場合は競合として扱われ、サーバーの最新内容を読み込み直します。
ズーム、パン、タッチ操作
| 目的 | PC | タッチ端末 |
|---|---|---|
| 拡大・縮小 | マウスホイール、または「−／＋」ボタン | 2本指でピンチ、または「−／＋」ボタン |
| 表示位置を移動 | Spaceを押しながらドラッグ、またはマウス中ボタンでドラッグ | 2本指のままドラッグ |
| 等倍に戻す | 「等倍」ボタンを押すと100%表示へ戻ります。 | |
表示倍率100%から400%まで拡大できます。「−／＋」ボタンでは50%刻みで変更します。
キャンバス外へ迷ったとき「等倍」を押すと表示倍率と位置が初期状態へ戻ります。
元に戻す／やり直す
元に戻す
左向きの履歴アイコンで、直前の描画や編集を取り消します。制御点移動、色変更、グループ化などにも利用できます。
やり直す
右向きの履歴アイコンで、取り消した操作を再実行します。元に戻した後で新しい編集をすると、やり直し履歴は消えます。
プロジェクト・画像の保存と共有
プロジェクトの保存
「メニュー… → プロジェクトを保存」を選ぶと、図形、曲線、文字、画像、単色・グラデーションの塗り、多段グループ、各階層の変形情報、レイヤー名・順序・表示状態、選択レイヤーを .fujidraw version 5形式で保存します。後からDrawingPanelで編集を再開するための形式です。
プロジェクトの読込
「メニュー… → プロジェクトを読込」から、以前保存したプロジェクトを選びます。ZIP内部のmanifestと描画データを検証し、保存時の編集可能な図形とレイヤー構造を復元します。ゲストレイヤーを持たない旧形式では、読み込んだ内容をL1〜L3へ配置し、ゲストレイヤーは空になります。
現在の内容を置き換える確認後に読み込みます。読込後はそれまでのUndo／Redo履歴が消え、読込前の状態には戻せません。
SVG保存
「メニュー… → SVG保存」で fujidrawing.svg を保存します。図形と曲線、線形・円形グラデーションはベクター、文字は文字要素、追加画像はSVG内への埋込み、レイヤーと多段グループは入れ子のグループ要素として保持されます。消しゴムは描画順を保ったSVGマスクになります。
SVGをDrawingPanelへ読み戻す機能はありません。外部のベクター編集ソフトやWebで利用するための形式です。
PNG保存
「メニュー… → PNG保存」で、現在の完成画像 fujidrawing.png を保存します。図形やレイヤーを再編集する場合はプロジェクトを保存してください。
保存先フォルダー
対応ブラウザーでは「プロジェクトを保存」と「プロジェクトを読込」で同じフォルダー履歴を使用し、読込時に前回の保存先を最初に表示します。
未対応ブラウザーでは通常のダウンロードとファイル選択へ切り替わり、初期フォルダーはブラウザー側の動作に依存します。
全消去
「メニュー… → 全消去」を選ぶと確認画面が表示されます。確認すると、すべての通常レイヤーとゲストレイヤーの内容を消去します。利用できるのは主催者と編集を許可された参加者だけです。
チャットでの共有
描画内容は編集の確定後に同期され、閲覧側には共有画像として表示されます。画像を追加する場合は「メニュー…」の「画像を追加」を利用します。
スマホでプロジェクトを読み込む場合iPhoneのSafariなどでは、保存時にファイル名の末尾へ自動的に
.zip が追加され、.fujidraw.zip になる場合があります。Androidでもファイル管理アプリが表示名を変更したり、拡張子を追加したりする場合があります。そのまま「プロジェクトを保存」で作成したファイルを選んでください。読込時はファイル名ではなく内部形式を検証します。読込後の履歴プロジェクトを読み込むと、それまでのUndo／Redo履歴は消去されます。読込前の内容には戻せません。
編集UIは画像に含まれません選択枠、アンカー、ベジェー制御点、ガイド線などは編集用表示のため、PNG保存や共有画像には入りません。