画面左側にコマンド一覧が並んでいます。 コマンドのボタンを押すとそのコマンドが選択されます。 多くのコマンドは左クリックで各種操作を行います。 また、コマンドを確定させるには、多くの場合、右クリックします。 線コマンドで折れ線を引くような場合、コマンドを確定させると、 折れ線の終点が確定し、次から新しい折れ線が始まります。 コマンドの確定は、return キーでも行えます。
以下で説明するコマンドの描画系コマンドは、 スペースキーで undo することが出来ます。 つまり、操作が１つ手前に戻ります。 undo は１つのコマンド内に限られます。 つまり、コマンドをまたいでグローバルに undo することは出来ません。 また、いくつか undo 非対応のコマンドもありますがご了承ください。
描画領域にはデフォルトでグリッドが表示されていますが、 グリッドボダンを押すか g キーを押すことで、非表示にすることが出来ます。 もう一度押せば、再びグリッドが表示されます。 グリッドが表示されていると、クリックしたとき、 最も近いグリッドの点が選択されます。
選択コマンドを選ぶと、 描画領域の図形をクリックで選択出来るようになります。 選択した図形をもう一度クリックすると、選択が解除されます。 a キーを押すと全ての図形が選択されます。 もう一度 a キーを押すと選択が解除されます。
選択コマンドは他のコマンドと組み合わせて使います。 何らかの処理をする前に、選択コマンドで図形を選択しておきます。 選択された図形には、端点や交点にアンカーが ○ で表示されます。 アンカーは、線コマンド等で始点や終点として指定することが出来ます。 アンカーの近くでクリックすると、アンカーの点が選ばれます。
選択コマンドと組み合わせる処理の１つに、 図形のスタック順(重なりの順序)を変更する処理があります。 図形を選択して t キーを押すと、 その図形のスタック順を最上位に変更します。 また、b キーを押すと、その図形のスタック順を最下位に変更します。
選択コマンドと同様に図形を選択しますが、 マウスで左上と右下を指定する矩形で囲まれた範囲を一括して選択します。 最初に左上をクリックで選択し、次に右下をクリックで選択します。 右クリックで図形の選択が確定され、選択用の矩形は消えます。
クリックした点を描画領域の中心に変更します。 また、以下のような操作をキーボードで行えます。
＜safe キー＞このキー操作は、スコープコマンド以外のコマンド選択中でも機能します。 ただし、unsafe キーは、プロパティ・Trim・接線２・円弧化・分点・移動・複写の各コマンドで禁止されています。 また、w キーは、スコープコマンド選択中しか機能しません。
スコープコマンドを選択すると、 画面右に画像幅変更プロパティが表示されます。 ここで、画像幅を指定して 変更ボタンを押すと、 アスペクト比を保って画像の横幅が指定サイズに変更されます。 このとき、中の図形は画像サイズに合わせて拡大縮小されます。 画面下の幅ボックスと高さボックスでも画像サイズは変更できますが、 変更されるのは画像サイズのみで、中の図形のサイズは変わりません。
e キー(r キー)による図形拡大(縮小)の拡大率(縮小率)は、 画面右に拡大率プロパティを表示させてから入力します。 スコープコマンド選択直後は、画像幅変更プロパティが表示されています。 拡大率プロパティを表示するには w キーを押します。 もう一度 w キーを押すと画像幅変更プロパティに戻ります。 e キー(r キー)による拡大(縮小)の中心は、描画領域の中心になりますので、 必要に応じて、図形を描画領域の中心に配置しておいてください。 ちなみに、拡大率(縮小率)の初期値は２の平方根です。
クリックで図形を選択すると、画面右サイドで、 その図形のプロパティを編集することが出来ます。 プロパティは SVG の図形の属性のサブセットです。
選択した図形がテキストだった場合、 プロパティは、 size, string, color, family, weight, style が編集出来ます。 string 以外は説明は必要ないでしょう。 string は入力文字列です。
注意点として、このプロパティを使ってテキストの詳細を指定しても、 実際に表示されるときに反映されるとは限りません。 実際の表示は表示する環境に依存します。 つまり、フォントなどは表示する環境のフォントが使われます。 編集時に文字を画像データに変換するわけではありませんので、 編集時に見ているフォントが表示先でも見えるとはかぎりません。
線を描画します。 まず、線の始点をクリックで指定します。 次に、終点をクリックで指定します。 すると、その始点から終点へ線が描かれます。 そのままクリックを続けると、終点を新たな始点として線の描画を続けます。 つまり、クリックし続けると折れ線が描けます。 右クリックで線の終点が確定します。
ポリゴン(多角形)を描画します。 まず、線の始点をクリックで指定します。 次に、終点をクリックで指定します。 そのままクリックを続けると、 終点を新たな始点としてポリゴンの描画を続けます。 つまり、クリックし続けるとより角の多いポリゴンが描かれます。 右クリックでポリゴンが確定します。
円を描画します。 まず、円の中心をクリックで指定します。 次に、半径をクリックで指定します。 すると、その中心と半径で円が描かれます。 そのままクリックを続けると、その都度その半径で円を描画します。 右クリックで円が確定します。
円弧を描画します。
すると、始点から終点へ時計回りに円弧が描かれます。 そのままクリックを続けると、その都度その半径で円弧を描画します。 右クリックで円弧が確定します。
矩形を描画します。 まず、矩形の左上の点をクリックで指定します。 次に、矩形の右下の点をクリックで指定します。 すると、矩形が描かれます。 そのままクリックを続けると、その都度その点を右下にする矩形を描画します。 右クリックで矩形が確定します。
oval を描画します。 まず、oval の左上の点をクリックで指定します。 次に、oval の右下の点をクリックで指定します。 すると、oval が描かれます。 そのままクリックを続けると、 その都度その点を右下にする oval を描画します。 右クリックで oval が確定します。
テキストを描画します。
そのままクリックを続けると、その都度その位置でテキストを描画します。 右クリックでテキストが確定します。
はみ出した余分な線や円弧を切り詰めます。
すると、アンカーまで線や円弧が縮んで切り詰められます。 右クリックすると切り詰めが確定します。
線分および円弧の先端に矢印を付け加えます。 矢印を付けたい先端を左クリックで選ぶと矢印が描かれます。
このコマンドは多少癖があり、 目的の先端をなかなかうまく選べないかもしれません。 そういうときは諦めずに、先端付近をあちこちクリックしてみてください。
画面右側のプロパティで、矢印の長さ(length)、矢印の角度(angle)が指定出来ます。
円を円弧に変換します。
線分や円を n 等分した点にアンカーを描きます。
まず、等分したい線分を含む折れ線やポリゴンを選択コマンドで選びます。 次に、分点コマンドを選び、 等分したい線分の近くをクリックすると、 n 等分された点にアンカーが描かれます。 n は画面右のプロパティの nparts で指定します。
まず、等分したい円を選択コマンドで選びます。 次に、分点コマンドを選び、 等分したい円の近くをクリックすると、 n 等分された点にアンカーが描かれます。 n は画面右のプロパティの nparts で指定します。 円の等分の場合、分割を開始する角度を angle で指定します。 angle の初期値は 0 度で x 軸の正方向です。回転は時計回りが正の方向です。
点から円に対して接線を引きます。 まず、始点となる点をクリックします。 次に、接線を引きたい円の接点付近をクリックします。 すると、接線が引かれます。 右クリックすると接線が確定します。
円から円に対して接線を引きます。
すると、２つの円の間に接線が引かれます。 右クリックすると接線が確定します。
選択された図形を移動します。
そのままクリックを続けると、その都度その位置に移動されます。 右クリックすると移動が確定します。
選択された図形を複写します。
そのままクリックを続けると、その都度その位置に複写されます。 右クリックすると複写が確定します。
選択コマンドで選択した図形を削除します。 undo は出来ませんのでご注意ください。
次に説明する保存コマンドで保存した JSON 形式のファイルを読み込みます。
出来上がった図形をファイルに保存します。 形式は、SVG, PNG, JSON の３つから選ぶことが出来ます。 形式の指定は保存コマンドボタンの下のドロップダウンリストで行います。
Safari の場合、ダウンロードは自動では始まりません。 別ウィンドウが開き、図のプレビューが表示されます。 このウィンドウを、 Safari のファイルメニューにより、「別名で保存…」してください。