ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
### 2.1 示例长廊 示例长廊可以让你浏览包含在Kivy安装路径里面的许多例子。这些例子包括: * 包含在examples/路径的示例展示了各个库的独有的能力和Kivy的特色。 * 包含在examples/demos/路径里的示例则展示乐很多Kivy的功能。 另外有更多的Kivy程序: * 贯穿Kivy应用程序完成开发的教程。 * 在源代码子路径kivy/tests/里面的单元测试也是有用的帮助。 我们希望你在学习Kivy的道路上是充满快乐和激情的! #### 1) 3D旋转的猴子脑袋 这个例子展示了利用OpenGL渲染的一个旋转的3D猴子脑袋。它加载了一个Blender OBJ文件,着色器使用OpenGL's Shading Language(GLSL)语言写成,并利用了预定的回调功能。 monkey.boj文件是从Blender(一个3D制作软件)中导出的OBJ文件,该文件以文本的方式列出了顶点和脸部数据,同时被objloader.py文件中的一个类加载。simple.glsl文件是一个利用GLSL编写的简单的顶点和碎片着色器。 ![3Drendering__main__py](http://ww4.sinaimg.cn/large/577d3ebejw1f0mz3fvstuj20m70h5dg5.jpg) #### 2) 部件动画 该示例展示了如何将多部分的动画应用到一个按钮部件上。当你点击按钮的时候,你将会看到按钮标签*plop*会以动画的方式进行移动。 ![Widget animation](http://ww3.sinaimg.cn/large/577d3ebejw1f0mz5ovkcjj20c00aewej.jpg =100*188) #### 3)应用程序生成器的组合 这个例子展示了启动一个应用程序的不同方式。如果你在命令行运行它,而没有带任何的参数,你将会在终端上看到一个菜单;你也可以添加一个*'r'*参数来运行它。有许多日志选项来使得调试更容易,程序的执行顺序可能更清晰。每次你在命令行运行程序,仅有一个Kivy应用被创建。 该示例使用了testkvfile.kv和app_suite_data/testkvdir.kv文件。 ![Suite of Application Builders](http://ww2.sinaimg.cn/large/577d3ebejw1f0mz6ep9koj20i60e8q5s.jpg =100*100) #### 4)使用build()+return的应用程序示例 如果你在build()中返回了一个部件,或者你设置了self.root,那么一个应用程序被创建。 ![Application example using build() + return](http://ww2.sinaimg.cn/large/577d3ebejw1f0mz70idwpj20c00aet8s.jpg) #### 5)从一个.kv文件中创建应用 该示例展示了在你的应用程序中如何暗中使用一个.kv文件。你在运行时将会看到一个全屏的标签为*'Hello from test.kv'*的按钮。 当Kivy实例化App的一个子类后,它会暗中搜索一个.kv文件。因为APP的子类的名称是TestAPP,所以test.kv文件会被选中,这意味着Kivy会尝试着加载文件test.kv,该文件包含了一个根部件。 ![Application built from a .kv file](http://ww2.sinaimg.cn/large/577d3ebejw1f0mz7rfrm0j20c00aedfx.jpg) #### 6)在模板路径中的一个.kv文件中加载应用程序 这个示例展示了如何改变.kv文件的路径。你将会看到*'Hello from tmplate1/test.ky'*作为一个按钮 的标签。 由于Kivy实例化了App的子类TestApp,则变量kv_directory会被赋值。Kivy会在该路径中暗中搜索一个.kv文件以匹配子类的名称,查找template1/test.kv文件,该文件包含着根部件。 ![Application from a .kv in a Template Directory](http://ww3.sinaimg.cn/large/577d3ebejw1f0mz8ftambj20c00aedfy.jpg) #### 7)摄像头示例 这个例子展示了摄像头的简单应用。它显示了一个带有标签为*'play'*的按钮的窗口,按钮用来控制打开或关闭摄像头。要注意如果没有找到摄像头,则首先查看一下gstreamer模块有没有安装,Kv语言在处理过程中会抛出一个异常。 ![Camera Example](http://ww2.sinaimg.cn/large/577d3ebejw1f0mz90u5lpj20c00aewfk.jpg) #### 8)贝赛尔曲线示例 这个例子展示了如何从一个多边形计算出的贝赛尔曲线。你将会看到一个紫色的多边形以及由次计算出来的红色的贝赛尔曲线。你可以拖动滑块来重新计算曲线。 ![Bezier Example](http://ww2.sinaimg.cn/large/577d3ebejw1f0mz9jdlfgj20c00aemxo.jpg) #### 9)画布渲染强度测试 这个例子通过绘制巨大数量的小方块来测试我们的图形引擎的渲染表现。 ![Canvas stress](http://ww2.sinaimg.cn/large/577d3ebejw1f0mza1h2l7j20kw0h2n23.jpg) #### 10)椭圆示例 这个例子练习绘画出Kivy的logo。屏幕上方的滑块控制着绘画的开始、停止、宽、高等。*Reset*按钮用来重置滑块。Logo图标图片从kivy/data路径读取,整个例子使用kv语言描述。 ![Circle Example](http://ww3.sinaimg.cn/large/577d3ebejw1f0mzal7c21j20kw0h2jsi.jpg) #### 11)FBO示例 这个例子展示了使用FBO(Frame Buffer Off-screen)代替一个平的画布的布局。你可以看到一个黑色的画布和一个按钮。点击按钮将会使它左右移动。 ![FBO Canvas](http://ww2.sinaimg.cn/large/577d3ebejw1f0mzb531goj20c00aeq30.jpg) #### 12)平滑线条实验 这个例子展示了平滑线条关于快速渲染线条方面的特征。你将会看到多个线段构成的路径和一些控制按钮及滑块。你能添加新的点到线段上,也可以改变线的宽度和透明度;或者点击*Animate* 来展示一系列的sin和cos动画。 另外"Cap"和"Join"按钮是无法工作的,因为平滑线条还没有实现这个特色。 ![Line (SmoothLine) Experiment](http://ww4.sinaimg.cn/large/577d3ebejw1f0mzbncrq3j20kw0h2ta4.jpg) #### 13)线条扩展演示 这个例子展示了如何使用扩展线调绘图,诸如椭圆、圆、矩形等。你将会看到带有标签的各种形状。 ![Lines Extended Demo](http://ww2.sinaimg.cn/large/577d3ebejw1f0mzc769xpj20ts0nqtb6.jpg) #### 14)网眼测试 这个例子展示了使用网眼模式来变形一张图片。你将会看到一排按钮在画布的下方。点击他们将会显示通过mesh.mode设置的方式来改变这张图片。 ![Mesh test](http://ww3.sinaimg.cn/large/577d3ebejw1f0mzcm7h4kj20kw0h20tf.jpg) #### 15)多重材质 这个例子混合了两种材质:一张字母K的图片mtexture1.png和一张橘黄色圆的材质mtexture2.png。你将会看到一个橘黄色的K剪贴到一个圆上。它使用了定制的使用GLSL(Opengl Shading Language)编写的着色器。 要注意的是mtexture1.png是一个白色的透明背景的K。 ![Multitexture Example](http://ww4.sinaimg.cn/large/577d3ebejw1f0mzd2x4hqj20kw0h23z6.jpg) #### 16)图片的平铺 这个例子展示了字母K的图片会在屏幕上平普。你首先会看到8行8列的字母K,同时一个标签来显示当前的尺寸。你可以试着改变窗口的大小,它仍保持8行8列。 要注意的是mtexture1.png是一个白色的透明背景的K。 ![Repeat Texture on Resize](http://ww1.sinaimg.cn/large/577d3ebejw1f0mzdkaxhij20c00aeq3y.jpg) #### 17)旋转的例子 这个示例使用PushMatrix和PopMatrix来旋转一个按钮。你将会看到一个标签为*Hello World*的按钮旋转了45度角。 ![Rotation Example](http://ww3.sinaimg.cn/large/577d3ebejw1f0mze3aqavj20c00aemxa.jpg) #### 18)漏字板演示 >gthank:具体例子还没有测试,感觉有点像PS中的蒙板 这个例子是一个关于漏字板试图部件的漏字板图形指令的测试,当你使用了漏字板,那么在它的边界外面看不到任何东西,所有的图形仅能在漏字板内部显示。 你可以通过Touch和Draw的指令来添加一个漏字板试图。Touch down会指定它的位置,而Drag会指定它的尺寸。 ![Stencil demo](http://ww1.sinaimg.cn/large/577d3ebejw1f0mzenze37j20gg0dq763.jpg) #### 19)Tesselate展示 >gthank:Tesselate应该叫嵌饰什么的,不知道如何翻译好 这个例子展示了关于嵌饰多边形的库的运用。你将会看到一个空心的矩形和一些控制按钮。你可以点击或拖拽来创建额外的形状,注意观察顶点的数目和屏幕上的元素。*debug*按钮来切换以不同的颜色来显示网格。 ![Tesselate Demonstration](http://ww3.sinaimg.cn/large/577d3ebejw1f0mzf7ds0hj20gg0dqjrw.jpg) #### 20)材质的包裹和坐标示例 这个例子展示了如何改变材质的属性以及材质父容器的属性。你可以看到多彩的材质图片和一些控制部件。texture_example_image.png图片被渲染到一个矩形中。滑块改变材质的拷贝数目以及矩形的大小;当在矩形中的材质多于一个时,点击按钮来改变材质如何被渲染。 ![Texture Wrapping and Coordinates Example](http://ww1.sinaimg.cn/large/577d3ebejw1f0mzfr7ltyj20kw0h2myx.jpg) #### 21)摄像头的洗牌模式 这个例子使用了带有打开了摄像头的Scatter部件,你将会看到一个混乱的带有摄像头反馈的矩形网格。你可以拖拽矩形边框来查看有序的摄像头,或者双击再次对网格进行洗牌。 ![Shuffled Camera Feed Puzzle](http://ww1.sinaimg.cn/large/577d3ebejw1f0mzgcltxxj20js0fyq5m.jpg) #### 22)Kivy Catalog Kivy的Catalog视图部件允许交互笔记Kivy语言代码,并获得立即的更新。有可以看到两个面板,左侧的包含着.kv代码,右侧的窗口对这些代码进行渲染。你可以在左侧对代码进行编辑,右侧进行渲染。当你使用spinner button菜单时,改动将会消失。Catalog部件将会为你展示多个控制着不同部件和布局的.kv示例。 当每一个菜单选项的接口在containers_kvs路径中设置好后,Catalog接口被设置在kivycatalog.kv文件里。要添加一个新的.kv文件到Catalog中,可以添加一个.kv文件到container_kvs路径并且在kivycatalog.kv文件的ScreenManage代码段中渲染它。 ![Kivy Catalog](http://ww1.sinaimg.cn/large/577d3ebejw1f0mzgq23c6j20kw0h2wg8.jpg) #### 23)多次碰撞检测展示 该应用程序记录形状并且试图在数据库中匹配它们。你将会看到一个空的画布接口和一些控制按钮。当你画了一个形状后,该形状将会被添加到历史记录中,并且尝试进行匹配。如果你打开了gesture的历史表,并且添加它到数据库,则以后再画出的这个形状将会被识别。你可以在.kg文件中保准和加载这些形状数据。 该演示代码跨越了多个文件。其中弹出的('No match')信息来自helpers.py文件。 历史窗口被historymanager.py文件管理,并使用了historymanager.kv文件来描述。 数据窗口和存储被gestureDatabase.py文件管理,并使用了gestureDatabase.kv文件描述。 滑块和按钮的逻辑在settings.py文件内,并使用了settings.kv文件描述;但是实际的设置和管理在multistroke.kv文件内。 ![Multistroke Recognition Database Demonstration](http://ww2.sinaimg.cn/large/577d3ebejw1f0mzhmqtvbj20kw0h2my8.jpg) #### 24)基本图片视图 这个例子展示了使用scatter部件。你将会看到3个图片框架,你可以点击和拖拽、拉伸和旋转这些图片。 当kivy/data/images/background.jpg这个背景图片显示后,一些照片将从本地的图片路径中加载。pictures.kv文件描述了接口,shadow32.png文件是图片的边框,以使得这些照片看起来像是在一个图片框里。最后,android.txt文件被用来打包为Android应用程序。 对于Android设备,你可以拷贝这个路径到你的手机上的/sdcard/kivy/pictures位置。 这些图片可以在https://archive.org/details/PublicDomainImages获取到。 ![Basic Picture Viewer](http://ww1.sinaimg.cn/large/577d3ebejw1f0mzi1ymprj20pc0ke10m.jpg) #### 25)动态着色器编辑器 这个例子展示了动态的顶点和片段编辑。你可以看到一个窗口对应两个编辑窗口。上面的代码框是顶点着色器,下面的是片段着色器。shadereditor.kv文件描述接口。 每当改变着色器时,着色器就会进行编译。如果没有错误,则屏幕会被更新;否则错误会在你的终端上显示。 ![Live Shader Editor](http://ww4.sinaimg.cn/large/577d3ebejw1f0mzihr034j20pc0keace.jpg) #### 26)Kivy特征展示 这个例子展示了许多Kivy的特征。你会看到一个菜单列表第一个展示accordion布局。通过点击'show source'按钮,你可以查看kv语言代码,但是不能编辑。通过上方的左右箭头图标来进行滚动。 showcase.kv文件描述了主容器,展示的每一个窗口在separate.kv文件中描述;这些文件方置在data/screens路径里。当data/icon路径里面的图标被用在控制列表时,data/background.png用来作为背景。data/faust_github.jpg文件被用在Scatter窗口。这些图标来自http://www.getleface.com/free_icon_set.html. android.txt文件被用来为Android程序打包。你可以将该路径文件拷贝到你的安卓手机/sdcard/kivy/showcase路径里。 ![Showcase of Kivy Features](http://ww4.sinaimg.cn/large/577d3ebejw1f0mziuljqtj20kw0h20ua.jpg) #### 27)触摸跟踪展示 这个例子展示了跟踪触摸。你可以看到一个基本的背景图片。当你按压鼠标时,你将会看到对应的坐标。当你拖拽时,它将会记录痕迹。额外的像压力值等信息,可以在touch.profile文件中找到。 这个程序在它的App子类中指定了一个图标。它也使用了particle.png文件来描绘痕迹。touchtracer.kv文件描述了该应用程序。 android.txt文件被用来为Android程序打包。你可以将这个路径拷贝到你的安卓设备的/sdcard/kivy/touchtracer路径里。 ![Touch Tracer Line Drawing Demonstration](http://ww3.sinaimg.cn/large/577d3ebejw1f0mzj9a8fpj208w06o0t0.jpg) ### 下节预告:2.2 3D旋转的猴子脑袋