描画結果データの読み方
- KKozue
保存されたJSONデータの読み方について
書式
FMキャンバス 3 による描画後、保存されたデータは次のような形で保存されています。
[{図形},{図形},{図形}...]
図形単位に{}でくくられています。
{}の中身は各図形の持つ属性名と属性値を "" でくくった以下のようなペアの繰り返しになります。
{"key1":"value1","key2":"value2","key3","value3"...}
属性値が数値であっても "" でくくられます。
属性
属性（key）の種類には以下のものがあります。
class, cx, cy, rx, ry stroke, stroke-width, d, fill, stroke-opacity, fill-opacity,content, x ,y, font-size
これらの属性名はSVGの各図形が持つ属性名に準じていますが、classについてはFMキャンバス 3 独自の属性です。図形の種類を表します。
また、テキストオブジェクトにおけるcontentもFMキャンバス3独自に実装されたものです。
| 属性名(key) | 解説 |
|---|---|
| class | 図形の種類を示す。
|
| cx,cy | 図形が内接する四角形を想定した場合のその中心座標 この属性はSVGにおいては通常<circle />や<ellipse />において見られる属性ですが、FMキャンバス 3においては、line, arrowオブジェクト以外のオブジェクト全てにこの属性を与えています。 |
| rx,ry | 楕円のX半径、Y半径（ovalオブジェクトのみ） |
| stroke | 線（枠）の色、文字の色 |
| stroke-width | 線幅 |
| d | 図形のパス （text,ovalオブジェクト以外。パスの見方については後述。） |
| fill | 塗りつぶし色 |
| stroke-opacity | 線に半透明の指定がなされた場合"stroke-opacity":"0.5"と表示されます。 |
| fill-opacity | 塗りつぶし色に半透明の指定がなされた場合"fill-opacity":"0.5"と表示されます。 |
| content | テキスト内容 （textオブジェクトのみ） |
| x, y | テキスト描画基準位置座標（textオブジェクトのみ） |
| font-size | フォントサイズ（textオブジェクトのみ） |
重要：スケールされる属性とされない属性
座標値は下絵の横幅を100とした時の相対値座標として保存されています。したがって、保存した描画を再度編集表示する場合、その時に表示される下絵の横幅に応じて座標値は再計算されます。
ただし、線幅はスケールされないことにご注意ください。"stroke-width":"1"で保存されていた場合、編集時の下絵の表示サイズが仮に横幅1000であったとしても線幅は"1"のままで表示されます。
また、これに付随して、矢印オブジェクトの矢印部分についてもご注意ください。矢印の大きさは線幅に応じて決定されます。したがって矢印の頭部分もスケールされることはありません。
パス（dプロパティ）の見方
(例)M50,50L75,90L20,80z
スタート地点座標(50,50) //Mはスタート地点を表す MoveToコマンド
座標(75,90)に直線を引く //Lは直線を引くことを表す LineToコマンド
座標(20,80)に直線を引く
z が最後にあった場合はパスを閉じる。（スタート地点に戻って終わり） closepathコマンド
classがrectのdプロパティは最後にzがつくのに対し、classがfreeのオブジェクトの場合、zはつきません。
注意
Windowsにおいては座標x,yの区切り文字はコンマではなくスペースとなっています。また、各コマンドM,L,zと座標値の間にもスペースが入ります。
(例)M 50 50 L 75 90 L 20 80 z