如何在python中创建一个没有滚动条滚动的可滚动画布?

时间:2015-01-17 23:43:14

标签: python canvas tkinter scroll

我一直在制作一个带有各种场景的RPG,我可以去。我想在我的所有场景上都有一个相同大小的窗口,这样在较大的窗口上,当我的角色走向屏幕边缘时,窗口将滚动到屏幕的另一部分。

from tkinter import*
top = Tk()
top.title("Lemonkingdom Quest")

#For Directional Purposes
up = False
down = False
left = False
right = False

#when a var has a b in front of it, it refers
#to if they hero is present in that scene or location
#when false they are not there, when true they are
bcave1=False
bcastle=False
bmarket=False
bforest1 = False
bforest2 = False

class Chart:
        chart = Canvas(top,width=120,height=120,background="black",highlightthickness=0)
        chart.grid(row=0,column=0)
        cycle_period = 10
        cycle_period2 = 10



#This Class allows for creation of Actors, with pictures,
#Each Actor Has its own Canvas ID, assigned in the order they are created
class Person:
    def __init__(self,person,x,y,picture,items):
        self.person = person
        self.x = x
        self.y = y
        self.picture = picture
        self.items = items
        Chart.chart.create_image(x,y,image=picture,anchor=NW)
class Actor:
    def __init__(self,person,x,y,picture):
        self.person = person
        self.x = x
        self.y = y
        self.picture = picture
        Chart.chart.create_image(x,y,image=picture,anchor=NW)

Person("Hero",60,60,herodownstand,None) # ID = 1 when first created
#the globalized hero refers to the ID, after each scene
#all the Actors are deleted to allow for new actors to be inputted
#at that time the hero variable is changed to be the new ID of the
#hero that is created 
hero = Person("Hero",60,60,herodownstand,None)

# the xx and yy variables refer to the coordinates that the hero is at
# they help by being changed before they act to see if there is a wall in the
# way of them
xx = 60
yy = 60



class Item:
    def __init__(self,item,x,y,picture,owner):
        self.item = item
        self.x = x
        self.y = y
        self.picture = picture
        self.owner = owner
        Chart.chart.create_image(x,y,image=picture,anchor=NW)
    def grab(i,h):
        i.owner = h
    def discard(i,h):
         i.owner = None

Key=Item("Key",60,60,keypic,None)
#These Are Lists of Walls And other Objects that can be inputted

def market():
#240,120 is a space, 150,30 is a space
        s = 150
        t = 60
        Chart.chart.delete(ALL)
        Actor("Hero",s,t,herodownstand)
        global hero
        (hero,) = Chart.chart.find_closest(s,t,halo=None,start=None)
        global yy
        global xx
        xx = s
        yy = t
        global marketground
        global bforest2
        global bforest1
        global bmarket
        global bcastle
        global marketwall
        global bcave1
        bcave1=False
        bforest2 = False
        bforest1 = False
        bmarket = True
        bcastle = False
        #for (x,y) in marketground:
        #        Actor("",x,y,ground)
      #  Chart.chart.configure(width=270,height=210,background_image=tk.PhotoImage(ground.gif))
        Chart.chart.configure(width=270,height=210,background=None)
        Actor("door",150,0,marketwalldoortop)
        Actor("door",150,30,marketwalldoorbottom)
        print("just in the Market")
        for (x,y) in marketwall: 
                Actor("wall",x,y,marketwallpic)
                print("in the IF MARKET")

def castle():
        s = 150
        t = 150
        Chart.chart.delete(ALL)
        Actor("Hero",s,t,heroupstand)
        global hero
        sss= Chart.chart.find_closest(s,t,halo=None,start=None)
        (hero,)=sss
        global yy
        global xx
        yy = s
        xx = t
        global bforest2
        global bforest1
        global bcastle
        global bmarket
        global marketwall
        global bcave1
        bcave1=False
        print("at the castle MANN")
        bforest1=False
        bforest2=False
        bcastle = True
        bmarket = False
        Chart.chart.configure(width=270,height=180,background=None)
        for (x,y) in castlewall:
                Actor("wall",x,y,marketwallpic)
def forest1():
        s = 0
        t = 30
        Chart.chart.delete(ALL)
        Actor("Hero",s,t,herorightstand)
        global hero
        (hero,) = Chart.chart.find_closest(s,t,halo=None,start=None)
        global yy
        global xx
        xx = s
        yy = t
        global ground
        global bforest2
        global forest2wall
        global bforest1
        global bmarket
        global bcastle
        global marketwall
        global forest1wall
        global bcave1
        bcave1=False
        bforest2 = False
        bforest1 = True
        bmarket = False
        bcastle = False
        Chart.chart.configure(width=270,height=330,background=("black"))
        Actor("door",-30,30,gatepic)
        print("in the FOREST")
        for (x,y) in forest1wall: 
                Actor("wall",x,y,treepic)
                print("in the FOREST")
#        for (x,y) in treetop: 
 #               Actor("wall",x,y,treepic)
  #              print("in the FOREST")
def forest2():
        s = 210
        t = 0
        Chart.chart.delete(ALL)
        Actor("Hero",s,t,herodownstand)
        global hero
        (hero,) = Chart.chart.find_closest(s,t,halo=None,start=None)
        global yy
        global xx
        xx = s
        yy = t
        global cave1doorR
        global cave
        global bforest2
        global bforest1
        global bmarket
        global bcastle
        global marketwall
        global forest1wall
        global forest2wall
        global bcave1
        bcave1=False
        bforest2 = True
        bforest1 = False
        bmarket = False
        bcastle = False
        Chart.chart.configure(width=270,height=330,background=None)
        Actor("door",210,-30,gatepic)
        print("in the FOREST")
        for (x,y) in forest2wall: 
                Actor("wall",x,y,treepic)
                print("in the FOREST")
        for (x,y) in cave:
                Actor("wall",x,y,cavepic)
                print("by the cave")
        for (x,y) in cave1doorR:
                Actor("wall",x,y,cavedoorR)
def cave1():
        s = 180
        t = 30
        Chart.chart.delete(ALL)
        Actor("Hero",s,t,heroleftstand)
        global hero
        (hero,) = Chart.chart.find_closest(s,t,halo=None,start=None)
        global yy
        global xx
        xx = s
        yy = t
        global key1
        global cave1wall
        global cave1doorL
        global cave
        global bforest2
        global bforest1
        global bmarket
        global bcastle
        global marketwall
        global forest1wall
        global forest2wall
        global bcave1
        global Key
        bcave1 = True
        bforest2 = False
        bforest1 = False
        bmarket = False
        bcastle = False
        Chart.chart.configure(width=240,height=360,background=None)
        for (x,y) in cave1wall: 
                Actor("wall",x,y,cavepic)
        for (x,y) in key1:
            if Key.owner == None:
                Item("Key",x,y,keypic,None)
            else:
                None
        for (x,y) in cave1doorL:
                Actor("wall",x,y,cavedoorL)


#These Are the Moving Methods
class Move:
    def checkwallup(x):
        global up
        global down
        global left
        global right
        global xx
        global yy
        global marketwall
        global castlewall
        global bforest2
        global bmarket
        global bcastle
        global bforest1
        global forest1wall
        global forest2wall
        global cave
        global cave1doorR
        global cave1doorL
        global bcave1
        global cave1wall
        global key1
        global Key
        global hero
   #     global treetop
        yy = yy - 30
        pos = (xx,yy)
        if bmarket == True:
            if pos in marketwall:
                yy = yy + 30
                Chart.chart.itemconfigure(x,image=heroupstand)
            elif pos == (150,30):
                if Key.owner == hero:
                    Move.moveup(x)
                else:
                    Chart.chart.itemconfigure(x,image=heroupstand)

            elif pos == (150,0):
               if Key.owner == hero:
                    castle()
               else:
                    Chart.chart.itemconfigure(x,image=heroupstand)
            else:
                Move.moveup(x)
        elif bcastle == True:
            if pos in castlewall:
                yy = yy + 30
                Chart.chart.itemconfigure(x,image=heroupstand)
            else:
                Move.moveup(x)
        elif bforest1 == True:
            if pos in forest1wall:
                yy = yy + 30
                Chart.chart.itemconfigure(x,image=heroupstand)
            else:
                Move.moveup(x)
        elif bforest2 == True:
            if pos in forest2wall:
                yy = yy + 30
                Chart.chart.itemconfigure(x,image=heroupstand)
            elif pos in cave:
                yy = yy + 30
                Chart.chart.itemconfigure(x,image=heroupstand)
            elif pos == (210,-30):
                forest1()
            elif pos in cave1doorR:
                 yy = yy + 30
                 Chart.chart.itemconfigure(x,image=heroupstand)
            else:
                Move.moveup(x)
        elif bcave1==True:
            if pos in cave1wall:
                yy = yy + 30
                Chart.chart.itemconfigure(x,image=heroupstand)            
            elif pos in key1:
                if Key.owner == None:  
                    yy = yy + 30
                    Chart.chart.itemconfigure(x,image=heroupstand)
                else:
                    Move.moveup(x)
            elif pos in cave1doorL:
                 yy = yy + 30
                 Chart.chart.itemconfigure(x,image=heroupstand)
            else:
                Move.moveup(x)
    def checkwalldown(x):
        global up
        global down
        global left
        global right
        global xx
        global yy
        global marketwall
        global castlewall
        global bmarket
        global bcastle
        global bforest2
        global forest2wall
        global bforest1
        global forest1wall
        global cave
        global cave1doorL
        global cave1doorR
        global bcave1
        global cave1wall
        global key1
        global Key
        global hero
#       global treetop
        yy = yy + 30
        pos = (xx,yy)
        if bmarket == True:
            if pos in marketwall:
                yy = yy - 30
                Chart.chart.itemconfigure(x,image=herodownstand)
            else:
                Move.movedown(x)
        elif bcastle == True:
            if pos in castlewall:
                yy = yy - 30
                Chart.chart.itemconfigure(x,image=herodownstand)
            elif pos == (150,180):
                    market()
            else:
                Move.movedown(x)
        elif bforest1 == True:
            if pos in forest1wall:
                yy = yy - 30
                Chart.chart.itemconfigure(x,image=herodownstand)
            elif pos == (210,330):
                forest2()
#            if pos in treetop:
#                yy = yy - 30
#                Chart.chart.itemconfigure(x,image=herodownstand)
            else:
                Move.movedown(x)
        elif bforest2 == True:
            if pos in forest2wall:
                yy = yy - 30
                Chart.chart.itemconfigure(x,image=herodownstand)
            elif pos in cave:
                yy = yy - 30
                Chart.chart.itemconfigure(x,image=herodownstand)
            elif pos in cave1doorR:
                yy = yy - 30
                Chart.chart.itemconfigure(x,image=herodownstand)
            else:
                Move.movedown(x)
        elif bcave1 == True:
            if pos in cave1wall:
                yy = yy - 30
                Chart.chart.itemconfigure(x,image=herodownstand)
            elif pos in cave1doorL:
                yy = yy - 30
                Chart.chart.itemconfigure(x,image=herodownstand)
            elif pos in key1:
                if Key.owner == None:  
                    yy = yy - 30
                    Chart.chart.itemconfigure(x,image=herodownstand)
                else:
                    Move.movedown(x)
            else:
                Move.movedown(x)

    def checkwallleft(x):
        global up
        global down
        global left
        global right
        global xx
        global yy
        global marketwall
        global castlewall
        global bmarket
        global bcastle
        global bforest1
        global bforest2
        global forest2wall
        global forest1wall
        global cave
        global cave1doorR
        global cave1doorL
        global cave1wall
        global bcave1
        global key1
        global Key
        global hero
  #      global treetop
        xx = xx - 30
        pos = (xx,yy)
        if bmarket == True:
            if pos in marketwall:
                xx = xx + 30
                Chart.chart.itemconfigure(x,image=heroleftstand)
            else:
                Move.moveleft(x)
        elif bcastle == True:
            if pos in castlewall:
                xx = xx + 30
                Chart.chart.itemconfigure(x,image=heroleftstand)
            else:
                Move.moveleft(x)
        elif bforest1 == True:
            if pos in forest1wall:
                xx = xx + 30
                Chart.chart.itemconfigure(x,image=heroleftstand)
            elif pos == (-30,30):
                    market()
   #         if pos in treetop:
   #             xx = xx + 30
   #             Chart.chart.itemconfigure(x,image=heroleftstand)
            else:
                Move.moveleft(x)
        elif bforest2 == True:
            if pos in forest2wall:
                xx = xx + 30
                Chart.chart.itemconfigure(x,image=heroleftstand)
            elif pos in cave:
                xx = xx + 30
                Chart.chart.itemconfigure(x,image=heroleftstand)
            elif pos == (60,240):
                    cave1()

            else:
                Move.moveleft(x)
        elif bcave1 == True:
            if pos in cave1wall:
                xx = xx + 30
                Chart.chart.itemconfigure(x,image=heroleftstand)
            elif pos in cave1doorL:
                xx = xx + 30
                Chart.chart.itemconfigure(x,image=heroleftstand)
            elif pos in key1:
                if Key.owner == None:  
                    xx = xx + 30
                    Chart.chart.itemconfigure(x,image=heroleftstand)
                else:
                    Move.moveleft(x)
            else:
                Move.moveleft(x)
    def checkwallright(x):
        global up
        global down
        global left
        global right
        global xx
        global yy
        global marketwall
        global castlewall
        global bmarket
        global bcastle
        global bforest1
        global bforest2
        global forest2wall
        global forest1wall
        global cave
        global cave1doorR
        global cave1doorL
        global cave1wall
        global bcave1
        global key1
        global Key
        global hero
    #    global treetop
        xx = xx + 30
        pos = (xx,yy)
        if bmarket == True:
            if pos in marketwall:
                xx = xx - 30
                Chart.chart.itemconfigure(x,image=herorightstand)
            elif pos == (270,120):
                    forest1()
            else:
                Move.moveright(x)
        elif bcastle == True:
            if pos in castlewall:
                xx = xx - 30
                Chart.chart.itemconfigure(x,image=herorightstand)
            else:
                Move.moveright(x)
        elif bforest1 == True:
            if pos in forest1wall:
                xx = xx - 30
                Chart.chart.itemconfigure(x,image=herorightstand)
 #           if pos in treetop:
  #              xx = xx - 30
   #             Chart.chart.itemconfigure(x,image=herorightstand)
            else:
                Move.moveright(x)
        elif bforest2 == True:
            if pos in forest2wall:
                xx = xx - 30
                Chart.chart.itemconfigure(x,image=herorightstand)
            elif pos in cave:
                xx = xx - 30
                Chart.chart.itemconfigure(x,image=herorightstand)
            elif pos in cave1doorR:
                xx = xx - 30
                Chart.chart.itemconfigure(x,image=herorightstand)
            else:
                Move.moveright(x)
        elif bcave1 == True:
            if pos in cave1wall:
                xx = xx - 30
                Chart.chart.itemconfigure(x,image=herorightstand)
            elif pos in key1:
                if Key.owner == None:                
                    xx = xx - 30
                    Chart.chart.itemconfigure(x,image=herorightstand)
                else:
                    Move.moveright(x)
            elif pos == (210,30):
                forest2()
            else:
                Move.moveright(x)
    def moveup(x):
        global up
        global down
        global left
        global right 
        up = True
        down = False
        right = False
        left = False
        Chart.chart.itemconfigure(x,state=NORMAL)
        Chart.chart.itemconfigure(x,image=heroupstand)
        for i in range(1,11):
                Chart.chart.move(x,0,-1)
                Chart.chart.update()
                Chart.chart.after(Chart.cycle_period)
        Chart.chart.itemconfigure(x,image=heroupwalk1)
        for i in range(1,11):
                Chart.chart.move(x,0,-1)
                Chart.chart.update()
                Chart.chart.after(Chart.cycle_period)
        Chart.chart.itemconfigure(x,image=heroupwalk2)
        for i in range(1,11):
                Chart.chart.move(x,0,-1)
                Chart.chart.update()
                Chart.chart.after(Chart.cycle_period)
        Chart.chart.itemconfigure(x,image=heroupstand)
    def movedown(x):
        global up
        global down
        global left
        global right
        up = False
        down = True
        left =  False
        right = False
        Chart.chart.itemconfigure(x,state=NORMAL)
        Chart.chart.itemconfigure(x,image=herodownstand)
        for i in range(1,11):
                Chart.chart.move(x,0,1)
                Chart.chart.update()
                Chart.chart.after(Chart.cycle_period)
        Chart.chart.itemconfigure(x,image=herodownwalk1)
        for i in range(1,11):
                Chart.chart.move(x,0,1)
                Chart.chart.update()
                Chart.chart.after(Chart.cycle_period)
        Chart.chart.itemconfigure(x,image=herodownwalk2)
        for i in range(1,11):
                Chart.chart.move(x,0,1)
                Chart.chart.update()
                Chart.chart.after(Chart.cycle_period)
        Chart.chart.itemconfigure(x,image=herodownstand)          
    def moveleft(x):
        global up
        global down
        global left
        global right
        up = False
        down = False
        right = False
        left = True
        Chart.chart.itemconfigure(x,state=NORMAL)
        Chart.chart.itemconfigure(x,image=heroleftstand)
        for i in range(1,11):
                Chart.chart.move(x,-1,0)
                Chart.chart.update()
                Chart.chart.after(Chart.cycle_period)
        Chart.chart.itemconfigure(x,image=heroleftwalk1)
        for i in range(1,11):
                Chart.chart.move(x,-1,0)
                Chart.chart.update()
                Chart.chart.after(Chart.cycle_period)
        Chart.chart.itemconfigure(x,image=heroleftwalk2)
        for i in range(1,11):
                Chart.chart.move(x,-1,0)
                Chart.chart.update()
                Chart.chart.after(Chart.cycle_period)
        Chart.chart.itemconfigure(x,image=heroleftstand)
    def moveright(x):
        global up
        global down
        global left
        global right
        right = True
        up = False
        down = False
        left = False
        Chart.chart.itemconfigure(x,state=NORMAL)
        Chart.chart.itemconfigure(x,image=herorightstand)
        for i in range(1,11):
                Chart.chart.move(x,1,0)
                Chart.chart.update()
                Chart.chart.after(Chart.cycle_period)
        Chart.chart.itemconfigure(x,image=herorightwalk1)
        for i in range(1,11):
                Chart.chart.move(x,1,0)
                Chart.chart.update()
                Chart.chart.after(Chart.cycle_period)
        Chart.chart.itemconfigure(1,image=herorightwalk2)
        for i in range(1,11):
                Chart.chart.move(x,1,0)
                Chart.chart.update()
                Chart.chart.after(Chart.cycle_period)
        Chart.chart.itemconfigure(1,image=herorightstand)
    def pause(x):
        for i in range(1,30):
            Chart.chart.move(x,0,0)
            Chart.chart.update()
            Chart.chart.after(Chart.cycle_period)
    def attack():
        global xx
        global yy
class NPCMove:
    def moveup(x):
        for i in range(1,30):
            Chart.chart.move(x,0,-1)
            Chart.chart.update()
            Chart.chart.after(Chart.cycle_period)
            Chart.chart.itemconfigure(x,image=(npc)+(x))
    def movedown(x):
        for i in range(1,30):
            Chart.chart.move(x,0,1)
            Chart.chart.update()
            Chart.chart.after(Chart.cycle_period)
    def moveleft(x):
        for i in range(1,30):
            Chart.chart.move(x,-1,0)
            Chart.chart.update()
            Chart.chart.after(Chart.cycle_period)
    def moveright(x):
        for i in range(1,30):
            Chart.chart.move(x,1,0)
            Chart.chart.update()
            Chart.chart.after(Chart.cycle_period)
    def pause(x):
        for i in range(1,30):
            Chart.chart.move(x,0,0)
            Chart.chart.update()
            Chart.chart.after(Chart.cycle_period) 




top.bind(sequence="s",func=lambda x:Move.checkwalldown(hero))
top.bind(sequence="w",func=lambda x:Move.checkwallup(hero))
top.bind(sequence="a",func=lambda x:Move.checkwallleft(hero))
top.bind(sequence="d",func=lambda x:Move.checkwallright(hero))
top.bind(sequence="j",func=lambda x:Item.grab(Key,hero))
top.bind(sequence="k",func=lambda x:Item.discard(Key,hero))

market()

1 个答案:

答案 0 :(得分:0)

您只需省略滚动条,并确保画布的scrollregion属性包含您绘制的所有内容。然后,您可以通过编程方式调用xviewyview方法来滚动。

这篇文章的最后是一个可运行的例子。运行它,在窗口中单击,然后使用光标键移动红色方块。请注意,当它到达边缘时,它将导致画布滚动。

这不是良好编码技术的一个例子。我在整个地方都有硬编码的数字,但希望它说明了如何以编程方式滚动画布。取消这一点的主要关键是:

  1. 您需要定义大于可见窗口的scrollregion
  2. 如果要使用此技术一次滚动一个像素,则需要将“单位”设置为1
  3. 您可以调用xviewyview方法滚动画布
  4. 此代码适用于python 2.x;要让它在3.x上工作,你只需要更改import语句。

    import Tkinter as tk
    import random
    
    class Example(tk.Frame):
        def __init__(self, parent):
            tk.Frame.__init__(self, parent, background="bisque")
            self.canvas = tk.Canvas(self, width=400, height=400)
    
            # define a larger virtual canvas 
            self.canvas.configure(scrollregion=(-400,-400,400,400), 
                                  borderwidth=0, highlightthickness=0,
                                  xscrollincrement=1, yscrollincrement=1)
    
            # arrange the widgets on the screen
            self.canvas.pack(fill="both", expand=True)
    
            # draw a object that we can move
            self.thing = self.canvas.create_rectangle(-20,-20,20,20, fill="red")
    
            # draw some random circles, so it's obvious when the canvas scrolls
            for i in range(100):
                x = random.randint(-300, 300)
                y = random.randint(-300, 300)
                radius = random.randint(10, 100)
                self.canvas.create_oval(x,y,x+radius, y+radius)
    
            # set bindings to move the thing around
            self.canvas.bind("<Left>",  lambda event: self.move(-5, 0))
            self.canvas.bind("<Right>", lambda event: self.move(5, 0))
            self.canvas.bind("<Up>",    lambda event: self.move(0,-5))
            self.canvas.bind("<Down>",  lambda event: self.move(0,5))
            self.canvas.bind("c",       lambda event: self.recenter())
    
            self.recenter()
            self.canvas.focus_set()
    
        def recenter(self):
            # center the viewport on the canvas
            # (because we know the window size, we know we want 
            # 50% of the window viewable)
            self.canvas.xview("moveto", "0.25")
            self.canvas.yview("moveto", "0.25")
    
        def make_visible(self):
            # determine the bounding box of the visible area of the screen
            (cx0,cy0) = (self.canvas.canvasx(0), self.canvas.canvasy(0))
            (cx1,cy1) = (self.canvas.canvasx(self.canvas.cget("width")), 
                         self.canvas.canvasy(self.canvas.cget("height")))
    
            # determine the bounding box of the thing to be made visible
            (x0,y0,x1,y1) = self.canvas.coords(self.thing)
    
            # determine how far off the screen the object is
            deltax = x0-cx0 if x0 <= cx0 else x1-cx1 if x1 >= cx1 else 0
            deltay = y0-cy0 if y0 <= cy0 else y1-cy1 if y1 >= cy1 else 0
    
            # scroll the canvas to make the item visible
            self.canvas.xview("scroll", int(deltax), "units")
            self.canvas.yview("scroll", int(deltay), "units")
    
        def move(self, deltax, deltay):
            # make sure we don't move beyond our scrollable region
            (x0,y0,x1,y1) = self.canvas.coords(self.thing)
            deltay = 0 if (deltay > 0 and y1 >= 400) else deltay
            deltay = 0 if (deltay < 0 and y0 <= -400) else deltay
            deltax = 0 if (deltax > 0 and x1 >= 400) else deltax
            deltax = 0 if (deltax < 0 and x0 <= -400) else deltax
    
            # move the item, then scroll it into view
            self.canvas.move(self.thing, deltax, deltay)
            self.make_visible()    
    
    if __name__ == "__main__":
        root = tk.Tk()
        Example(root).pack(fill="both", expand=True)
        root.mainloop()