update docs

Author: evilbinary

docs/第四章 GUI库/4.2 gui库使用.md

@@ -13,7 +13,160 @@ gui是基于opengl写的一款鸭子gui，简单易用。
 一切基于`widget`，大多数方法都是`widget`操作,`widget-set-attrs`设置属性。
 常见的基本组件有`dialog button image text scroll edit video tab tree view pop progress`，基本上是3个参数，宽度、高度、内容。
 
-## 1.2 简单例子
+## 1.2 组件
+
+
+### 1.2.1 按钮
+定义一个按钮组件
+```scheme
+(button 120.0 30.0 "主要")
+```
+定义一个checkbox
+```scheme
+(define (checkbox w h t)
+    (let ((box (text w h t))
+        (icon-check (load-texture "check.png"))
+        (icon-checked (load-texture "checked.png"))
+        )
+        (widget-set-events box 'click (lambda (w p type data)
+                (if (eq? #t (widget-get-attrs w 'checked))
+                    (widget-set-attrs w 'checked #f)
+                    (widget-set-attrs w 'checked #t)
+                )))
+        (widget-add-draw
+            box
+            (lambda (w p)
+            (let ((x (widget-get-attr w %gx))
+                    (y (widget-get-attr w %gy))
+                    (checked (widget-get-attrs w 'checked))
+                    )
+                    (if (eq? #t checked)
+                        (draw-image (+ 6.0 x) (+ y 6.0) 20.0 20.0 icon-checked)
+                        (draw-image (+ 6.0 x) (+ y 6.0) 20.0 20.0 icon-check)
+                        ))))
+     box
+    )
+)
+(checkbox 120.0 30.0 "我是checkbox")
+```
+
+### 1.2.2 图片
+定义一个图片组件
+```scheme
+(image 180.0 180.0 "duck.png")
+```
+自定义网络下载图片组件
+```scheme
+(define (image-net w h src)
+  (let ((img (image w h src))
+	(file-name (format  "~a.jpg" (string-hash src))))
+    (widget-set-attrs img 'mode 'center-crop)
+    (if (file-exists? file-name)
+	(begin
+	  (widget-set-attrs img 'src file-name)
+	  (widget-set-attrs img 'load #f))
+	(fork-thread
+	 (lambda ()
+	   (let ((file (url->file file-name src) ))
+	     (if (file-exists? file)
+		 (begin 
+		   (widget-set-attrs img 'src file-name)
+		   (widget-set-attrs img 'load #f)
+		   (window-post-empty-event)
+		   ))
+	     )
+	   ))
+     )
+    img
+    ))
+;;使用图片下载
+(image-net 180.0 180.0 "http://www.cosplayjia.com/up/spw/img/171220/1712200840035a39b16346c5a/5a39b1646c7ff.jpg")
+```
+
+### 1.2.3 文本
+```scheme
+(text 120.0 30.0 "我是文本文本，只读")
+```
+
+### 1.2.3 对话框
+```scheme
+(dialog 430.0 10.0 230.0 600.0 "视频demo")
+```
+
+### 1.2.4 树
+```scheme
+(tree 200.0 2500.0 "根节点")
+```
+自定义带图标的树
+```scheme
+(define (icon-tree w h text)
+        (let ((it (tree w h text))
+            (file-icon (load-texture "file-text.png"))
+            (dir-icon (load-texture "folder.png"))
+            )
+            (widget-add-draw
+            it
+            (lambda (w p)
+            (let ((x (vector-ref w %gx))
+                (y (vector-ref w %gy)))
+                (if (or (null? (widget-get-attrs w 'dir)) (<= (length (widget-get-child w) ) 0))
+                    (draw-image (+  -20.0 x) (+ y 4.0) 15.0 15.0 dir-icon)
+                    (draw-image (+ -20.0 x) (+ y 4.0) 15.0 15.0 dir-icon))
+                )
+            ))
+            (widget-set-padding it 15.0 20.0 20.0 20.0)
+            it
+            ))
+
+(icon-tree  200.0 200.0  (format "节点~a\n" i))
+```
+
+
+### 1.2.5 文本编辑
+```scheme
+(edit 260.0 120.0 "scheme-lib QQ群：Lisp兴趣小组239401374 啊哈哈")
+```
+
+设置编辑属性
+```scheme
+;;显示行号
+(widget-set-attrs editor 'show-no 1)
+;;设置行号颜色
+(widget-set-attrs editor 'lineno-color #xff6272a4)
+;;设置选择背景色
+(widget-set-attrs editor 'select-color #xff44475a)
+;;设置光标颜色
+(widget-set-attrs editor 'cursor-color #xfff8f8f0)
+;;设置字体大小
+(widget-set-attrs editor 'font-size 20.0)
+(widget-set-attrs editor 'font-line-height 1.2)
+```
+
+
+### 1.2.6 视频
+```scheme
+(video (/ 640.0 3.0) (/ 360.0 3) "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4")
+```
+
+### 1.2.7 标签
+```scheme
+(tab 450.0 300.0 (list "标签1" "标签2" "标签3" ))
+```
+
+### 1.2.8 容器
+```scheme
+(view 260.0 120.0)
+```
+### 1.2.9 弹出
+```scheme
+(pop 100.0 40.0 "根节点")
+```
+### 1.2.10 进度条
+```scheme
+(progress 200.0 10.0 20.0)
+```
+
+## 1.3 简单例子
 ```scheme
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;;Copyright 2016-2080 evilbinary.