Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Akira Chiku
November 13, 2021

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

Akira Chiku

November 13, 2021
Tweet

More Decks by Akira Chiku

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. image/draw package
    1

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. x/image/font package
    2

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide