座標を変形させるのか？図形を変形させるのか？

グラフィックス全般のことなんですが、

【座標を変形させるのか？図形を変形させるのか？】

という問題があります。

一見、どっちでもよさそうな気がしますが、そうでもありません。

Adobe製品は、【座標】を変形させる方を選択しているため、

【文字フチをつけた文字フチ部分が文字ではなく図形となる】

という現象がおこります。

理由は、文字でフチ部分を定義してしまうと、座標を変形させているため、

文字のフチの線要素が、変形の影響を受けます。

当たり前なような気がしますが、線幅も影響を受けるため、

長体文字のフチの巾が、タテヨコでかわってしまう場合があるわけですね。

ちょっとわかりにくかったかもしれません。絵がないので。

ちょっと、、今はわかりやすい絵を描く気力がないので、

また今度書きます。

つまりこういうことですね。

普通にフチ付文字を書くと、座標の変換（偏倍）がないので、

こんな感じです。

これをこのまま横に偏倍するとこうなります。

まぁこれはこれでいいんですけど。。。

しかし、フチの幅を一定にしたち時もあるわけです。

そう、こういう風にしたい場合ですね。

これは、座標を変形させていると、線幅がタテヨコ変わるので、書けないんですね。

さらに、これはバグなのですが、

文字フチを文字で作成した（別プログラムでね。^^;）PDFを、イラレのCS5で読むと、

フチ文字部分が、正しい位置に配置されないというバグがあります。

CS4はわかりませんが、CS3では正しく読み込めていました。

フチをポリラインにしたPDFをイラレCS5で読み込んだとき。

フチを文字で書いたPDFをイラレで読み込んだ。

アメリカ→インドに変わって、、思想が変わったんですかね。。

いや、思想以前にバグだろこれ！

【詳解画像処理プログラミング】この本はあまりによくない。

この本なんですが、、、、

ぜんぜんダメでした。以前、読んだら書きますみたいに書いたのですが、

ダメです。買わないほうがいいでしょう。

（１）ターゲットがわからない。わかる人が読めばわかるけど、わからない人はわからないような書き方。だからといって、それほど高度な内容でもない。

（２）グラフィックスの本にしては、絵がすくなすぎる。同じ絵の使いまわしも多すぎ。内容に即した絵にもなっていない。

（３）ソースコードが美しくないし、遅すぎてそのままで使えるとも思えないし、説明の補足の役割がかろうじてあるかどうかってとこ。

（４）誤植が多すぎる。

（５）著者の思いが見えない。

以上の理由により、この本は、10段階評価２くらいの本ってことで。

２次元グラフィックライブラリを作る的なはなし（３）

単純に横方向へスキャンするときの欠点。

横方向へスキャンをして、面積比でアルファチャンネルを決定するだけでも、

垂直に近い辺に関しては、結構キレイに表示できます。

↓

元の線は、こんな感じですかねー。

しかしこのやりかただけでは、大きな欠点がありますね。

それは、水平に近いせんの場合です。

こんな場合ですね。

↓

□の部分が、ガタガタです。ね 

本当はこうしたいところなのです

↓

単純なスキャンだけではすまなそうですね。

はい、ダメですね。

じゃぁ、どうしましょうねー。

どこに書いてあったってわけじゃぁないんですけど、私はこう考えました。

ずいぶん前に紹介した絶版の本、

【フルスクラッチによるグラフィックスフログラミング入門】

によると、１ピクセルを、さらに細かくスキャンする方法、

例としては、４回スキャンして足し合わせるようなことが紹介されていました。

しかしそれでは、グラデっぽく表示されるピクセルが４ドットを超える場合に、

やっぱり、多少ガタガタしてきますね。

だからといって、数十回やればいいかっていう、交点を求めるコストを考えると、

それはやりすぎです。

ということで、１ピクセルの中で交点を、２点求め、直線補完をします。

今度はピクセルの中間ではなく、１ピクセルのはじまり近くと終わり近くの

２つの位置でスキャンし、交点を２つ求めます。

それが、A,Bですね。

そうしたら、下図のように色わけした部分（青・黄）部分の面積比（↓図のCに対する面積比）で、

アルファチャンネルを決定します。

こんな程度でも、結構、イイ感じになります。

まぁ、これはこれで問題があるにはあるんですけどね。^^;^^;

２次元グラフィックライブラリを作る的なはなし（２）

前回は矩形だから簡単だった。

でも三角形とかだったらどうなる。。？

↓

こういうのを考えると、ピクセルを考えなければ

↓ 

でも実際は１ピクセル以下は無理だから、

↓ 

でもアンチエイリアスというのをかけて

↓ 

これも実は、前回と同じように、スキャンするのです。

↓

でも前回と違って、スキャンの交点に、小数点が入ってしまいますね。

交点に小数点以下がなければ、

って感じですが、ある場合はこうします。

↓ 

即ち、交点を求め（A)、そこにタテ線を入れて（B)

その、色を塗る面積の比率で、色の濃さを決定します。

実際には、上図では、白と紫の中間の色のようになりますが、

実際はアルファチャンネルにするべきです。

そうでないと、キャンバス色が白でないと、おかしな話になります。

※　http://pdfbjj.blogspot.com/2011/04/blog-post_22.html　あたりを参照

つづく。。。

２次元グラフィックライブラリを作る的なはなし。（１）

２次元グラフィックライブラリを作る的なはなし。（１）

最初は、矩形を描く話でしょう。やっぱり。

矩形といっても、輪郭ではなく、塗りつぶしです。

輪郭の方が、難しいからです^^;ね。

あ、図の網目はピクセルですが、ＸＹは、座標なので、

小数点があるくらいに思っときましょう。

こんな↓矩形を塗りつぶすと、

こんな↓風になりますよ。

ここではこれを、（3,3）-（7,3）-（7,8）-（3,8）の矩形、POLYLINEと呼んで見ます。

早い話、この矩形の中に位置するピクセルだけに色を塗るわけです。

これを、ヨコ方向に考え、↓の絵のごとくSCANしていきます。

要するに、水平方向のスキャンラインと矩形の交点を算定し、

交点と交点の間を塗りつぶします。

ということで、ロジックですが、、、

（3,3）-（7,3）-（7,8）-（3,8）

の、Y方向の最大最小値を調べると、

MIN:３　MAX:８とわかります。

よって、スキャンするライン（ヨコ線）としては、

ｙ＝3.5～7.5まで、1.0ずつ増分させていけばそれらしくなります。

なぜ、0.5を足すかというと、なんとなく中間だからなんですけどね。

要するに、左上のピクセルを塗ることは、

（0,0）-（1,0）-（1,1）-（0,1）の矩形を塗りつぶすという意味だと考えれば、

ピクセルの中心座標は、0,0ではなく、0.5,0.5となります。

これが正しいという話ではなく、考え方としてなんとなくそんな感じという風に思えばいいです。

つづく