--- id: 974f36e12dfcece861bfda1af9303980 author: Yunjin Lee title: 'CGo без Go: GUI реализация с Tcl/Tk (modernc.org/tk9.0): пакетиране на уиджети и рендиране на изображения' description: Реализира създаване на прозорци, поставяне на бутони и менюта, както и изобразяване на SVG/PNG/ICO изображения в Go, като използва кросплатформената библиотека modernc.org/tk9.0, която не зависи от CGo. language: bg date: 2024-10-22T11:51:27.614782351Z path: /blog/posts/creating-a-gui-with-tk-in-go-z004dd008 category: gui lang_canonical: ko: https://blog.naver.com/bugaku/223629101405 --- Python има вградени GUI библиотеки по подразбиране, като Tkinter. Наскоро за езика Go бе разработена [CGo-Free, Cross Platform Tk библиотека](https://pkg.go.dev/modernc.org/tk9.0), която позволява използването на Tcl/Tk. Днес ще разгледаме нейните основни начини на употреба. ## Създаване на Hello, Tk Първо, нека започнем с прост пример 'Hello, TK!'. ```go package main import tk "modernc.org/tk9.0" func main() { tk.Pack( tk.TButton( tk.Txt("Hello, TK!"), tk.Command(func() { tk.Destroy(tk.App) })), tk.Ipadx(10), tk.Ipady(5), tk.Padx(15), tk.Pady(10), ) tk.App.Wait() } ``` ![резултат от изпълнението на hello-tk](/assets/images/go-tk-helloworld-svg-etc/go-tk-hello.png) --- Нека разгледаме по-подробно горния пример с код и резултата от изпълнението. Ако имате опит с Tk в Python, ще разпознаете структурата, при която уиджетите се опаковат (pack) във вътрешността на прозорец или директно в прозореца. В зависимост от вида на уиджета, етикети и други елементи се включват в него. _Ipadx и Ipady са съкращения от Internal padding (вътрешно отстояние) и регулират отстоянията на вътрешните уиджети. В този пример се регулира отстоянието на бутона._ Тази библиотека включва структурата Window, а променливата App управлява главния прозорец. Тя е предварително дефинирана във вътрешността на библиотеката. Затова функцията tk.App.Destroy(), която прекратява tk.App.Wait(), служи за затваряне на главния прозорец. Сега нека разгледаме няколко примера от папката \_examples в GitLab. ## Обработка на SVG файлове Следва пример, който показва SVG файл в уиджет Label. ```go package main import . "modernc.org/tk9.0" // https://en.wikipedia.org/wiki/SVG const svg = ` ` func main() { Pack(Label(Image(NewPhoto(Data(svg)))), TExit(), Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m")) App.Center().Wait() } ``` ![резултат от изпълнението на go-tk-svg](/assets/images/go-tk-helloworld-svg-etc/go-tk-svg.png) Обработката на SVG в тази библиотека се извършва по следния начин: 1. Съдържанието на SVG файла се прочита като низ (или се включва директно, както в примера по-горе). 2. Това съдържание се предава на функцията Data, която го преобразува в низ с опции (опция -data). 3. Преобразуваните байтове се предават на функцията NewPhoto, която връща указател към структурата Img, представляваща Tcl/Tk изображение. 4. При преминаване през функцията Image указателят към структурата Img се преобразува в низ с добавена опция -Image. 5. Преобразуването в низ, съдържащ суровите (RAW) стойности на структурата, е необходимо за създаването на уиджета Label. ICO и PNG файловете се обработват по подобен начин. ## Обработка на PNG файлове ```go package main import _ "embed" import . "modernc.org/tk9.0" //go:embed gopher.png var gopher []byte func main() { Pack(Label(Image(NewPhoto(Data(gopher)))), TExit(), Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m")) App.Center().Wait() } ``` ![резултат от изпълнението на go-tk-png](/assets/images/go-tk-helloworld-svg-etc/go-tk-png.png) Процесът за обработка на PNG файлове е следният: 1. Вграденият файл gopher.png се преобразува в низ с опции. 2. Чрез функцията NewPhoto се преобразува в тип \*Img. 3. Чрез функцията Image се преобразува в RAW низ, след което се създава уиджетът Label. ICO файловете се обработват по същия начин, а разликата спрямо SVG формата е само във вътрешния начин на обработка във функцията Data. Нека разгледаме какво представлява "низ с опции": ```go type rawOption string ``` Низът с опции, за който споменахме по-горе, е просто форматиран низ. ```go func (w *Window) optionString(_ *Window) string { return w.String() } ``` Методът optionString е метод на указателя към Window и връща низ. Накрая нека разгледаме вътрешната структура на функцията Data: ```go func Data(val any) Opt { switch x := val.(type) { case []byte: switch { case bytes.HasPrefix(x, pngSig): // ок case bytes.HasPrefix(x, icoSig): b := bytes.NewBuffer(x) img, err := ico.Decode(bytes.NewReader(x)) if err != nil { fail(err) return rawOption("") } b.Reset() if err := png.Encode(b, img); err != nil { fail(err) return rawOption("") } val = b.Bytes() } } return rawOption(fmt.Sprintf(`-data %s`, optionString(val))) } ``` От кода се вижда, че при ICO и PNG файловете е необходим процес на кодиране и декодиране. В останалите случаи, без специално преобразуване, към байтовия низ се добавя само опцията -data, за да се покаже, че е резултат от функцията Data. ### Зареждане на изображение чрез уиджет меню Като добавим уиджет меню към примера за зареждане на PNG и ICO файлове, можем да създадем приложение, което показва избраното изображение. Първо, нека разгледаме прост пример с уиджет меню. ```go package main import ( "fmt" . "modernc.org/tk9.0" "runtime" ) func main() { menubar := Menu() fileMenu := menubar.Menu() fileMenu.AddCommand(Lbl("New"), Underline(0), Accelerator("Ctrl+N")) fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(func() { GetOpenFile() })) Bind(App, "", Command(func() { fileMenu.Invoke(1) })) fileMenu.AddCommand(Lbl("Save As..."), Underline(5)) fileMenu.AddSeparator() fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler()) Bind(App, "", Command(func() { fileMenu.Invoke(4) })) menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu)) App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS)) App.Configure(Mnu(menubar), Width("8c"), Height("6c")).Wait() } ``` ![резултат от изпълнението на go-tk-меню-бар](/assets/images/go-tk-helloworld-svg-etc/go-tk-menu-bar.png) В този пример опитахме създаване на лентата с менюта и самото меню, подчертаване на букви, опцията Command, свързване на клавишни комбинации и задаване на началния размер на прозореца на приложението. Сега ще променим функцията Command, зададена на GetOpenFile, така че да зарежда и показва изображение. Ще създадем програма, която показва необходимото изображение. Планът за написване на програмата е следният: 1. Ограничаване на отварянето само до PNG и ICO файлове 2. Обработка на файла, избран в диалоговия прозорец за файлове 3. Реализиране на уиджет за показване на изображението Ето кода, който отразява този план: ```go package main import ( "fmt" "log" "os" "runtime" "strings" . "modernc.org/tk9.0" ) func handleFileOpen() { s := GetOpenFile() for _, photo := range s { formatCheck := strings.Split(photo, ".") format := formatCheck[len(formatCheck)-1] if (strings.Compare(format, "png") == 0) || (strings.Compare(format, "ico") == 0) { picFile, err := os.Open(photo) if err != nil { log.Println("Error while opening photo, error is: ", err) } pictureRawData := make([]byte, 10000*10000) picFile.Read(pictureRawData) imageLabel := Label(Image(NewPhoto(Data(pictureRawData)))) Pack(imageLabel, TExit(), Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m")) } picFile.Close() } } func main() { menubar := Menu() fileMenu := menubar.Menu() fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(handleFileOpen)) Bind(App, "", Command(func() { fileMenu.Invoke(0) })) fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler()) Bind(App, "", Command(func() { fileMenu.Invoke(1) })) menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu)) App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS)) App.Configure(Mnu(menubar), Width("10c"), Height("10c")).Wait() } ``` ![резултат от изпълнението на go-tk-зареждане-на-изображение](/assets/images/go-tk-helloworld-svg-etc/go-tk-image-open.png) Този код работи по следния начин: 1. Проверява разширението на файла с функциите за сравнение на низове от пакета strings 2. Използва пакета os, за да отвори, прочете и затвори файла 3. Прочетеното изображение се показва в уиджет Label ## Обобщение В тази статия разгледахме следните теми, използвайки Tcl/Tk библиотеката за Go: 1. Основна структура на GUI приложение 2. Обработка на различни формати на изображения, като SVG, PNG и ICO 3. Опаковане на уиджети и управление на оформлението 4. Структура на обработката на данни за изображения 5. Свързване на клавишни комбинации и команди на уиджети Комбинирането на Go и Tcl/Tk позволява създаването на прости, но практични GUI програми. Надявам се, че на тази основа ще се заемете с разработката на по-сложни GUI приложения.