[Face-Wizard] 

 [Inkscape] 
 
 [Potrace] 
 
 [Tablet_Renew] 
 
 [MY_CGs] 
J パターンを作ってみる

■ 破線パターンについて

Inkscapeは、矩形やオブジェクトの縁にストロークで様々な破線パターンを適用する事ができます。

   


  
  
ところが、矩形のストロークに破線を適用すると、高確率で左図のように角が欠けたり角の部分に何も描画されない状態になります。

これは破線パターンが始点ノードからの長さで割り付けられている為で、上図のPattern offset(初期値0.00)で破線パターンの開始位置を調整できますが、これは空白部分の長さを調節するものではないので根本的な解決にはなりません。

  
左図のように、破線の実線部分と空白部分の長さを角の部分を含めて全て同じ長さにするには、矩形のwidthとheightにそれぞれストローク線幅*2と空白部分の長さを足し算し、最大公約数を計算します。

ここでは破線が矩形に外接するものとします。内接にする場合は矩形のw,hに空白部分の長さを加算して同じく最大公約数を計算します。

 
つまり、左図のような正方形タイルパターンを、オフセット量 = 矩形-線幅で並べたとき、最後のタイルが矩形+線幅より空白部分だけはみ出る形になる状態を考えます。

  
ここではw=136,h=76pxの矩形に外接する幅1pxのストロークを描くものとして計算します。

  
最大公約数とか、因数分解とか、もう忘れちゃった。ので、最大公約数計算機を作りました。スクリプトのページ
ユークリッド互除法で引き算するだけのシンプルなものです。

ここでは線幅1,空白部分の長さを6として、136+2+6=144,76+2+6=84の最大公約数を求めます。

  
運良く解が12と出ました。
2つの数のうち、どちらかが素数の場合は最大公約数が必ず1にしかならないので、最低でも最大公約数が3以上の数にならなければ、角に"「"の形を作る事はできません。また、設定した空白長さと最大公約数が同じ値になる場合は実線を入れる余地がなくなるので空白部分の長さを見直す必要があります。
"1024 768"のように、最大公約数が256といった大きな数字になるときも同様に、空白長さを見直して調整します。

空白長さを1として最大公約数が2になった場合は、角が"「"でなく"■"になり、破線というより点線になってしまいます。

  
空白部分の長さを6として最大公約数が12と出たので、実線部分の長さは6になります。

矩形にストロークを設定したのでは矩形に外接する線にはならないので、ベジェツールで新たにストロークを引き、スタイルを破線にします。

このとき、XMLエディタのstyleを見ると、値に"stroke-dasharray:n, n';"という文字列が見つかります。このn, n'が破線の実線長さ(n)と空白部分の長さ(n')の定義です。

実線:空白を6:6にするので、値が異なる場合は数値を修正してセットします。この値を変えても、ストロークスタイルのダイアログで設定されている初期値は変わりません。

  
  
1本引いたらコピーして短辺にもう1本引き、スタイルをペースト。ノードツールで始点終点を矩形+線幅に合わせます。

このとき、ベジェ線で4辺を一度に描いてしまうと、コーナーから次の破線が空白で始まるので計算が合わなくなくなります。

奇数ピクセル幅のストロークを引くときはグリッド間隔を0.5pxにしておくと楽です(図は青線が0.5px,緑線が1.0px間隔)。
ストロークスタイルで端部形状が「四角」になっていると、実線部分の長さが1本あたり線幅の分だけ長くなるので計算が合わなくなります(逆に、空白部分の長さはその分縮まります)。

pngエクスポートする場合、端部形状が「角」だと選択範囲の始点終点が端数になる(ストローク幅が奇数pxの場合のみ)ので、背面に整数pxの矩形を置いてラスタライズするか、破線のストロークをパスに変換しなければ設定した線幅でラスタライズされません。
今回は運良く実線と空白長さが6:6になりましたが、ほとんどの場合、実線と空白部分の長さを等しくすることは出来ません。
左図は空白長さを3としたとき、最大公約数が5だった場合の破線です。
実線長さが2pxくらいのときは、見た目的にはほとんど点線にしかなりません。

ラスタデータに書き出す書類でなければ、実線と空白長さに端数を気にする必要はないので、実線長さをx,空白長さをyとしたとき

nx + (n-1)y = width
n'x + (n'-1)y = height

の式を連立するか、あるいは破線をパスに変換した上で、矩形に対してセンター合わせ -> [Shift]+ドラッグで長さを揃える、あるいは破線を適当な長さで打ち切り、センター合わせにして角の部分で長さを調整した方が簡単だし早いです。



 MENU△ PAGE TOP▲

Oct 15 2007