golang 去言语でレーダーチャートを书く（途中）

Posted 2021-05-24

package main

import (
	"fmt"
	"image"
	"image/color"
	"image/png"
	"log"
	"math"
	"os"
	"testing"

	"golang.org/x/image/font"
	"golang.org/x/image/font/basicfont"
	"golang.org/x/image/math/fixed"
)

const (
	x      = 0
	y      = 0
	width  = 255
	height = 255
)

var (
	whiteCol = color.RGBA{255, 255, 255, 255}
	blackCol = color.RGBA{80, 80, 80, 255}
	redCol   = color.RGBA{255, 0, 0, 100}
	r        = float64(width) * 0.8 * 0.5
	center   = image.Point{width / 2, width / 2}
)

func createWhiteImage() *image.RGBA {
	// 画像の生成
	img := image.NewRGBA(image.Rect(x, y, width, height))
	// 背景色の描画
	rect := img.Rect
	for h := rect.Min.Y; h < rect.Max.Y; h++ {
		for w := rect.Min.X; w < rect.Max.X; w++ {
			img.Set(w, h, whiteCol)
		}
	}
	return img
}

func addLabel(img *image.RGBA, x, y int, label string) {
	point := fixed.Point26_6{fixed.Int26_6(x * 64), fixed.Int26_6(y * 64)}
	d := &font.Drawer{
		Dst:  img,
		Src:  image.NewUniform(blackCol),
		Face: basicfont.Face7x13,
		Dot:  point,
	}
	d.DrawString(label)
}

type data struct {
	label string
	value float64
}

func TestDrawChart(t *testing.T) {
	datas := []data{
		data{label: "ATK", value: 100.0},
		data{label: "DEF", value: 60.0},
		data{label: "MAT", value: 5.0},
	}
	rcnt := float64(len(datas))

	img := createWhiteImage()

	// 背景色の塗りつぶし
	cx := float64(center.X)
	cy := float64(center.Y)

	// メモリ線の描画
	rad := 2 * math.Pi / rcnt
	drad := 2*math.Pi - rad - 2*math.Pi/4
	for j, v := range datas {
		y1, x1 := math.Sincos(rad*float64(j) + drad)
		for i := 0.0; i < r; i += 0.1 {
			x2 := int(float64(center.X) + x1*i)
			y2 := int(float64(center.Y) + y1*i)
			img.Set(x2, y2, blackCol)
		}
		// ラベル描画
		x2 := int(float64(center.X) + x1*r)
		y2 := int(float64(center.Y) + y1*r)
		addLabel(img, int(x2), int(y2), fmt.Sprintf("%s", v.label))
	}

	// 円の枠線描画
	div := 5
	m := int(r) / div
	for rr := 0; rr < int(math.Ceil(r)); rr++ {
		if rr%m == 0 {
			rrf := float64(rr)
			for rad := 0.0; rad < float64(width)*rrf; rad += 0.1 {
				var x int = int(cx + math.Cos(rad)*rrf)
				var y int = int(cy + math.Sin(rad)*rrf)
				img.Set(x, y, blackCol)
			}
		}
	}

	// 画像ファイルの生成
	w, err := os.Create(fmt.Sprintf("img/chart%d.png", int(rcnt)))
	if err != nil {
		log.Fatal(err)
	}
	defer w.Close()

	// 画像データの書き込み
	if err := png.Encode(w, img); err != nil {
		log.Fatal(err)
	}
}

func TestDrawText(t *testing.T) {
	img := createWhiteImage()
	addLabel(img, 20, 30, "Hello Go")

	f, err := os.Create("img/text.png")
	if err != nil {
		panic(err)
	}
	defer f.Close()
	if err := png.Encode(f, img); err != nil {
		panic(err)
	}
}

func TestFillBackground(t *testing.T) {
	img := createWhiteImage()

	// 背景色の塗りつぶし
	for rr := 0.0; rr < r; rr += 0.1 {
		for rad := 0.0; rad < width*rr; rad++ {
			x := int(float64(center.X) + math.Cos(rad)*rr)
			y := int(float64(center.Y) + math.Sin(rad)*rr)
			img.Set(x, y, redCol)
		}
	}

	f, err := os.Create("img/fill_background.png")
	if err != nil {
		panic(err)
	}
	defer f.Close()
	if err := png.Encode(f, img); err != nil {
		panic(err)
	}
}

css 外侧余白の右ボーダー

            <dl class="dl_border_style flex_box flex_wrap flex_start">
                <dt>会社名</dt>
                <dd>長崎名水株式会社</dd>
                <dt>住所</dt>
                <dd>〒859-0144 長崎県諫早市高来町溝口214</dd>
                <dt>連絡先</dt>
                <dd>TEL [phone] / FAX [phone]</dd>
            </dl>

.dl_border_style {
    width: 530px;
}

.dl_border_style dt {
    width: 120px;
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #cdcdcd;
    padding: 15px;
}

.dl_border_style dt:before {
    content: '';
    position: absolute;
    right: 0;
    display: inline-block;
    width: 1px;
    height: 35px;
    background-color: #cdcdcd;
}

.dl_border_style dd {
    width: 410px;
    box-sizing: border-box;
    border-bottom: 1px solid #cdcdcd;
    padding: 15px 20px 15px 30px;
}

.dl_border_style dt:nth-of-type(01),
.dl_border_style dd:nth-of-type(01) {
    border-top: 1px solid #cdcdcd;
}