go语言目前没有官方版本的UI库,可能是谷歌将go语言定位成服务器语言,认为没有必要给go写一套ui框架,不过在github上有不少大牛为go写了UI库效果都还不错.
本人之前是做Android开发的,有幸接触Android的Gallery2源码,这套代码是用opengl绘制的整个相册界面;自己就想是否能用类似的方式为go写一个ui库呢,庆幸的是,在github上有很多go和opengl的绑定框架,那就站在巨人的肩膀上,说做就做吧!
项目地址https://github.com/tenny1225/go-ui
首先说说整个架构吧,因为本人之前是做Android开发的,所以很多地方有模仿Android的痕迹.
对于opengl的绑定这里使用了
github.com/go-gl这个库,具体介绍可以去github查看.
- canvas进行绘制的控制操作
type ZCanvas interface {
DrawCircle(dx, dy, radius float64, p ZPaint)
DrawLine(x1, y1, x2, y2 float64, p ZPaint)
DrawRect(x1, y1, x2, y2, rounCorner float64, p ZPaint)
DrawImage(x, y float64, img image.Image)
SetTranslate(x, y float64)
SetScale(sx, sy float64)
SetRotate(angle, dx, dy, x, y, z float64)
Save()
Restore()
SetAlpha(a float64)
GetTranslate() *ZTranslate
GetScale() *ZScale
GetRotate() *ZRotate
GetAlpha() float64
}
这里主要定义了一些简单的绘制控制操作,具体绘制方式是通过github.com/fogleman/gg这个库实现的,这里提取出接口,可以根据不同的绘制方式进行扩展.
- texture进行opengl的绘制
texture主要是接受canvas层传递过来的像素数据,进行纹理和坐标的转换后,最后进行绘制.
func (t *Texture) Draw(c ZCanvas, x, y float64) {
tran := c.GetTranslate()
if tran != nil {
x = x + tran.X
y = y + tran.Y
}
//获取窗口真实宽高
winWidth, winHeight := (t.ctx.Value("window").(*glfw.Window)).GetSize()
//将纹理左上角坐标转换成opengl坐标
x, y = AppCoordinate2OpenGL(winWidth, winHeight, x, y)
//将纹理宽高转换成相对opengl坐标宽高
w, h := AppWidthHeight2OpenGL(winWidth, winHeight, (float64(t.Width)), (float64(t.Height)))
//判断是否需要绘制透明度
if t.IsAlpha {
gl.Enable(gl.BLEND);
gl.BlendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
}
gl.MatrixMode(gl.MODELVIEW)
gl.LoadIdentity()
gl.BindTexture(gl.TEXTURE_2D, t.texture)
gl.LineWidth(0)
gl.PointSize(0)
gl.Begin(gl.QUADS)
//左下角坐标
gl.Normal3f(float32(x), float32(y-h), 0) //
gl.TexCoord2f(1, 1)
//右下角坐标
gl.Vertex3f(float32(x+w), float32(y-h), 0) //
gl.TexCoord2f(1, 0)
//右上角坐标
gl.Vertex3f(float32(x+w), float32(y), 0) //
gl.TexCoord2f(0, 0)
//左上角坐标
gl.Vertex3f(float32(x), float32(y), 0) //
gl.TexCoord2f(0, 1)
gl.Vertex3f(float32(x), float32(y-h), 0) //
gl.End()
gl.PopMatrix()
}
- view是界面控件的最小单位
type Viewer interface {
Init()
Measure(w, h int)
SetMeasureSize(w, h int)
GetMeasureSize() (w, h int)
GetBounds() *Rect
GetChildren() []Viewer
GetChildrenSize() int
AddChild(v Viewer)
RemoveChild(v Viewer)
Layout(x, y, w, h int)
Draw(canvas ZCanvas)
Recycle()
setParent(v Viewer)
getParent() Viewer
}
这里主要实现一系列方法,对view进行子view的添加和移除,测量和摆放等操作.通过Draw(canvas ZCanvas)方法传递过来的canvas接口,可以对view进行自定义操作.
- page类似Android的activity,主要管理每个界面的生命周期
type Pager interface {
init(panel *ZPanel, ctx *ZContext)
setBundle(b map[string]interface{})
getBundle() map[string]interface{}
GetSate() PageState
GetContentView() Viewer
SetContentView(v Viewer)
Create(bundle map[string]interface{})
Resume()
Pause()
Destroy()
Finish()
StartPage(p Pager)
}
这里主要定义了create,resume,pause,destroy等方法,在页面切换是进行生命周期的调用
- window主要是用来组织Page,例如界面的跳转切换
func (w *ZPanel) Run() {
if err := glfw.Init(); err != nil {
log.Fatalln("failed to initialize glfw:", err)
}
defer glfw.Terminate()
glfw.WindowHint(glfw.Resizable, glfw.False)
glfw.WindowHint(glfw.ContextVersionMajor, 2)
glfw.WindowHint(glfw.ContextVersionMinor, 1)
var err error
w.Window, err = glfw.CreateWindow(int(w.Width), int(w.Height), w.Title, nil, nil)
if err != nil {
panic(err)
}
w.Context = &ZContext{}
w.Context.Context = context.WithValue(context.Background(), "window", w.Window)
w.Canvas = NewGL2Canvas(w.Context)
w.Window.MakeContextCurrent()
if err := gl.Init(); err != nil {
panic(err)
}
gl.ClearColor(0.5, 0.5, 0.5, 0.0)
gl.ClearDepth(1)
gl.DepthFunc(gl.LEQUAL)
ambient := []float32{0.5, 0.5, 0.5, 1}
diffuse := []float32{1, 1, 1, 1}
lightPosition := []float32{-5, 5, 10, 0}
gl.Lightfv(gl.LIGHT0, gl.AMBIENT, &ambient[0])
gl.Lightfv(gl.LIGHT0, gl.DIFFUSE, &diffuse[0])
gl.Lightfv(gl.LIGHT0, gl.POSITION, &lightPosition[0])
gl.Enable(gl.LIGHT0)
gl.MatrixMode(gl.PROJECTION)
gl.LoadIdentity()
//gl.Frustum(-1, 1, -1, 1, 1.0, 5.0)
gl.Ortho(-3, 3, -3, 3, -3.0, 100.0)
gl.MatrixMode(gl.MODELVIEW)
gl.LoadIdentity()
for !w.Window.ShouldClose() {
gl.Clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
gl.ClearColor(1, 1, 1, 0)
if len(w.Pages) > 0 {
p := w.Pages[len(w.Pages)-1]
if p.GetSate() == PageStateInit {
p.Create(p.getBundle())
}
rootView := p.GetContentView()
if rootView != nil {
b := rootView.GetBounds()
c := w.Canvas
c.Save()
c.SetTranslate(float64(b.X), float64(b.Y))
rootView.Draw(c)
c.Restore()
}
if p.GetSate() == PageStateCreated {
p.Resume()
} else if p.GetSate() == PageStatePaused {
p.Resume()
}
}
w.Window.SwapBuffers()
glfw.PollEvents()
}
}
window主要调用了go-gl库进行窗口的创建,根据当前的界面,进行不同生命周期的调用操作等.
下面是一个例子,主要是绘制一个绿色的按钮,不过还没有点击事件,因为还未把input集成进来
package main
import (
."GO-UI/content"
"image"
"github.com/fogleman/gg"
"image/color"
)
func main() {
p := NewZPanel(500, 500, "test");
page:=&TestPage{}
p.StartPage(page)
p.Run()
}
//自定义的TestButtonView,只需要组合View结构体
type TestButtonView struct {
View
}
func (this *TestButtonView) Draw(canvas ZCanvas) {
this.View.Draw(canvas)
rect:=this.GetBounds()
paint:=NewPaint()
paint.Color = color.RGBA{0,225,225,255}
canvas.DrawRect(0,0,float64(rect.Width),float64(rect.Height),10,paint)
img:=image.NewRGBA(image.Rect(0,0,rect.Width,rect.Height))
c:=gg.NewContextForRGBA(img)
c.SetColor(color.White)
c.DrawStringAnchored("button1",float64(rect.Width/2),float64(rect.Height/2),0.5,0.5)
c.Fill()
canvas.DrawImage(0,0,img)
}
//自定义的TestPage,只需要组合Page结构体
type TestPage struct {
Page
}
func (this *TestPage) Create(bundle map[string]interface{}) {
this.Page.Create(bundle)
v := &TestButtonView{}
v.Init()
v.Layout(20, 20, 130, 60)
this.SetContentView(v)
}
func (this *TestPage) Resume() {
this.Page.Resume()
}
效果图
