《Python+Kivy(App开发)从入门到实践》自学笔记：基本图形绘制——旋转坐标空间

章节知识点总揽

3.4.1 旋转坐标空间

        canvas中，可以用Rotate指令来控制旋转操作（与ScatterLayout不同的是，Rotate旋转的是整个空间，所有子部件都受影响）。

        Rotate指令，需要指定以下三个参数：

                axis：设置用于旋转的轴，通常为ｚ轴(0,0,1)。

                angle：设置旋转的角度。

                origin：设置旋转的参考点。

实例：设置旋转坐标空间

        新建一个main.py文件，用来加载rotate.kv文件，调用GridLayout布局的默认属性给RotateGridLayoutWidget类。具体代码如下：

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.graphics import Rectangle,Color
from kivy.graphics.instructions import InstructionGroup

class RotateGridLayoutWidget(GridLayout):
    def __init__(self,**kwargs):
        super().__init__(**kwargs)


class RotateApp(App):
    def build(self):
        return RotateGridLayoutWidget()

if __name__ == '__main__':
    RotateApp().run()

        在rotate.kv文件中，首先把页面背景设置为白色，然后添加两个按钮和一个FloatLayout布局。为了便于观察，还可以把FloatLayout布局内的内容提取出来，新建rotate.kv文件，内容如下：

<MyImage@Image>:
	source:'01.jpg'
	pos:self.parent.pos
	size_hint:.5,.4
	canvas:
		Color:
			rgba:1,0,0,.5
		Line:
			rectangle:self.x,self.y,self.width,self.height
<RotateGridLayoutWidget>:
	cols:2
	canvas:
		Color:
			rgba:(1,1,1,1)
		Rectangle:
			pos:self.pos
			size:self.size
	Button:
		text:'col:1,row;1'
	FloatLayout:
		MyImage:
	Button:
		text:'col:1,row:2'

        使用图片01.jpg，放置在main.py相同目录下：

                

        执行main.py文件，结果如下图：

         如果要实现：第一行第二列图片旋转，只需要在canvas画布下加入Rotate指令即可，并设置axis、angle和origin这三个属性。修改rotate.kv文件，内容如下：

<MyImage@Image>:
	source:'01.jpg'
	pos:self.parent.pos
	size_hint:.5,.4
	canvas:
		Rotate:
			axis:(0,0,1)
			angle:60
			origin:self.center
		Color:
			rgba:1,0,0,.5
		Line:
			rectangle:self.x,self.y,self.width,self.height
<RotateGridLayoutWidget>:
	cols:2
	canvas:
		Color:
			rgba:(1,1,1,1)
		Rectangle:
			pos:self.pos
			size:self.size
	Button:
		text:'col:1,row;1'
	FloatLayout:
		MyImage:
	Button:
		text:'col:1,row:2'

        执行main.py文件后，结果如下：

         有一个问题存在：点击“col:1row:2“按钮中间无反应，点击左下角白色区域，“col:1row:2“按钮会有被点击的效果。但这只是学习过程中想让我们看到的错误过程，具体解决方法后面内容有所讲解。

上一篇：基本图形绘制——canvas.before属性和canvas.after属性

下一篇：基本图型绘制——部分旋转