rui_orig/demo/canvasDemo.go

335 lines
9.7 KiB
Go

package main
import (
"math"
"strconv"
"github.com/anoshenko/rui"
)
const canvasDemoText = `
GridLayout {
width = 100%, height = 100%, cell-height = "auto, 1fr",
content = [
DropDownList {
id = canvasType, current = 0, margin = 8px,
items = ["Image", "Rectangles & ellipse", "Text style", "Text align", "Line style", "Transformations"]
},
CanvasView {
id = canvas, row = 1, width = 100%, height = 100%,
}
]
}
`
var sampleImage rui.Image
func rectangleCanvasDemo(canvas rui.Canvas) {
width := canvas.Width()
height := canvas.Height()
canvas.Save()
canvas.SetSolidColorFillStyle(0xFF008000)
canvas.SetSolidColorStrokeStyle(0xFFFF0000)
w2 := width / 2
h2 := height / 2
canvas.FillRect(10, 10, w2-20, h2-20)
canvas.StrokeRect(9.5, 9.5, w2-19, h2-19)
canvas.SetLinearGradientFillStyle(w2+10, 10, 0xFFFF0000, width-20, 10, 0xFF0000FF, []rui.GradientPoint{
{Offset: 0.3, Color: 0xFFFFFF00},
{Offset: 0.5, Color: 0xFF00FF00},
{Offset: 0.7, Color: 0xFF00FFFF},
})
canvas.SetLinearGradientStrokeStyle(10, 10, 0xFFFF00FF, 10, h2-20, 0xFF00FFFF, []rui.GradientPoint{
{Offset: 0.5, Color: 0xFF00FF00},
})
canvas.SetLineWidth(5)
canvas.FillAndStrokeRoundedRect(w2+7.5, 7.5, w2-15, h2-15, 20)
canvas.SetRadialGradientFillStyle(w2/2-20, h2+h2/2-20, 10, 0xFFFF0000, w2/2+20, h2+h2/2+20, w2/2, 0xFF0000FF, []rui.GradientPoint{
{Offset: 0.3, Color: 0xFFFFFF00},
{Offset: 0.5, Color: 0xFF00FF00},
{Offset: 0.7, Color: 0xFF00FFFF},
})
canvas.SetRadialGradientStrokeStyle(w2/2, h2+h2/2, h2/2, 0xFFFFFF00, w2/2, h2+h2/2, h2, 0xFF00FFFF, []rui.GradientPoint{
{Offset: 0.5, Color: 0xFF00FF00},
})
canvas.SetLineWidth(7)
canvas.FillAndStrokeRect(10, h2+10, w2-20, h2-20)
//canvas.SetSolidColorFillStyle(0xFF00FFFF)
canvas.SetImageFillStyle(sampleImage, rui.RepeatXY)
canvas.SetSolidColorStrokeStyle(0xFF0000FF)
canvas.SetLineWidth(4)
canvas.FillAndStrokeEllipse(w2+w2/2, h2+h2/2, w2/2-10, h2/2-10, 0)
canvas.Restore()
}
func textCanvasDemo(canvas rui.Canvas) {
canvas.Save()
canvas.SetTextAlign(rui.LeftAlign)
canvas.SetTextBaseline(rui.TopBaseline)
canvas.SetSolidColorFillStyle(0xFF000000)
canvas.FillText(10, 10, "Default font")
canvas.StrokeText(300, 10, "Default font")
canvas.SetSolidColorFillStyle(0xFF800000)
canvas.SetSolidColorStrokeStyle(0xFF800080)
canvas.SetFont("courier", rui.Pt(12))
canvas.FillText(10, 30, "courier, 12pt")
canvas.StrokeText(300, 30, "courier, 12pt")
canvas.SetSolidColorFillStyle(0xFF008000)
canvas.SetSolidColorStrokeStyle(0xFF008080)
canvas.SetFontWithParams("Courier new, courier", rui.Pt(12), rui.FontParams{
Italic: true,
})
canvas.FillText(10, 50, `Courier new, 12pt, italic`)
canvas.StrokeText(300, 50, `Courier new, 12pt, italic`)
canvas.SetSolidColorFillStyle(0xFF000080)
canvas.SetLinearGradientStrokeStyle(10, 70, 0xFF00FF00, 10, 90, 0xFFFF00FF, nil)
canvas.SetFontWithParams("sans-serif", rui.Pt(12), rui.FontParams{
SmallCaps: true,
})
canvas.FillText(10, 70, "sans-serif, 12pt, small-caps")
canvas.StrokeText(300, 70, "sans-serif, 12pt, small-caps")
canvas.SetLinearGradientFillStyle(10, 90, 0xFFFF0000, 10, 110, 0xFF0000FF, nil)
canvas.SetSolidColorStrokeStyle(0xFF800080)
canvas.SetFontWithParams("serif", rui.Pt(12), rui.FontParams{
Weight: 7,
})
canvas.FillText(10, 90, "serif, 12pt, weight: 7(bold)")
canvas.StrokeText(300, 90, "serif, 12pt, weight: 7(bold)")
widthSample := "Text width sample"
w := canvas.TextWidth(widthSample, "sans-serif", rui.Px(20))
canvas.SetFont("sans-serif", rui.Px(20))
canvas.SetSolidColorFillStyle(rui.Blue)
canvas.SetTextBaseline(rui.BottomBaseline)
canvas.FillText(10, 150, widthSample)
canvas.SetSolidColorStrokeStyle(rui.Black)
canvas.SetLineWidth(1)
canvas.DrawLine(10, 150, 10, 170)
canvas.DrawLine(10+w, 150, 10+w, 170)
canvas.DrawLine(10, 168, 10+w, 168)
canvas.DrawLine(10, 168, 20, 165)
canvas.DrawLine(10, 168, 20, 171)
canvas.DrawLine(10+w, 168, w, 165)
canvas.DrawLine(10+w, 168, w, 171)
canvas.SetSolidColorFillStyle(rui.Black)
canvas.SetFont("sans-serif", rui.Px(8))
canvas.SetTextAlign(rui.CenterAlign)
canvas.FillText(10+w/2, 167, strconv.FormatFloat(w, 'g', -1, 64))
canvas.Restore()
}
func textAlignCanvasDemo(canvas rui.Canvas) {
canvas.Save()
canvas.SetFont("sans-serif", rui.Pt(10))
canvas.SetSolidColorFillStyle(0xFF000000)
canvas.SetSolidColorStrokeStyle(0xFF00FFFF)
baseline := []string{"Alphabetic", "Top", "Middle", "Bottom", "Hanging", "Ideographic"}
align := []string{"Left", "Right", "Center", "Start", "End"}
center := []float64{20, 120, 70, 20, 120}
for b, bText := range baseline {
for a, aText := range align {
canvas.SetTextAlign(a)
canvas.SetTextBaseline(b)
x := float64(a * 140)
y := float64(b * 40)
canvas.DrawLine(x+4, y+20, x+132, y+20)
canvas.DrawLine(x+center[a], y+2, x+center[a], y+38)
canvas.FillText(x+center[a], y+20, bText+","+aText)
}
}
canvas.Restore()
}
func lineStyleCanvasDemo(canvas rui.Canvas) {
canvas.Save()
canvas.SetSolidColorStrokeStyle(0xFF00FFFF)
canvas.SetLineWidth(1)
canvas.DrawLine(20, 30, 20, 90)
canvas.DrawLine(170, 30, 170, 90)
canvas.SetSolidColorStrokeStyle(0xFF0000FF)
canvas.SetFont("courier", rui.Pt(12))
canvas.SetTextBaseline(rui.MiddleBaseline)
canvas.FillText(80, 15, "SetLineCap(...)")
canvas.SetFont("courier", rui.Pt(10))
for i, cap := range []string{"ButtCap", "RoundCap", "SquareCap"} {
canvas.SetSolidColorStrokeStyle(0xFF00FFFF)
canvas.SetLineWidth(1)
y := float64(40 + 20*i)
canvas.DrawLine(10, y, 180, y)
canvas.SetSolidColorStrokeStyle(0xFF000000)
canvas.SetLineWidth(10)
canvas.SetLineCap(i)
canvas.DrawLine(20, y, 170, y)
canvas.FillText(200, y, cap)
}
canvas.SetSolidColorStrokeStyle(0xFF0000FF)
canvas.SetFont("courier", rui.Pt(12))
canvas.FillText(80, 115, "SetLineJoin(...)")
canvas.SetSolidColorStrokeStyle(0xFF000000)
canvas.SetLineWidth(10)
canvas.SetLineCap(rui.ButtCap)
canvas.SetFont("courier", rui.Pt(10))
for i, join := range []string{"MiterJoin", "RoundJoin", "BevelJoin"} {
y := float64(140 + 40*i)
path := rui.NewPath()
path.MoveTo(20, y)
path.LineTo(50, y+40)
path.LineTo(80, y)
path.LineTo(110, y+40)
path.LineTo(140, y)
path.LineTo(170, y+40)
path.LineTo(200, y)
canvas.SetLineJoin(i)
canvas.StrokePath(path)
canvas.FillText(210, y+20, join)
}
canvas.SetSolidColorStrokeStyle(0xFF0000FF)
canvas.SetFont("courier", rui.Pt(12))
canvas.FillText(20, 300, "SetLineDash([]float64{16, 8, 4, 8}, ...)")
canvas.SetFont("courier", rui.Pt(10))
canvas.SetLineDash([]float64{16, 8, 4, 8}, 0)
canvas.SetSolidColorStrokeStyle(0xFF000000)
canvas.SetLineWidth(4)
canvas.SetLineCap(rui.ButtCap)
canvas.DrawLine(20, 330, 200, 330)
canvas.FillText(220, 330, "SetLineCap(ButtCap)")
canvas.SetLineDash([]float64{16, 8, 4, 8}, 4)
canvas.DrawLine(20, 360, 200, 360)
canvas.FillText(220, 360, "offset = 4")
canvas.SetLineDash([]float64{16, 8, 4, 8}, 0)
canvas.SetLineCap(rui.RoundCap)
canvas.SetShadow(4, 4, 2, 0xFF808080)
canvas.DrawLine(20, 390, 200, 390)
canvas.ResetShadow()
canvas.FillText(220, 390, "SetLineCap(RoundCap)")
canvas.Restore()
}
func transformCanvasDemo(canvas rui.Canvas) {
drawFigure := func() {
w := int(canvas.Width() / 2)
h := int(canvas.Height() / 2)
nx := (w/2)/20 + 1
ny := (h/2)/20 + 1
x0 := float64((w - nx*20) / 2)
y0 := float64((h - ny*20) / 2)
x1 := x0 + float64((nx-1)*20)
y1 := y0 + float64((ny-1)*20)
canvas.SetFont("serif", rui.Pt(10))
canvas.SetSolidColorFillStyle(rui.Black)
canvas.SetTextAlign(rui.CenterAlign)
canvas.SetTextBaseline(rui.BottomBaseline)
for i := 0; i < nx; i++ {
x := x0 + float64(i*20)
canvas.DrawLine(x, y0, x, y1)
canvas.FillText(x, y0-4, strconv.Itoa(i))
}
canvas.SetTextAlign(rui.RightAlign)
canvas.SetTextBaseline(rui.MiddleBaseline)
for i := 0; i < ny; i++ {
y := y0 + float64(i*20)
canvas.DrawLine(x0, y, x1, y)
canvas.FillText(x0-4, y, strconv.Itoa(i))
}
}
canvas.SetFont("courier", rui.Pt(14))
canvas.SetSolidColorFillStyle(rui.Black)
canvas.SetTextAlign(rui.CenterAlign)
canvas.SetTextBaseline(rui.TopBaseline)
canvas.FillText(canvas.Width()/4, 8, "Original")
canvas.FillText(canvas.Width()*3/4, 8, "SetScale(1.2, 0.8)")
canvas.FillText(canvas.Width()/4, canvas.Height()/2+8, "SetRotation(math.Pi / 6)")
canvas.FillText(canvas.Width()*3/4, canvas.Height()/2+8, "SetTransformation(0.8, 1.2, 0.2, 0.4, ...)")
drawFigure()
canvas.SetScale(1.2, 0.8)
canvas.SetTranslation(canvas.Width()/2.4, 0)
drawFigure()
canvas.ResetTransformation()
canvas.SetTranslation(canvas.Width()/8, canvas.Height()/2-canvas.Height()/8)
canvas.SetRotation(math.Pi / 6)
drawFigure()
canvas.ResetTransformation()
//canvas.SetTranslation(canvas.Width()/2, canvas.Height()/2)
canvas.SetTransformation(0.8, 1.2, 0.2, 0.4, canvas.Width()/(2*0.8)-canvas.Width()/8, canvas.Height()/(2*1.2)-canvas.Height()/16)
drawFigure()
}
var image rui.Image
func imageCanvasDemo(canvas rui.Canvas) {
if image != nil {
canvas.DrawImage(50, 20, image)
} else {
image = rui.LoadImage("tile00.svg", func(img rui.Image) {
if img.LoadingStatus() == rui.ImageReady {
canvas.View().Redraw()
}
}, canvas.View().Session())
}
}
func createCanvasDemo(session rui.Session) rui.View {
view := rui.CreateViewFromText(session, canvasDemoText)
if view == nil {
return nil
}
rui.Set(view, "canvas", rui.DrawFunction, imageCanvasDemo)
rui.Set(view, "canvasType", rui.DropDownEvent, func(list rui.DropDownList, number int) {
drawFuncs := []func(rui.Canvas){
imageCanvasDemo,
rectangleCanvasDemo,
textCanvasDemo,
textAlignCanvasDemo,
lineStyleCanvasDemo,
transformCanvasDemo,
}
if number >= 0 && number < len(drawFuncs) {
rui.Set(view, "canvas", rui.DrawFunction, drawFuncs[number])
}
})
sampleImage = rui.LoadImage("image_sample.png", nil, session)
return view
}