Slide 1

Slide 1 text

Goの標準ライブラリで扱う フォントと画像 Akira Chiku Kanmu, Inc. Go Conference 2021 Autumn Nov. 13,2021

Slide 2

Slide 2 text

Copyright Kanmu, Inc. All right reserved. 2 Akira Chiku @achiku @_achiku 自己紹介

Slide 3

Slide 3 text

Copyright Kanmu, Inc. All right reserved. バンドルカードとpoolを作ってます

Slide 4

Slide 4 text

Copyright Kanmu, Inc. All right reserved. 4 image/draw package 1 2 3 目次 x/image/font package Application

Slide 5

Slide 5 text

image/draw package 1

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Copyright Kanmu, Inc. All right reserved. Src Operator(op)を利用する場合 7 dst src Op=Src src画像をそのままdst画像に上書 きしている為、srcの透過部分も dstに上書きされている

Slide 8

Slide 8 text

Copyright Kanmu, Inc. All right reserved. Over Operator(op)を利用する場合 8 dst src Op=Over dstの上(Over)にsrcを描画するの でsrcの透過の下にはdstの画像が ちゃんと見える

Slide 9

Slide 9 text

Copyright Kanmu, Inc. All right reserved. 座標による描画位置指定の基礎的な概念 9 ● 座標 ● 四角形の構成要素として の役割もある ● 2つのPointを使って四角 形を表現する 概念一覧 Point 概念図 Min Max Rectangle ● 四角形 ● 全ての画像は四角形で表 現される ● 2つのPointを組み合わせ て表現される

Slide 10

Slide 10 text

Copyright Kanmu, Inc. All right reserved. 座標による描画位置指定の基礎的な概念(コード) 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Copyright Kanmu, Inc. All right reserved. draw.Drawにおける座標による描画位置指定 13

Slide 14

Slide 14 text

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が分かる

Slide 15

Slide 15 text

Copyright Kanmu, Inc. All right reserved. dst画像の中心をsrc画像の中心に合わせて描画(2/2) 15 dst src Op=Over

Slide 16

Slide 16 text

Copyright Kanmu, Inc. All right reserved. もう少し右下に... 16 dst src Op=Over

Slide 17

Slide 17 text

Copyright Kanmu, Inc. All right reserved. コーギーも...... 17 dst src Op=Over

Slide 18

Slide 18 text

Copyright Kanmu, Inc. All right reserved. のどかな風景になりました 18

Slide 19

Slide 19 text

Copyright Kanmu, Inc. All right reserved. maskを使った透過 19 dst src Op=Over mask

Slide 20

Slide 20 text

Copyright Kanmu, Inc. All right reserved. maskを使ったsrcの描画範囲指定(1/2) 20 dst src Op=Over mask

Slide 21

Slide 21 text

Copyright Kanmu, Inc. All right reserved. maskを使ったsrcの描画範囲指定(2/2) 21

Slide 22

Slide 22 text

Copyright Kanmu, Inc. All right reserved. maskを使ったsrcの描画範囲指定応用(1/2) 22 dst src Op=Over mask

Slide 23

Slide 23 text

Copyright Kanmu, Inc. All right reserved. maskを使ったsrcの描画範囲指定応用(2/2) 23

Slide 24

Slide 24 text

Copyright Kanmu, Inc. All right reserved. (参考) 4つの単純な概念で以下の操作全て行える 24 Compositing Digital Images by Porter and Duff

Slide 25

Slide 25 text

x/image/font package 2

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Copyright Kanmu, Inc. All right reserved. x/image/fontを使って文字列を書き出す(1/2) 27

Slide 28

Slide 28 text

Copyright Kanmu, Inc. All right reserved. x/image/fontを使って文字列を書き出す(1/2) 28

Slide 29

Slide 29 text

Copyright Kanmu, Inc. All right reserved. x/image/fontを使って文字列を書き出す(1/2) 29 1 2 3

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Copyright Kanmu, Inc. All right reserved. フォントにはより複雑な位置概念がある 31 https://developer.apple.com/library/archive/documentation/TextFonts/Conceptual/CocoaTextArchitecture/Art/glyph_metrics_2x.png

Slide 32

Slide 32 text

Copyright Kanmu, Inc. All right reserved. これで文章を描画できる! 32

Slide 33

Slide 33 text

Copyright Kanmu, Inc. All right reserved. 長いと折返しできず表示できない 33

Slide 34

Slide 34 text

Copyright Kanmu, Inc. All right reserved. imageのサイズを超えたら改行するDrawStringWrap作る 34

Slide 35

Slide 35 text

Copyright Kanmu, Inc. All right reserved. 長いテキストも描画できた 🎉 35

Slide 36

Slide 36 text

Copyright Kanmu, Inc. All right reserved. 今回の発表内容でogp.appというサービスを作った 36 https://ogp.app

Slide 37

Slide 37 text

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書いてもらいました ○ ありがとうございます!

Slide 38

Slide 38 text

Copyright Kanmu, Inc. All right reserved. Remo でオフィスアワーやってます! CTFも公開してますのでぜひ チャレンジしてみてください!