在ScrollView中使用Kivy.graphics

Question

我用kivy.graphics.line来画一个图表，当我的图表宽度太大的时候，我想使用scrollview来滚动查看。

main.py

from kivymd.app import MDApp
from kivy.uix.screenmanager import  Screen
from kivy.lang import Builder
from kivy.graphics import Color, Line

   
class Graph(Screen, MDApp):
    def drawLine(self):
        z = 18
        Xs = 50
        Ys = 150
        Step = 50
        h0=3
        h1 = 40
        h2 = 80
        h3 = 90
        s = 1.5
        with self.canvas.before:
            Color(0.2, 0.2, 0.2, 1)
            for i in range(1,z+2):
                Line(points=[Xs+(i*Step), Ys, Xs+(i*Step), Ys+h1],width=1.4)
            Line(points=[Xs+Step, Ys, Xs+((z+1)*Step), Ys],width=1.4)
            Line(points=[Xs+Step, Ys+h1, Xs+((z+1)*Step), Ys+h1],width=1.4)

            Color(1, 0.2, 0.2, 1)
            for i in [1,7,13]:
                Line(points=[Xs+Step//2+(i*Step), Ys+h1+h2, Xs+Step//2+((i+s)*Step), Ys+h1+h2+h3],width=2)
                Line(points=[Xs+Step//2+(i*Step), Ys+h0+h1, Xs+Step//2+(i*Step), Ys+h1+h2],width=2)
            for i in [4,10,16]:
                Line(points=[Xs+Step//2+(i*Step), Ys+h1+h2, Xs+Step//2+((i-s)*Step), Ys+h1+h2+h3],width=2)
                Line(points=[Xs+Step//2+(i*Step), Ys+h0+h1, Xs+Step//2+(i*Step), Ys+h1+h2],width=2)

            Color(0.2, 1, 0.2, 1)
            for i in [3,9,15]:
                Line(points=[Xs+Step//2+(i*Step), Ys+h1+h2, Xs+Step//2+((i+s)*Step), Ys+h1+h2+h3],width=2)
                Line(points=[Xs+Step//2+(i*Step), Ys+h0+h1, Xs+Step//2+(i*Step), Ys+h1+h2],width=2)
            for i in [6,12,18]:
                Line(points=[Xs+Step//2+(i*Step), Ys+h1+h2, Xs+Step//2+((i-s)*Step), Ys+h1+h2+h3],width=2)
                Line(points=[Xs+Step//2+(i*Step), Ys+h0+h1, Xs+Step//2+(i*Step), Ys+h1+h2],width=2)
            
            Color(0.2, 0.2, 1, 1)
            for i in [17,5,11]:
                Line(points=[Xs+Step//2+(i*Step), Ys+h1+h2, Xs+Step//2+((i+s)*Step), Ys+h1+h2+h3],width=2)
                Line(points=[Xs+Step//2+(i*Step), Ys+h0+h1, Xs+Step//2+(i*Step), Ys+h1+h2],width=2)
            for i in [2,8,14]:
                Line(points=[Xs+Step//2+(i*Step), Ys+h1+h2, Xs+Step//2+((i-s)*Step), Ys+h1+h2+h3],width=2)
                Line(points=[Xs+Step//2+(i*Step), Ys+h0+h1, Xs+Step//2+(i*Step), Ys+h1+h2],width=2)
    pass

Builder.load_file("Graph.kv")
class myapp(MDApp):
    def build(self):
        return Graph()

myapp().run()

Graph.kv

<Graph>:
    MDGridLayout:
        cols:1
        MDFillRoundFlatButton:
            text:"Gragh"
            on_release: root.drawLine()

绘制图表之前的样子

绘制图表之后的样子

要完整查看图表，窗口的宽度需要增加

Answer 1

最好的做法是始终包含一个 ScrollView。试着把你的 Graph.kv 文件修改成这样：

#:import ScrollEffect kivy.effects.scroll.ScrollEffect
ScrollView:
    do_scroll_y: False
    effect_x: ScrollEffect()
    Graph:
        size_hint_x: None
    
<Graph>:
    MDGridLayout:
        cols:1
        MDFillRoundFlatButton:
            text:"Gragh"
            on_release: root.drawLine()

然后把 Builder.load_file() 这个调用放到 build() 方法里，像这样：

class myapp(MDApp):
    def build(self):
        return Builder.load_file("Graph.kv")

你还需要在 drawLine() 方法里加一句话，设置 Graph 的宽度，确保它足够大，可以容纳你的绘图。可以这样写：

self.width = 1000

这样做应该会让 ScrollView 只有在 Graph 的宽度比应用窗口还大的时候才会滚动。