Das deutsche Python-Forum

Ach so, die Quellenangabe: http://www.vectorsland.com/vector/free- ... 69715.html

@Alfons Mittelmeyer: solange Du Dich nicht mit den mathematischen Grundlagen der Kurven auseinandersetzt, macht doch dieses Copy-Paste, was Du hier veranstaltest, überhaupt keinen Sinn.

@Sirius3 Hab mir angeschaut, woran es liegt. Die ersten beiden Koordinaten der Becierkurve sind keine Kurvenpunkte, sondern Kontrollpunkte zur Berechnung der Kurve.

Also, erste Näherung wäre, man läßt sie weg.
Besser: man verwendet sie zur Berechnung von mehr Zwischenpunkten.

Also Weglassen der Kontrollpunkte ist schon mal keine Lösung:

Bild

Hi Alfons

Hier noch eine Vereinfachung deines letzten Skript durch den Einsatz eines Tags Pingu:

Code: Alles auswählen

import tkinter as tk
 
root = tk.Tk()
canvas = tk.Canvas(root,width=350,height=280)
canvas.pack()
 
scale = 0.03
 
canvas.create_polygon(7408,4804,6718,3138,6325,3043,6245,3043,5607,709,4471,933,4471,933,3701,956,3238,1863,2960,2981,2904,2975,2507,3005,1789,4741,1077,6460,1535,7342,1618,7479,1618,7479,1634,7509,1647,7508,1660,7507,1681,7468,1681,7468,1724,7415,2237,6768,2581,5790,2535,6610,2545,7201,2545,7202,2545,7202,2578,7587,3877,7696,3629,7850,3282,7938,3282,7938,3443,8231,3725,7962,3392,8315,3593,8509,3890,8143,3742,8380,4005,8486,4154,8321,4348,7985,4456,7723,4512,7724,4569,7724,4628,7724,4759,7724,4882,7722,4997,7718,5073,7968,5194,8269,5334,8425,5628,8332,5569,8097,5788,8458,6067,8269,5734,7916,6016,8185,6177,7892,6177,7892,5861,7811,5616,7670,6667,7536,6667,7196,6667,7196,6668,6740,6659,6318,6641,5926,6984,6863,7473,7479,7515,7531,7515,7531,7536,7570,7549,7571,7562,7571,7578,7542,7578,7542,7662,7405,8119,6523,7408,4804,fill='#010101', tags='Pingu')
canvas.create_polygon(5039,1445,4724,1426,4626,1703,4601,1737,4576,1770,4547,1720,4547,1720,4547,1720,4194,1319,3786,1615,3174,2060,2388,6997,3192,7300,3926,7577,4681,7535,4681,7535,6225,7535,6292,7199,6292,7199,6435,1477,5039,1445,5039,1445,fill='#ffffff', tags='Pingu')
canvas.create_polygon(4872,2234,4949,2230,5014,2319,5019,2432,5024,2544,4966,2638,4890,2642,4813,2645,4747,2556,4743,2443,4738,2331,4796,2237,4872,2234,fill='#010101', tags='Pingu')
canvas.create_polygon(4071,2482,4037,2372,4073,2263,4149,2240,4226,2217,4315,2288,4349,2399,4382,2509,4347,2618,4270,2641,4193,2664,4104,2593,4071,2482,fill='#010101', tags='Pingu')
canvas.create_polygon(4965,3769,4965,3769,4443,3563,4235,2961,4235,2961,4658,2787,5044,2921,5044,2921,5186,3294,4965,3769,fill='#010101', tags='Pingu')

canvas.scale('Pingu', 0, 0, scale,scale)
canvas.itemconfig('Pingu', smooth=1, splinesteps=12) 
 
root.mainloop()

Gruss wuf

@wuf

Hi wuf, der Pingu war nicht gut. Habe jetzt das Becier Format herausbekommen und mache dann aus 3 Koordinaten 10. Das Vögelchen sieht dann so aus:

Bild

Code: Alles auswählen

import tkinter as tk

root = tk.Tk()
canvas = tk.Canvas(root,width=400,height=350)
canvas.pack()

scale = 0.03


coordinates = [None]

def move_to(x,y):
    coordinates[0] = [x,y]
    
def becier(*args):
    for index in range(0,len(args),6):

        px0 = coordinates[0][-2]
        py0 = coordinates[0][-1]
        px1 = args[index]
        py1 = args[index+1]
        px2 = args[index+2]
        py2 = args[index+3]
        px3 = args[index+4]
        py3 = args[index+5]

        # B(t) = (1-t)^3 * P0  + 3t * (1-t)^2 * P1 + 3 t^2 * (1-t) * P2 + t^3 * P3    t€(0,1)
        for T in range(1,9):
            t = T/10
            Bx = (1-t)*(1-t)*(1-t)*px0 + 3*t*(1-t)*(1-t)*px1+3*t*t*(1-t)*px2+t*t*t*px3
            By = (1-t)*(1-t)*(1-t)*py0 + 3*t*(1-t)*(1-t)*py1+3*t*t*(1-t)*py2+t*t*t*py3
            coordinates[0].append(Bx)
            coordinates[0].append(By)
        coordinates[0].append(args[index+4])
        coordinates[0].append(args[index+5])

    
def line_to(*args):
    for entry in args: coordinates[0].append(entry)


move_to(8988,4286)
line_to(9770,3752,8655,3425)
becier(7723,1788,5822,2642,5186,4199,4420,6075,2224,6760,2224,6760,3787,8619,5196,8954,6136,8880,7077,8806,9615,8066,9087,4766,9059,4595,9026,4435,8988,4286)
item = canvas.create_polygon(*coordinates[0],fill='#2ba9e1',smooth=1)
canvas.scale(item,0,0,scale,scale)

move_to(8655,3426)
becier(8788,3660,8901,3945,8988,4286)
line_to(9770,3753,8655,3426)
item = canvas.create_polygon(*coordinates[0],fill='#2b3277')
canvas.scale(item,0,0,scale,scale)


move_to(7412,5497)
becier(7412,5497,4803,4959,4503,6411,4204,7863,6613,8705,7412,5497)
item = canvas.create_polygon(*coordinates[0],fill='#2b3277',smooth=1)
canvas.scale(item,0,0,scale,scale)


move_to(7915,3385)
becier(7932,3541,7852,3678,7735,3691,7618,3705,7509,3589,7491,3433,7473,3278,7554,3140,7671,3127,7788,3114,7897,3229,7915,3385)
item = canvas.create_polygon(*coordinates[0],fill='#2b3277',smooth=1)
canvas.scale(item,0,0,scale,scale)

root.mainloop()

Und jetzt schaut auch der pingu gut aus:

Bild

Code: Alles auswählen

import tkinter as tk

coordinates = [None]

def move_to(x,y):
    coordinates[0] = [x,y]
    
def becier(*args):
    for index in range(0,len(args),6):

        px0 = coordinates[0][-2]
        py0 = coordinates[0][-1]
        px1 = args[index]
        py1 = args[index+1]
        px2 = args[index+2]
        py2 = args[index+3]
        px3 = args[index+4]
        py3 = args[index+5]

        # B(t) = (1-t)^3 * P0  + 3t * (1-t)^2 * P1 + 3 t^2 * (1-t) * P2 + t^3 * P3    t€(0,1)
        for T in range(1,9):
            t = T/10
            Bx = (1-t)*(1-t)*(1-t)*px0 + 3*t*(1-t)*(1-t)*px1+3*t*t*(1-t)*px2+t*t*t*px3
            By = (1-t)*(1-t)*(1-t)*py0 + 3*t*(1-t)*(1-t)*py1+3*t*t*(1-t)*py2+t*t*t*py3
            coordinates[0].append(Bx)
            coordinates[0].append(By)
        coordinates[0].append(args[index+4])
        coordinates[0].append(args[index+5])

    
def line_to(*args):
    for entry in args: coordinates[0].append(entry)


root = tk.Tk()
canvas = tk.Canvas(root,width=350,height=280)
canvas.pack()

scale = 0.03


move_to(7408,4804)
becier(6718,3138,6325,3043,6245,3043,5607,709,4471,933,4471,933,3701,956,3238,1863,2960,2981,2904,2975,2507,3005,1789,4741,1077,6460,1535,7342,1618,7479,1618,7479,1634,7509,1647,7508,1660,7507,1681,7468,1681,7468,1724,7415,2237,6768,2581,5790,2535,6610,2545,7201,2545,7202,2545,7202,2578,7587,3877,7696,3629,7850,3282,7938,3282,7938)
line_to(3443,8231,3725,7962,3392,8315,3593,8509,3890,8143,3742,8380,4005,8486)
becier(4154,8321,4348,7985,4456,7723,4512,7724,4569,7724,4628,7724,4759,7724,4882,7722,4997,7718,5073,7968,5194,8269,5334,8425)
line_to(5628,8332,5569,8097,5788,8458,6067,8269,5734,7916,6016,8185,6177,7892)
becier(6177,7892,5861,7811,5616,7670,6667,7536,6667,7196,6667,7196,6668,6740,6659,6318,6641,5926,6984,6863,7473,7479,7515,7531,7515,7531,7536,7570,7549,7571,7562,7571,7578,7542,7578,7542,7662,7405,8119,6523,7408,4804)
canvas.create_polygon(*coordinates[0],fill='#010101',smooth=1,tag='pingu')

move_to(5039,1445)
becier(4724,1426,4626,1703,4601,1737,4576,1770,4547,1720,4547,1720,4547,1720,4194,1319,3786,1615,3174,2060,2388,6997,3192,7300,3926,7577,4681,7535,4681,7535,6225,7535,6292,7199,6292,7199,6435,1477,5039,1445,5039,1445)
canvas.create_polygon(*coordinates[0],fill='#ffffff',smooth=1,tag='pingu')

move_to(4872,2234)
becier(4949,2230,5014,2319,5019,2432,5024,2544,4966,2638,4890,2642,4813,2645,4747,2556,4743,2443,4738,2331,4796,2237,4872,2234)
canvas.create_polygon(*coordinates[0],fill='#010101',smooth=1,tag='pingu')

move_to(4071,2482)
becier(4037,2372,4073,2263,4149,2240,4226,2217,4315,2288,4349,2399,4382,2509,4347,2618,4270,2641,4193,2664,4104,2593,4071,2482)
canvas.create_polygon(*coordinates[0],fill='#010101',smooth=1,tag='pingu')

move_to(4965,3769)
becier(4965,3769,4443,3563,4235,2961,4235,2961,4658,2787,5044,2921,5044,2921,5186,3294,4965,3769)
canvas.create_polygon(*coordinates[0],fill='#010101',smooth=1,tag='pingu')

canvas.scale('pingu',0,0,scale,scale)


root.mainloop()

Dass man den Murx mit den Listen nicht macht, sollte Dir doch inzwischen klar sein. Keine globalen Variablen! Würde Dir auch nicht passieren, wenn Du alles in Funktionen packst.
Wenn Du jetzt noch das smooth wegläßt sieht es doch schon ganz gut aus:

Code: Alles auswählen

import tkinter as tk

class Curve(object):
    def __init__(self, x,y, precision=30):
        self.coordinates = [x,y]
        self.precision = precision

    def __iter__(self):
        return iter(self.coordinates)

    def line_to(self, *coords):
        self.coordinates.extend(coords)

    def bezier_to(self, *coords):
        coords = iter(coords)
        px0, py0 = self.coordinates[-2:]
        for px1, py1, px2, py2, px3, py3 in zip(*[coords]*6):
            # B(t) = (1-t)^3 * P0  + 3t * (1-t)^2 * P1 + 3 t^2 * (1-t) * P2 + t^3 * P3
            for T in range(1,self.precision+1):
                t = T/self.precision
                Bx = (1-t)*(1-t)*(1-t)*px0 + 3*t*(1-t)*(1-t)*px1+3*t*t*(1-t)*px2+t*t*t*px3
                By = (1-t)*(1-t)*(1-t)*py0 + 3*t*(1-t)*(1-t)*py1+3*t*t*(1-t)*py2+t*t*t*py3
                self.coordinates.extend((Bx, By))
            px0, py0 = px3, py3

def main():
    root = tk.Tk()
    canvas = tk.Canvas(root,width=400,height=350)
    canvas.pack()

    scale = 0.03

    c = Curve(8988,4286)
    c.line_to(9770,3752,8655,3425)
    c.bezier_to(7723,1788,5822,2642,5186,4199,4420,6075,2224,6760,2224,6760,3787,8619,5196,8954,6136,8880,7077,8806,9615,8066,9087,4766,9059,4595,9026,4435,8988,4286)
    canvas.create_polygon(*c,tags="img", fill='#2ba9e1')

    c = Curve(8655,3426)
    c.bezier_to(8788,3660,8901,3945,8988,4286)
    c.line_to(9770,3753,8655,3426)
    canvas.create_polygon(*c, tags="img", fill='#2b3277')

    c = Curve(7412,5497)
    c.bezier_to(7412,5497,4803,4959,4503,6411,4204,7863,6613,8705,7412,5497)
    canvas.create_polygon(*c, tags="img", fill='#2b3277')

    c = Curve(7915,3385)
    c.bezier_to(7932,3541,7852,3678,7735,3691,7618,3705,7509,3589,7491,3433,7473,3278,7554,3140,7671,3127,7788,3114,7897,3229,7915,3385)
    canvas.create_polygon(*c, tags="img", fill='#2b3277')

    canvas.scale("img",0,0,scale,scale)

    root.mainloop()

if __name__ == '__main__':
    main()

@Sirius3 Dass das mit der Liste normalerweise Murks ist, ist auch klar. Wenn man den smooth nicht macht, sondern ihn selber durch höhere Precision realisisiert, dann wird es auch genau und auch gerade Linien stellen dann kein Problem dar.

Was noch zu klären ist, sind Farbwechsel. Beim Pinguin war zuerst die Farbe schwarz. Dann kam weiss. Dann dachte ich, dass wenn weiss angegeben ist, dass das dann auch weiterhin gilt. Aber nein, ich mußte dann die Farbe wieder auf schwarz setzen.

Da muss man sich näher betrachten, wie das definiert ist, wann die Farbe wechselt.

Also, Farbgebung ist nicht einfach. Nicht einmal LibreOffice Draw macht es hier richtig:

Bild

Aber gThumb kann es und vergißt nicht die drei Falten am Rüssel:

Bild

@Alfons Mittelmeyer: LibreOffice ist nicht unbedingt das beste Programm um SVG-Grafiken zu bearbeiten weil das Grafik-Format von LibreOffice, und damit auch der Editor, nicht den vollen SVG-Umfang unterstützt. Inkscape ist da beispielsweise wesentlich besser geeignet. Das verwendet auch intern SVG als Format.

@BlackJack Ich will ja auch keine SVG Grafiken bearbeiten. Ich wollte nur darauf hinweisen, dass SVG nicht ganz so einfach ist, wie mancher vielleicht es sich vorstellt. Direkt SVG automatisch nach tkinter konvertieren geht nicht, da SVG sich etwas anders verhält, als mancher vielleicht denkt.

Was geschieht etwa, wenn man eine Fläche gezeichnet hat und eine größere Fläche in anderer Farbe darüber legt?
Die darübergelegte Fläche sollte die darunter verdecken, möchte man meinen.
Aber nein in SVG ist es so nicht. Die darübergelegte Fläche endet an der bereits vorhandenen und bildet so eine Umrahmung derselben.
Tja, das geht in tkinter nicht. Also muss man die Reihenfolge vertauschen und erst die größere Fläche zeichnen und danach erst die darin.

Was geschieht etwa, wenn man einen Teil einer Fläche in anderen Farbe übermalt hat, etwa den schwarzen Rock eines Pinguins mit einem weißem Gesicht und weißem Bauch.

Was geschieht, wenn man noch zusätzlich mit weiß darauf malt? Das wirkt dann wie ein Radiergummi und löscht dann das Weiß auf dem schwarzen Rock wieder weg, sodaß dort der schwarze Rock wieder durchschaut.

Um das dann richtig zu machen, muß man dort die richtige Farbe einstellen, also schwarz statt weiß. Mitunter auch die Hintergrundfarbe des Canvas (etwa Elefant).

@Alfons Mittelmeyer: Oh man, Du solltest echt weniger rumschwafeln und vielleicht mal die Spezifikation von SVG lesen statt es durch Versuch und Irrtum zu solch ausschweifenden und teilweise irreführenden Beschreibungen zu kommen. SVG verhält sich nicht anders als ”mancher” sich das denkt, sondern anscheinend hauptsächlich wie *Du* dir das wohl gedacht hast.

@BlackJack Wenn Du anscheinend so gescheit bist, vielleicht kannst ja Du dann erklären, wie die Löcher in den Käse kommen.

Also eine Scheibe Käse zeichnen und Löcher herausschneiden sieht gleich aus. Die Frage ist da, wann zeichnet man eine Scheibe Käse und wann schneidet man da Löcher heraus.

Die Regel nach der Spezifikation bei fill-rule evenodd ist folgende:

evenodd
This rule determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.

Vielleicht magst Du das ja näher erklären?

PS:
Und dass ein Loch in einer Wand etwas anderes ist, wie wenn man ein Viereck auf eine Wand malt, sollte auch klar sein. Denn das eine ist ein Fenster, durch das man durchschauen kann. Und mit tkinter ein Viereck auf eine Wand malen ergibt nicht den selben Effekt.

Jedenfalls, wenn man innerhalb eines shapes innerhalb einer gefülltem Fläche nochmals eine Fläche zeichnet, zählt diese bei fill-rule evenodd als Loch. Bei fill-rule nonzero käme es noch darauf an, ob man den Pfad dann im oder entgegen dem Uhrzeigersinn angibt.

Wenn hinter dem Loch nur einfarbiger Hintergrund liegt, kann man statt Loch diese Fläche in dieser Hintergrundfarbe zeichnen. Wenn hinter dem Loch aber bereits ein Objekt ist, dieses das Loch aber nicht überschneidet, kann man die Reihenfolge tauschen. Wenn das Objekt aber größer als das Loch ist, hat man eventuell Pech gehabt.

@Alfons Mittelmeyer: man kann auch höflich fragen, wenn man etwas nicht versteht. In der Art: "SVG hat da sowas wie die evenodd-Füllmethode und Objekte, die aus mehreren Pfaden bestehen und gefüllt werden. Leider verstehe ich nicht, wie das gemeint ist."

Und da denkst Du Dir am besten einen Stift, der über den Bildschirm von links nach rechts fährt. Übertritt er eine Linie des Polygons, Stift an, übertritt er die nächste Linie, Stift aus, usw.
Das unterstützt TK nicht und das nachzubilden bedarf der Aufteilung des Polygons mit Löchern in Teile ohne Loch, statt einfach mit irgendeiner anderen Farbe drüberzupinseln.

@Alfons:
Du wirst nicht umhin kommen, die SVG-Spec genau zu studieren und das dann in einem eigenen Objektmodell (DOM?) zu implementieren, wenn Du SVG umsetzen willst. Diese Objekte kennen dann ihre Lage im Raum/Fläche, Farbe, Form und Positionen/Überdeckungen zueinander. Das Canvas kannst Du dann nutzen, um eine Ausgabe dafür zu haben.
Die Frage ist dann Javascript oder nicht. Willst Du den vollen Standard umsetzen, gehört es dazu, dann aber bitte auch SMIL und andere nifty Transformationsmethoden nicht vergessen. Mit Javascript an Board hättest Du gleich drei Möglichkeiten, das Interface schlussendlich als SVG-Editor interaktiv zu gestalten: Tcl, Python, Javascript (+ ein bisschen C für die Transformationen) Das ist garantiert ein Projekt für viele Jahre

@jerch Ein eigenes GUI Framework auf SVG Basis will ich sicher nicht machen. Es ging um die Fragestellung, ob man SVG Grafiken nach tkinter konvertieren kann. Man kann, aber nicht vollautomatisch für alle Grafiken. Sogar einfache Grafiken, wie der Pinguin nutzen die Lochmethode.

Beim Pinguin ist ein Shape der Schwarze Rock. Der zweite Shape ist das weiße Gesicht und der weiße Bauch, wo man dann gleich im Anschlusss die Augen und den Schnabel als Löcher reinzeichnet.

Der Löwe ist noch etwas komplizierter. Zuerst der Löwenörper. Der nächste Shape die tiefbraunen Stellen, wie Augen, Nase und Maul.
Darauf setzt man dann die überdeckende Mähne und schneidet ein Loch für das Gesicht hinein.

Das muss man dann umordnen. Zuerst der Löwenkörper. Darauf kommt dann die Mähne. Dann statt Loch den Gesichtsausschnitt in der Löwenhintergrundfarbe und dann kann man den Shape mit Augen, Nase und Maul setzen.

Also vollautomatische Konvertierung klappt nur bei ganz einfachen Grafiken (etwa dem Vogel). Bei vielen Grafiken muss die Farbgebung für die Löcher geändert werden und eventuell die Reihenfolge auch getauscht werden. Manches geht auch nicht, wie der Schweizer Käse, der von einer Maus dahinter gehalten wird, und bei dem Teile der Maus durch die Löcher sichtbar sind.

Was machbar wäre: Konvertierung von SVG Grafiken in tkinter Code. Nacheditieren dieses Codes durch Farbgebung für Löcher setzen und eventuell Reihenfolge tauschen.

@Alfons:
Irgendwie zäumst Du das Pferd von hinten auf - um verlässlich "SVG-Importe" machen zu können, MUSST Du das Format implementieren. Das Canvas ist nur eine Zeichenoberfläche, SVG nur ein Beschreibungsformat. Da fehlen die Zwischenschritte Layout-Engine (Beschreibung --> DOM) und Render-Engine (DOM --> Canvas).

@Alfons Mittelmeyer: Nochmal anschaulich. Statt irgendetwas umzusortieren oder drüberzumalen, mußt Du das "Polygon mit Loch" in zwei Polygone ohne Loch aufteilen:
1. man suche den Mittelpunkt eines Lochs.
2. Lege durch diesen Punkt eine horizontale Gerade.
3. Berechne alle Schnittpunkte dieser Geraden mit allen Polygonen.
4. Nimm alle Punkte, die oberhalb der Geraden liegen, und alle Schnittpunkte und bilde daraus ein neues Polygon, ohne Loch
5. Nimm alle Punkte, die unterhalb der Geraden liegen, und alle Schnittpunkte und bilde daraus ein neues Polygon, ohne Loch
6. Zeichen die Polygone.

Das deutsche Python-Forum

Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?

Re: Gibt es für tkinter Vektorgrafik Bibliotheken?