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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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

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

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

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

Slide 28

Slide 28 text

Slide 29

Slide 29 text

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(ﬁxed.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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

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