Kivy - 圖集

如果您的應用程式需要處理大量圖片，尤其是在遠端伺服器上，則需要最佳化它們的載入時間。Kivy 框架中的圖集有助於減少載入時間。使用 Kivy 圖集，應用程式只需要載入一個圖片檔案，這減少了出錯的可能性，並且與載入多個圖片相比，也使用了更少的資源。圖集通常用於 Kivy 遊戲應用程式中渲染圖片。

Atlas 類位於 "kivy.atlas" 模組中。此模組可用於以程式設計方式構造 Atlas 物件，以及使用其命令列介面。

要能夠使用 Atlas，當前的 Kivy 環境必須具有 pillow 包 - Python 的一個圖片庫。如果不可用，請使用以下命令安裝：

pip3 install pillow

圖集由兩個檔案組成：

一個 JSON 檔案（副檔名為“.atlas”），其中包含圖集的圖片檔名和紋理位置。
圖片檔案，包含“.atlas”檔案引用的紋理。

假設以下圖片位於名為 imges 的目錄中：

C:\kivyenv\images 目錄

forward.png    pause.png    play.png    previous.png

這些圖片的尺寸均為 64×64 畫素。因此，我們指定一個 256×256 畫素大小的圖集檔案來容納所有四個檔案。開啟作業系統的命令終端並執行以下命令：

python -m kivy.atlas myatlas 256x256 *.png

終端顯示以下日誌資訊，在最後，這兩個檔案將被建立到 images 資料夾中。

(kivyenv) C:\kivyenv\images>python -m kivy.atlas myatlas 256x256 *.png
[INFO  ] [Logger   ] Record log in C:\Users\mlath\.kivy\logs\kivy_23-07-20_33.txt
[INFO  ] [deps     ] Successfully imported "kivy_deps.gstreamer" 0.3.3
[INFO  ] [deps     ] Successfully imported "kivy_deps.angle" 0.3.3
[INFO  ] [deps     ] Successfully imported "kivy_deps.glew" 0.3.1
[INFO  ] [deps     ] Successfully imported "kivy_deps.sdl2" 0.6.0
[INFO  ] [Kivy     ] v2.2.0
[INFO  ] [Kivy     ] Installed at "c:\kivyenv\Lib\sitepackages\kivy\__init__.py"
[INFO  ] [Python   ] v3.11.2 (tags/v3.11.2:878ead1, Feb 7 2023, 16:38:35) [MSC v.1934 64 bit (AMD64)]
[INFO  ] [Python   ] Interpreter at "c:\kivyenv\Scripts\python.exe"
[INFO  ] [Logger   ] Purge log fired. Processing...
[INFO  ] [Logger   ] Purge finished!
[DEBUG ] STREAM b'IHDR' 16 13
[DEBUG ] STREAM b'sRGB' 41 1
[DEBUG ] STREAM b'gAMA' 54 4
[DEBUG ] STREAM b'pHYs' 70 9
[DEBUG ] STREAM b'IDAT' 91 1115
[DEBUG ] STREAM b'IHDR' 16 13
[DEBUG ] STREAM b'sRGB' 41 1
[DEBUG ] STREAM b'gAMA' 54 4
[DEBUG ] STREAM b'pHYs' 70 9
[DEBUG ] STREAM b'IDAT' 91 990
[DEBUG ] STREAM b'IHDR' 16 13
[DEBUG ] STREAM b'sRGB' 41 1
[DEBUG ] STREAM b'gAMA' 54 4
[DEBUG ] STREAM b'pHYs' 70 9
[DEBUG ] STREAM b'IDAT' 91 1230
[INFO  ] [Atlas   ] create an 256x256 rgba image
Atlas created at myatlas.atlas
1 image has been created

您可以看到建立的兩個附加檔案是 myatlas-0.png，這是一個 256×256 的檔案，包含所有圖片，以及一個圖集檔案。

forward.png    myatlas-0.png    myatlas.atlas    pause.png
play.png
previous.png

“.atlas”檔案是一個 JSON 檔案，包含組成檔案的紋理位置資訊。

{"myatlas-0.png": {"forward": [2, 190, 64, 64], "pause": [68, 190, 64, 64], "play": [134, 190, 64, 64], "previous": [2, 124, 64, 64]}}

為了在 Kivy 語言中使用圖集，我們必須使用以下格式：

atlas://path/to/atlas/atlas_name/id.

"id" 檔案指的是沒有副檔名的圖片檔名。

例如，如果要將圖片檔案用作按鈕在正常狀態下的背景，則可以按如下方式操作：

B1 = Button(background_normal='images/play.png')

Now, aAfter generating the Atlas, you can use the URL
'atlas://images/myatlas/play' as the value.

B1=Button(background_normal='atlas://images/myatlas/play')

請注意，在圖集 URL 中，無需新增 .atlas 副檔名。它將自動附加到檔名。

示例

讓我們使用圖集中的圖片 URL 來設定應用程式視窗上四個按鈕（播放、暫停、快進和後退）的正常背景。

在執行以下程式碼之前，必須按照上述方法建立圖集檔案：

from kivy.app import App
from kivy.graphics import *
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.core.window import Window
Window.size = (720, 400)

class AtlasApp(App):
   def build(self):
      main = GridLayout(cols=1)
      self.l1 = Label(text='Using Atlas', font_size=32)
      main.add_widget(self.l1)
      root = FloatLayout(size=(Window.width, 100))
      with root.canvas:
         Color(.2, .7, .1, 1)
         Rectangle(pos=root.pos, size=root.size)
      
      self.btn1 = Button(
         size_hint=(None, None),
         pos_hint={'center_x': .2, 'center_y': .2}
      )
      self.btn2 = Button(
         size_hint=(None, None),
         pos_hint={'center_x': .4, 'center_y': .2}
      )
      
      self.btn3 = Button(
         size_hint=(None, None),
         pos_hint={'center_x': .6, 'center_y': .2}
      )
      
      self.btn4 = Button(
         size_hint=(None, None),
         pos_hint={'center_x': .8, 'center_y': .2}
      )
      self.btn1.background_normal = 'atlas://images/myatlas/forward'
      self.btn2.background_normal = 'atlas://images/myatlas/play'
      self.btn3.background_normal = 'atlas://images/myatlas/pause'
      self.btn4.background_normal = 'atlas://images/myatlas/previous'
      
      root.add_widget(self.btn1)
      root.add_widget(self.btn2)
      root.add_widget(self.btn3)
      root.add_widget(self.btn4)
      
      main.add_widget(root)
      return main
AtlasApp().run()

輸出

執行此程式碼時，將生成以下輸出視窗：

列印頁面