Kivy - 散點圖控制元件



Kivy 中的 Scatter 控制元件對於多點觸控裝置特別有用,它用於旋轉和縮放應用程式視窗的內容。

Scatter 控制元件透過在繪製子控制元件之前更改模型檢視矩陣來執行矩陣變換,並在繪製完成後恢復之前的矩陣,以便可以在整個子控制元件樹上執行旋轉、縮放和平移,而無需更改任何控制元件屬性。

預設情況下,Scatter 控制元件沒有圖形表示:它只是一個容器。其他控制元件新增到 scatter 物件中。但是,需要注意的是,Scatter 控制元件不是佈局。您必須自己管理子控制元件的大小。它們相對於 scatter 定位,類似於 RelativeLayout。這就是為什麼拖動 scatter 不會改變子控制元件的位置,只有 scatter 的位置才會改變。scatter 的大小不會影響其子控制元件的大小。

Scatter 類定義在“kivy.uix.scatter”模組中。Scatter 控制元件的基本用法如下:

from kivy.uix.scatter import Scatter
scatter=Scatter.add_widget(Image(source='logo.jpg'))

Scatter 物件建立時預設啟用所有互動。但是,您可能希望自定義互動,為此需要相應地定義 Scatter 物件的屬性。

  • auto_bring_to_front - 如果為 True,則該控制元件將在繪製時自動推到父控制元件列表的頂部。

  • do_rotation - 允許旋轉。預設情況下,此屬性為 True。

  • do_scale - 允許縮放。預設為 True。

  • do_translation - 允許在 X 或 Y 軸上平移。

  • scale - scatter 的縮放值。scale 是一個 AliasProperty,預設為 1.0。

  • scale_max - 允許的最大縮放因子。允許的最大縮放因子的預設值為 1e20。

  • scale_min - 允許的最小縮放因子,預設值為 0.01

示例 1

這是一個關於 Scatter 控制元件如何工作的簡單示例。我們只是在 Kivy 應用中的 Scatter 控制元件中添加了一個標籤。應用程式啟動時,標籤文字出現在應用程式視窗的左下角。使用滑鼠將其拖動到視窗表面的任何位置。

要在普通桌面上模擬多點觸控操作,請透過滑鼠右鍵單擊在標籤區域建立兩個標記,然後您可以透過拖動這兩個標記來放大或旋轉標籤。

如果您正在使用多點觸控裝置,則可以透過雙指觸控執行縮放和旋轉。

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.scatter import Scatter
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.textinput import TextInput
from kivy.core.window import Window

Window.size = (720,350)

class scatterdemoapp(App):
   def build(self):
      box=BoxLayout(orientation='vertical')
      scatr=Scatter()
      lbl=Label(text="Hello", font_size=60)
      scatr.add_widget(lbl)
      box.add_widget(scatr)
      return box

scatterdemoapp().run()

輸出

讓我們檢查一下輸出是什麼樣的:

kivy scatter

示例 2

或者,也可以使用“kv”語言指令碼構建相同的介面。

BoxLayout:
   orientation:'vertical'
   Scatter:
      Label:
         text:"Hello"
         font_size:60

讓我們為上面的示例新增更多互動性。在這裡,我們在 Scatter 控制元件上方的垂直箱式佈局中添加了一個文字輸入框。

“text”屬性繫結到標籤的 text 屬性。因此,當您在文字框中新增/刪除字母時,標籤文字會更新。仍然可以執行所有 scatter 操作,例如旋轉和縮放。

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.scatter import Scatter
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.textinput import TextInput
from kivy.core.window import Window

Window.size = (720,300)

class scatterdemoapp(App):
   def build(self):
      box = BoxLayout(orientation='vertical')
      text1 = TextInput(
         text='Hello World', height=100,
         size_hint=(Window.width, None)
      )
      box.add_widget(text1)
      scatr = Scatter()
      self.lbl = Label(text="Hello", font_size=60)
   
      text1.bind(text=self.lbl.setter('text'))
      scatr.add_widget(self.lbl)
      box.add_widget(scatr)
      return box
   
scatterdemoapp().run()

輸出

現在讓我們檢查一下輸出視窗是什麼樣的:

Kivy Scatter Hello
廣告