Database, graphics
データベース,グラフィックス

注意事項

毎回の授業の最初に出席メールを提出せよ.

前回までの出席記録課題と提出状況 を確認せよ.

9 章 グラフィックス続き

9.5.2 から 9.6 節では TrueType フォントを使用する. この演習の環境では以下のパス名で TrueType フォントを利用できる. 教科書の例のフォント名を適宜以下のものに読み替えよ.

実習
教科書 p.251 例 9-6 を ttf.php として作成せよ. ただし,5 行目 ImageTTFText の第 7 引数の 'courbi' を 'ttf-dejavu/DejaVuSerif' などに変える必要がある. それを埋め込むための下記を ttf.html として 作成せよ.ttf.html をブラウザで開き,動作を確認せよ.

例 ttf

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<title>TTF</title>
<body>
<p>
<img src="ttf.php">
</p>
</body>
</html>

実習
教科書 p.252 例 9-8 を button.php として作成せよ. ただし,2 行目 'times' を 'ttf-dejavu/DejaVuSerif' などに変える必要がある. それを埋め込むための html 文書を p.253 の 「例9-8のスクリプトを実際に使用する際には...」を参考に 作成し,動作を確認せよ.

9.7 画像の拡大/縮小

実習
教科書 p.256 例 9.11 に使う画像ファイル php.jpg が 受講者の public_html 下に置かれている.例 9.11 を php2.php というファイル名で作成せよ.また,それを埋め込む HTML 文書 を適当な名前で作成し,動作を確認せよ.

実習
上の php2.php を参考に php.jpg の幅と高さを 4 分の 1 に縮小して表示する php スクリプトを php4.php というファイル名で作成せよ.次に 上で作成したHTML 文書に php.jpg, php2.php, php4.php を埋め込み, 縮小されていることを確かめよ.

9.8 色の処理

色情報として R,G,B の光の 3 原色のほかに透明度を表す値アルファチャネルを加えた 4要素のデータを使うことで半透明な画像を表現できる.R,G,B には 8 ビットづつ使うが アルファチャネルには 7 ビットだけ割り当てることが多い.この場合,透明度は 0(不透明)から 127(完全に透明)となる.

アルファチャネルを 8 ビットではなく 7 ビットとしているのは PHP の整数型との親和性のためである. PHP の整数型は 4 バイトの符号付き整数型であるから 図 7. のように効率よく使うことができる. 最上位ビットはアンチエイリアス処理を行うかどうかの フラグに使う.

色情報フォーマット
図 7. 色情報フォーマット

透過色の使い方は難しくない.ImageCreate() の代わりに ImageCreateTrueColor() を, ImageColorAllocate() の代わりに ImageColorResolveAlpha() を使う, ImageColorResolveAlpha() の最後の引数に透明度を表す 0 から 127 の数値を与える.

実習
教科書 p.258 例 9-12 を入力し,ブラウザで表示させよ.

ImageAlphaBlending()が透過処理を有効にするかどうか を切り替える関数である.第2引数が false のときは透過処理 を行わず,上に書いた図形で下にあった(先にかかれていた) 図形の情報は完全に上書きされるモードになる.

実習
教科書 p.258 例 9-13 を入力し,ブラウザで表示させよ.

矩形を表示する前に ImageAlphaBlending($im, false) により透過処理が無効になっているので図形が重なっている部分では 下の楕円の色は完全に上書きされている.

実習
例 9-13 の後のほうの ImageAlphaBlending の第 2 引数を true に変更し,ブラウザで表示させよ.また色インデックス $gray を設定している ImageColorResolveAlpha() の最後の引数を 0 から 127 の間で変化させ,透明度が変わることを確認せよ.

ImageColorAt() で特定の座標の色インデックスを求めることができる. ImageColorsForIndex() で色インデックスから実際の R,G,B の値 アルファチャネルの値を配列の形で得ることができる. 色インデックスとは R,G,B,アルファチャネル等の情報をまとめた, GD ライブラリで利用するための形式と理解すればよい.

p.259 下から 2 行目「最初の 3 バイトに〜」からの 説明は誤りで,p.257 の説明が正しい.p.260 3行目の $green = ImageColorResolveAlpha($im,0,0,255,127); は $green = ImageColorResolveAlpha($im,0,255,0,127); が 正しい.

実習
p.260 の 17 行目からの例を入力し,実行せよ.

実習
p.261 例 9-14 に使用する画像 php-tiny.jpg を 受講者の public_html 下にコピーした. 例 9-14 を入力し,動作を確認せよ. 例 9-14 のファイルの拡張子は .php とするが, これまでの例と違い,<html> などまで 書かれた完全なhtmlファイルと出力する. このため,html の外枠は必要なく,作成した .php ファイルを直接ブラウザで開けばよい.

第 11 回課題「グラフィックス」 を提出せよ.


Updated in April 28, 2010, index.html, Yamamoto Hiroshi