Goの標準ライブラリで扱うフォントと画像

Transcript

1. Goの標準ライブラリで扱う フォントと画像 Akira Chiku Kanmu, Inc. Go Conference 2021 Autumn Nov. 13,2021
2. Copyright Kanmu, Inc. All right reserved. 2 Akira Chiku @achiku @_achiku 自己紹介
3. Copyright Kanmu, Inc. All right reserved. バンドルカードとpoolを作ってます
4. Copyright Kanmu, Inc. All right reserved. 4 image/draw package 1 2 3 目次 x/image/font package Application
5. image/draw package 1
6. Copyright Kanmu, Inc. All right reserved. Goで画像を扱う為の基礎的な概念 6 dst src op mask • 書き込み先の画像 • destinationのdst • dstに書き込む画像 • sourceのsrc • どのように書き込むか • SrcとOverの2種類 • src画像への付加情報 • 透明度/描画範囲、等 • なくても良い 概念一覧 概念相関図 src dst op mask dst src
7. Copyright Kanmu, Inc. All right reserved. Src Operator(op)を利用する場合 7 dst src Op=Src src画像をそのままdst画像に上書 きしている為、srcの透過部分も dstに上書きされている
8. Copyright Kanmu, Inc. All right reserved. Over Operator(op)を利用する場合 8 dst src Op=Over dstの上(Over)にsrcを描画するの でsrcの透過の下にはdstの画像が ちゃんと見える
9. Copyright Kanmu, Inc. All right reserved. 座標による描画位置指定の基礎的な概念 9 • 座標 • 四角形の構成要素として の役割もある • 2つのPointを使って四角 形を表現する 概念一覧 Point 概念図 Min Max Rectangle • 四角形 • 全ての画像は四角形で表 現される • 2つのPointを組み合わせ て表現される
10. Copyright Kanmu, Inc. All right reserved. 座標による描画位置指定の基礎的な概念(コード) 10
11. Copyright Kanmu, Inc. All right reserved. image/drawにおける座標による描画位置指定 11 dst • dst画像にsrc描画対象の Rectangleを指定 • 以降の流れは全てこの Rectangleを基準に進む　 考え方の流れ 概念図 1 • src画像において(1)で決めたサ イズのRectangleをどの座標か ら開始するかをPointで指定 • 既にサイズは固定で開始Pointで しか指定できないことに注意 • その際に(1)で決めたRectangle がsrc画像と全く同じサイズであ ることもありえる(その場合 Pointは{0, 0}) 2 src src or • mask画像もsrc画像と同じ扱い 3 mask mask or • 最後に組み合わせる 4 dst src/m ask
12. Copyright Kanmu, Inc. All right reserved. dst draw.Drawにおける座標による描画位置指定 12 src dst src • 書き込み先画像 • image.Image • dst画像上に配置するsrc画像書 き込み先の四角形 • srcの全てをdstのPoint={0, 0} から書き込む • image.Rectangle • 書き込む画像 • image.Image • src画像の描画開始位 置 • image.ZPはパッケージ に定義されている • 実態はPoint{0, 0} • image.Point
13. Copyright Kanmu, Inc. All right reserved. draw.Drawにおける座標による描画位置指定 13
14. Copyright Kanmu, Inc. All right reserved. dst画像の中心をsrc画像の中心に合わせて描画(1/2) 14 dst src 実現したいこと dst src 1000 700 300 150 考え方の流れ • 横1000px x 縦700pxのdst画像と横 300px x 縦150pxのsrc画像があり、 dstの中心とsrcの中心が重なるよう に描画したい • 基準となるRectangleを左の図下の dst上のsrcがある場所に配置すれば 良い • サイズが既に決まっている Rectangleを特定の場所に配置する 為にはRectangleの開始Point(図の 丸)の位置を特定できれば良い • PointはXとY座標で表現できるので ◦ X=dstの横幅/2-srcの横幅/2 ◦ Y=dstの縦幅/2-srcの縦幅/2 • つまりsrc開始Pointは{450, 275}と なる • 開始Pointにsrc画像の縦幅、横幅を 足せばRectangleを描画する為に必 要な2つのPointが分かる
15. Copyright Kanmu, Inc. All right reserved. dst画像の中心をsrc画像の中心に合わせて描画(2/2) 15 dst src Op=Over
16. Copyright Kanmu, Inc. All right reserved. もう少し右下に... 16 dst src Op=Over
17. Copyright Kanmu, Inc. All right reserved. コーギーも...... 17 dst src Op=Over
18. Copyright Kanmu, Inc. All right reserved. のどかな風景になりました 18
19. Copyright Kanmu, Inc. All right reserved. maskを使った透過 19 dst src Op=Over mask
20. Copyright Kanmu, Inc. All right reserved. maskを使ったsrcの描画範囲指定(1/2) 20 dst src Op=Over mask
21. Copyright Kanmu, Inc. All right reserved. maskを使ったsrcの描画範囲指定(2/2) 21
22. Copyright Kanmu, Inc. All right reserved. maskを使ったsrcの描画範囲指定応用(1/2) 22 dst src Op=Over mask
23. Copyright Kanmu, Inc. All right reserved. maskを使ったsrcの描画範囲指定応用(2/2) 23
24. Copyright Kanmu, Inc. All right reserved. (参考) 4つの単純な概念で以下の操作全て行える 24 Compositing Digital Images by Porter and Duff
25. x/image/font package 2
26. Copyright Kanmu, Inc. All right reserved. x/image/fontの前に基礎的な概念の整理 26 Typeface (書体/書体デザイン) Font (フォント) Glyph (グリフ) Font File (フォントファイル) • 「ある一貫したデザイン方針で作られた 文字の集まり」(e.g. 明朝体、Comic Sans MS) • 「その文字を印刷・表現するための具体 的な手段を表す」 • フォントの中の文字(字形)をグリフ (glyph)と呼ぶ • フォントファイル形式の仕様にのっとっ て作成されたファイル • TrueType/OpenType 参照) https://fontnavi.jp/zakkuri/101-typeface_and_font.aspx
27. Copyright Kanmu, Inc. All right reserved. x/image/fontを使って文字列を書き出す(1/2) 27
28. Copyright Kanmu, Inc. All right reserved. x/image/fontを使って文字列を書き出す(1/2) 28
29. Copyright Kanmu, Inc. All right reserved. x/image/fontを使って文字列を書き出す(1/2) 29 1 2 3
30. Copyright Kanmu, Inc. All right reserved. 再度もう一階層深い概念の解説 30 A • Kern関数は1つ前のGlyphと現在 のGlyphのスペースを返す • 各FontFileの形式で指定されて いる 考え方の流れ 概念図 1 • Glyph関数は以下を返す ◦ dr(image.Rectangle) ◦ mask(image.Image) ◦ maskp(image.Point) ◦ advance(fixed.Int26_6) • drはdstへの書き込み範囲+位 置、maskはGlyphの画像情報、 maskpはGlyphの画像情報上の 描画開始位置、advanceはその Glyphの幅 2 • Dot.XにKarnとAdvancementを 追加することで次に書き込む Glyphの場所を前に進める 3 dst B dr A karn mask maskp advancement A B karn advancement
31. Copyright Kanmu, Inc. All right reserved. フォントにはより複雑な位置概念がある 31 https://developer.apple.com/library/archive/documentation/TextFonts/Conceptual/CocoaTextArchitecture/Art/glyph_metrics_2x.png
32. Copyright Kanmu, Inc. All right reserved. これで文章を描画できる！ 32
33. Copyright Kanmu, Inc. All right reserved. 長いと折返しできず表示できない 33
34. Copyright Kanmu, Inc. All right reserved. imageのサイズを超えたら改行するDrawStringWrap作る 34
35. Copyright Kanmu, Inc. All right reserved. 長いテキストも描画できた 🎉 35
36. Copyright Kanmu, Inc. All right reserved. 今回の発表内容でogp.appというサービスを作った 36 https://ogp.app
37. Copyright Kanmu, Inc. All right reserved. 参考資料&Special Thanks 37 • 今回の発表に利用したコード ◦ https://github.com/achiku/drawimg • imageパッケージに関する公式ブログ ◦ https://blog.golang.org/image • image/drawパッケージに関する公式ブログ ◦ https://blog.golang.org/image-draw • まつじ様に背景画像をご提供いただきました ◦ ありがとうございます！！ • いらすとや様の画像を使わせていただきました ◦ いつも助かります！ • wozozo氏にogp.appのCSS書いてもらいました ◦ ありがとうございます！
38. Copyright Kanmu, Inc. All right reserved. Remo でオフィスアワーやってます！ CTFも公開してますのでぜひ チャレンジしてみてください！