PDF 内部構造 グラフィックス 新しいページはコチラ

提供: yonewiki
移動: 案内, 検索
(→‎平行移動・拡大縮小・回転)
 
1行: 1行:
−
[[PDF 内部構造]]に戻る。
+
[[PDF 内部構造#説明|PDF 内部構造]]に戻る。
 
== '''概要''' ==
 
== '''概要''' ==
 
　埋め込み画像を使えばいいじゃないってことですが、グラフィックスを記述することができます。拡大しても荒くならないベクター形式の図形を描くのが、このグラフィックスという項目で記述する内容です。それにしてもグラフィックスのベクター描画技術を使っているPDFってあんまり見かけないです。Illustratorのように完璧ってわけでもない機能だからと思います。でも、無駄にいろいろできるようにはなっています。ページの座標系は左下が原点で上と右に向かって座標値が増えていく感じです。この座標値を使って線の始点座標や終点座標を指定したり、矩形の左下座標と右上座標を指定したりして描きます。曲線はベジェ曲線を使います。線の考え方に、ベジェ曲線のハンドル座標を1ないしは2個指定をしたりします。あとはつながった線や曲線を閉じるという考え方があったりします。こういう操作は、PDFでは未経験でも画像処理に使うOpenGL/OpenCL/WebGL/OpenCVやHTML5やTeXやCanvas、3D検定や今はなきActionScriptでも扱うので、どこかで似たようなことを経験したことがある人もいると思います。行列をつかった変換行列・平行移動・回転・拡大なんかも経験した人もいるかもです。ちょっと独特な部分を覚えるっていう感じになるやもしれません。
 
　埋め込み画像を使えばいいじゃないってことですが、グラフィックスを記述することができます。拡大しても荒くならないベクター形式の図形を描くのが、このグラフィックスという項目で記述する内容です。それにしてもグラフィックスのベクター描画技術を使っているPDFってあんまり見かけないです。Illustratorのように完璧ってわけでもない機能だからと思います。でも、無駄にいろいろできるようにはなっています。ページの座標系は左下が原点で上と右に向かって座標値が増えていく感じです。この座標値を使って線の始点座標や終点座標を指定したり、矩形の左下座標と右上座標を指定したりして描きます。曲線はベジェ曲線を使います。線の考え方に、ベジェ曲線のハンドル座標を1ないしは2個指定をしたりします。あとはつながった線や曲線を閉じるという考え方があったりします。こういう操作は、PDFでは未経験でも画像処理に使うOpenGL/OpenCL/WebGL/OpenCVやHTML5やTeXやCanvas、3D検定や今はなきActionScriptでも扱うので、どこかで似たようなことを経験したことがある人もいると思います。行列をつかった変換行列・平行移動・回転・拡大なんかも経験した人もいるかもです。ちょっと独特な部分を覚えるっていう感じになるやもしれません。
102行: 102行:
  
 
=== '''曲線''' ===
 
=== '''曲線''' ===
−
　ベジェ曲線を使って、曲がった線を描くことができます。ベクターグラフィックを扱う場合は、ベジェ曲線をよく使います。直線の始点と終点にそれぞれ曲げる量を決定する座標を追加するようなイメージです。始点用の曲げるための座標と終点用の曲げるための座標です。ひとつのベジェ曲線ではせいぜいS字程度くらいにしか曲がるものしか描けません。何回もうねうね曲がる曲線はベジェ曲線を細かく繋げることで複雑な線を描くことができます。初心者から中級者とって、この曲げる量を決定する座標の配置は、描きたい曲線に適した座標は、かなり難しいです。アプリケーションによっては、画面上で描いたり、なぞったりした、曲線に対して最適なベジェ曲線を自動で算出してくれるものもありますので、こういったアプリケーションで慣れるとよいと思います。自動算出してくれるようなアプリでも、算出された後から、編集という行為によって、始点用の曲げる量をけってする座標は始点とつながった表示をしてくれるので、座標を動かして、曲がり方を調整できるようになってます。終点も同じです。後から制御点を微調整できるものがあるということです。始点や終点につながった曲げる量を決める座標のつながっている部分と座標をハンドルと呼びます。曲げる量の座標は制御点ともいいます。ちなみにPDFでは円を描画するオペレータがないのでベジェ曲線で円を描きます。
+
　ベジェ曲線を使って、曲がった線を描くことができます。ベクターグラフィックを扱う場合は、ベジェ曲線をよく使います。直線の始点と終点にそれぞれ曲げる量を決定する座標を追加するようなイメージです。始点用の曲げるための座標と終点用の曲げるための座標です。ひとつのベジェ曲線ではせいぜいS字程度くらいに曲がるものしか描けません。何回もうねうね曲がる曲線はベジェ曲線を細かく繋げることで複雑な線を描くことができます。初心者から中級者とって、この曲げる量を決定する座標の配置は、描きたい曲線に適した座標を求めるのは、かなり難しいです。アプリケーションによっては、画面上で描いたり、なぞったりした、曲線に対して最適なベジェ曲線を自動で算出してくれるものもありますので、こういったアプリケーションで慣れるとよいと思います。自動算出してくれるようなアプリでも、算出された後から、編集という行為によって、始点用の曲げる量を決定する座標は始点とつながった表示をしてくれるので、座標を動かして、曲がり方を調整できるようになってます。終点も同じです。後から制御点を微調整できるものがあるということです。始点や終点につながった曲げる量を決める座標のつながっている部分と座標をハンドルと呼びます。曲げる量の座標は制御点ともいいます。ちなみにPDFでは円を描画するオペレータがないのでベジェ曲線で円を描きます。
  
  
131行: 131行:
  
 
　
 
　
 +
 
=== '''平行移動・拡大縮小・回転''' ===
 
=== '''平行移動・拡大縮小・回転''' ===
 
　描画の座標空間の取り扱いを変更することで、描かれるものの、平行移動や拡大・縮小や回転という操作に似たようなことが出来ます。
 
　描画の座標空間の取り扱いを変更することで、描かれるものの、平行移動や拡大・縮小や回転という操作に似たようなことが出来ます。
138行: 139行:
  
  
−
　自分もそう思ってたときがありました。ペンの世界が変わるみたいな感じです。ペンを使う前に世界を変えるので、描き終わったものを動かすわけではないこと気がつければ理解しやすいと思います。
+
　自分もそう思ってたときがありました。ペンの世界が変わるみたいな感じです。ペンを使う前に世界を変えるので、描き終わったものを動かすわけではないこと気がつければ理解しやすいと思います。よく使うグラフィックアプリケーションの大抵は描いてから、全体を選択して、回転や拡大の変形操作を行います。描く前に変換するやり方では、難しいですが、PDFのソースに記述する場合は見ながら描くのではなく、予想して描くわけですから、先に指定することのほうが助かるという訳ですね。
  
  
−
　原点を変換するときは cm オペレータを使って 1 0 0 1 dx<span>(</span>xの原点移動量<span>)</span> dy<span>(</span>xの原点移動量<span>)</span> cm のように指定します。このときの1 0 0 1 は座標変換行列の要素になっていて、3Dの座標変換なんかでも使われるものです。行列は座標を変換するのに必要な4つの成分になっています。このことは、行列 座標変換 とかの検索ワードで出てくる文献を読まないと深い理解は得られないです。1 0 0 1 の意味するところは1倍という意味で、なにも変換に影響しない行列です単位行列とも呼ばれています。
+
　原点を変換するときは cm オペレータを使って 1 0 0 1 dx<span>(</span>xの原点移動量<span>)</span> dy<span>(</span>xの原点移動量<span>)</span> cm のように指定します。このときの1 0 0 1 は座標変換行列の要素になっていて、3Dの座標変換なんかでも使われるものです。行列は座標を変換するのに必要な4つの成分になっています。このことは、行列 座標変換 とかの検索ワードで出てくる文献を読まないと深い理解は得られないです。1 0 0 1 の意味するところは1倍という意味で、なにも変換に影響しない行列です単位行列とも呼ばれています。$ x_{trans} $ を変換後の X 座標、$ x_{orgin} $ を変換前の X 座標、$ X_{Mag} $を x 軸方向の拡大縮小倍率で Mag は Magnification 倍率の意味のように表すとすると y についても同様の扱いとして、
  
 +
 +
　■拡大縮小
 
<ymath>
 
<ymath>
 
(
 
(
 
\begin{pmatrix}
 
\begin{pmatrix}
−
X_{Mag} & b \\
+
x_{orgin} & y_{orgin}
−
c & Y_{Mag}  
+
\end{pmatrix}　
 +
\begin{pmatrix}
 +
X_{Mag} & 0 \\
 +
0 & Y_{Mag}  
 
\end{pmatrix}
 
\end{pmatrix}
 +
=
 
\begin{pmatrix}
 
\begin{pmatrix}
−
x \\
+
x_{trans} & y_{trans}
−
y 
+
 
\end{pmatrix}　
 
\end{pmatrix}　
−
=
+
)
−
 
+
</ymath>
−
　
+
　■2行2列 単位行列
 +
<ymath>
 
\begin{pmatrix}
 
\begin{pmatrix}
 
1 & 0 \\
 
1 & 0 \\
 
0 & 1  
 
0 & 1  
 
\end{pmatrix}
 
\end{pmatrix}
−
　
+
</ymath>
 +
　■回転
 +
<ymath>
 +
(
 +
\begin{pmatrix}
 +
x_{orgin} & y_{orgin}
 +
\end{pmatrix}　
 
\begin{pmatrix}
 
\begin{pmatrix}
 
\cos \theta & \sin  \theta\\
 
\cos \theta & \sin  \theta\\
 
-\sin  \theta & \cos  \theta
 
-\sin  \theta & \cos  \theta
 
\end{pmatrix}
 
\end{pmatrix}
 +
=
 +
\begin{pmatrix}
 +
x_{trans} & y_{trans}
 +
\end{pmatrix}　
 
)
 
)
 
</ymath>
 
</ymath>
  
  
 +
　上記のように表せます。これを具体的な四則演算で書き直すと行列を使えば、回転の式の場合はいかのような計算になります。この演算方法は行列意味を検索するなりして学習する必要がありますが、このような法則で演算することになっています。
 +
 +
 +
<ymath>
 +
(
 +
x_{trans} = x_{orgin} \times \cos \theta + y_{orgin} \times (-\sin \theta) 
 +
)
 +
</ymath>
 +
<ymath>
 +
(
 +
y_{trans} = x_{orgin} \times \sin \theta + y_{orgin} \times \cos \theta
 +
)
 +
</ymath>
 +
 +
 +
　このような計算の仕組みのおかげで、2行2列の行列が変換行列として機能することが、いろんなグラフの座標を想定して試算することで確かめることができます。
 +
 +
 +
　$ \theta $ が 0 のときはゼロ度の回転を意味していて、結局回転しないわけですが、回転の変換行列は左上が $ \cos \theta = \cos 0 = 1 $ で1になります。右上は$ \sin \theta = \sin 0 = 0 $ で 0 です。左下は、同様にして 0、右下は 1 になります。拡大が1倍のときの形です。左下と右上が 0 なら、左上の値が x 倍、右下の値が y 倍の変換に相当することも確かめられます。この cm オペレータはそのような行列値の指定と、原点の移動を示すオペランド値で機能していることがわかると思います。このようにコンピュータグラフィックにおける数値指定によって変換がされたりする仕組みを提供するオペレータのような役割をするものがある場合、このような科学技術演算が駆使されていて、そこの深い理由が存在しているということを把握できれば十分だと思います。すべてを理解するのは面倒です。
 +
 +
 +
　ひとつひとつの意味を遡って理解しながら学習するのも有意義ですが、あまり考えているとよくそんなことを思いついたなということばかりですし、以降の記事ではあまり言及しません。わけのわからない指定方法だけどなんか複雑な事やってくれてるんだなって思った方が楽です。そして必要最低限のパラメータとして必須の構造なんだという複雑さに対する諦めを持つことができます。PDFを少し解剖しただけでもこのような記事がかけるほど複雑な技術になっているという深さ。コンピュータの演算技術は深い。
 +
 +
 +
　以下は原点を x と y ともに100 左上方向に移動して、拡大率を 2 倍にする例です。
 +
 +
 +
　例
 
<Syntaxhighlight2 lang="text">
 
<Syntaxhighlight2 lang="text">
−
　
+
1 0 0 1 100 100 cm
 +
2 0 0 2 0 0 cm
 
</Syntaxhighlight2>
 
</Syntaxhighlight2>
  
−
　と、上記のようになります。
+
 
 +
　と、上記のようになります。前の例でしめしたような曲線についても、もともとの描画をシフトして、そのまま2倍にした場合にすると以下のようになるでしょう。前の例で使ったいろいろな座標を2倍にした状態で計算しなくて済みます。平行移動は回転の原点を移動することに関係することも注意してください。また拡大・縮小、回転、平行移動の順番を変更すると最終結果は変わりますので、その点にも注意が必要です。グラフィック業界では、位置調整の感覚がわかりやすいという意味で、平行移動→回転→拡大・縮小の順で動かすことを推奨していて、元の位置に戻す操作を入れる場合は、平行移動→回転→拡大・縮小→<span>(</span>回転戻し or 平行移動戻し or 回転戻し→平行移動戻し<span>)</span>のように、操作した順を折り返すように戻すといいでしょう。
  
 
　
 
　
  
−
[[ファイル:PDF Graphics Bezier.png||thumb|none|ベジェ曲線]]
+
[[ファイル:PDF Graphics Transform.png||thumb|none|座標変換]]
  
 
　
 
　
185行: 232行:
  
  
 +
　色の指定方法にはRGB系やCMYKや白黒 白黒階調指定あり、といった指定方法があります。まずはこの分類でどういう色空間を扱うかを指定することから始まります。オペランドとオペレータには以下のようなものがあります。
 +
 +
 +
<table style="width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0;">
 +
<tr style=" background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;">
 +
  <th style="width: 175px;">キー</th>
 +
  <th style="width: 175px;">型</th>
 +
  <th>指定する値の内容</th>
 +
  </tr>
 +
<tr>
 +
  <td>/DeviceGray</td>
 +
  <td>オペレータ</td>
 +
  <td>線ストロークはCS、塗りはcs指定します。</td>
 +
</tr>
 +
<tr style=" background: #eeeeee;">
 +
  <td>/DeviceRGB</td>
 +
  <td>オペレータ</td>
 +
  <td>線ストロークはCS、塗りはcs指定します。</td>
 +
</tr>
 +
<tr>
 +
  <td>/DeviceCMYK</td>
 +
  <td>オペレータ</td>
 +
  <td>線ストロークはCS、塗りはcs指定します。</td>
 +
</tr>
 +
</table>
 +
 +
 +
　白黒カラースペースには/DeviceGray キーを使います。　ストリーム部で以下のようなキー定義をつかうことで 0 に相当する黒色に設定ができます。0 ～ 1の小数点表記を含めた表記で黒から白へ変化していく階調表現のひとつの色を指定します。
 +
 +
 +
　例
 
<Syntaxhighlight2 lang="text">
 
<Syntaxhighlight2 lang="text">
−
　
+
/DeviceGray cs
 +
0 sc
 +
 
 +
/DeviceGray CS
 +
0 SC
 
</Syntaxhighlight2>
 
</Syntaxhighlight2>
 +
　上記の2行の記述と以下の記述は同等です。2行をまとめることができます。
 +
<Syntaxhighlight2 lang="text">
 +
0 g
  
−
　と、上記のようになります。
+
0 G
 +
</Syntaxhighlight2>
 +
 
 +
 
 +
　光の三原色を使ったRGBカラースペースには/DeviceRGB キーを使います。　ストリーム部で以下のようなキー定義をつかうことで RGB = 1 1 0 に相当する紫色に設定ができます。0 ～ 1の小数点表記を含めた表記で階調表現のひとつの色を指定します。0x00 = 0 ～ 0xff = 255 の 256 段階段階で表現するのも一般的ですが、ここでは0～1の割合で表現します。0xが先頭につく値は16進数表記を意味しています。コンピュータにおける16進数表記の意義については、別の部分で理解して下さい。
 +
 
 +
　例
 +
<Syntaxhighlight2 lang="text">
 +
/DeviceRGB cs
 +
1 1 0 sc
 +
 
 +
/DeviceRGB CS
 +
1 1 0 SC
 +
</Syntaxhighlight2>
 +
　上記の2行の記述と以下の記述は同等です。2行をまとめることができます。
 +
<Syntaxhighlight2 lang="text">
 +
1 1 0 rg
 +
 
 +
1 1 0 RG
 +
</Syntaxhighlight2>
  
 
　
 
　
 +
　印刷業界でよく使われるCMYKカラースペースには/DeviceCMYK キーを使います。　C=シアン(水色っぽい<span>)</span>、M=マゼンダ<span>(</span>紫色っぽい<span>)<span>、Y=イエロー、K=ブラックの分量で設定するカラーです。ストリーム部で以下のようなキー定義をつかうことで CMYK = 1 1 0 0 に相当する青色に設定ができます。0 ～ 1の小数点表記を含めた表記で階調表現のひとつの色を指定します。
 +
 +
　例
 +
<Syntaxhighlight2 lang="text">
 +
/DeviceCMYK cs
 +
1 1 0 0 sc
 +
 +
/DeviceCMYK CS
 +
1 1 0 0 SC
 +
</Syntaxhighlight2>
 +
　上記の2行の記述と以下の記述は同等です。2行をまとめることができます。
 +
<Syntaxhighlight2 lang="text">
 +
1 1 0 0 k
 +
 +
1 1 0 0 K
 +
</Syntaxhighlight2>
  
−
[[ファイル:PDF Graphics Bezier.png||thumb|none|ベジェ曲線]]
 
  
 
　
 
　
205行: 324行:
  
 
<Syntaxhighlight2 lang="text">
 
<Syntaxhighlight2 lang="text">
−
　
+
0.5 G
 +
100 100 200 200 re S
 +
q
 +
0 G
 +
110 110 180 180 re S
 +
Q
 +
120 120 160 160 re S
 
</Syntaxhighlight2>
 
</Syntaxhighlight2>
  
−
　と、上記のようになります。
+
　と、上記のようになります。上記の例では最初の 0.5 G<span>(</span>グレーのストローク<span>)</span>という状態をqでスタックして、覚えさせています。次に新しい状態の 0 G <span>(</span>黒色のストローク<span>)</span>という状態を設定して描画した後のQで状態をレストアします。これでスタックしておいたグレーのストロークの状態に戻ります。このような記憶がポップスタックの仕組み。お盆をある専用の保管場所において、どんどんつみあげるように記憶させ、保管場所からお盆を一枚づづ取り出すようにして、読み起こす仕組みです。目的の状態に戻すためにお盆を沢山取り外さないといけないこともあるし、お盆をどんどん取り出すと記録しておいたものはどんどん消えていきます。順番にうまくいったり来たりして使うという工夫を忘れてはいけないです。簡易的なグラフィックス状態の記憶ですね。
  
 
　
 
　
  
−
[[ファイル:PDF Graphics Bezier.png||thumb|none|ベジェ曲線]]
+
 
  
 
　
 
　
  
−
[[PDF 内部構造]]に戻る。
+
[[PDF 内部構造#説明|PDF 内部構造]]に戻る。

2022年7月11日 (月) 00:00時点における最新版

「https://www.yo-net.jp/yonewiki/index.php?title=PDF_%E5%86%85%E9%83%A8%E6%A7%8B%E9%80%A0_%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9&oldid=11420」から取得

個人用ツール
名前空間

変種
操作
案内
ツールボックス