Vielecke in svg mithilfe von Listen erstellen

Django, Flask, Bottle, WSGI, CGI…
Antworten
Pitwheazle
User
Beiträge: 871
Registriert: Sonntag 19. September 2021, 09:40

Ich muss in meinem Koordinatensystem:
Bild
ein Dreieck zeichnen und wollte mir das einfach machen:

Code: Alles auswählen

                x0 = random.randint(4,12)
                y0 = random.randint(1,12) 
                breite = random.randint(1,6)
                hoehe = random.randint(1,6)
                schieb = random.randint(0,breite)
                x_koo = [x0, x0+breite, x0+schieb, x0]
                y_koo = [y0, y0, y0+hoehe, y0]
                text = ["A", "B", "C"]
                text_y_schieb = [20, 20, -20]

                lsg = ["({0};{1})".format(x0, y0)]
                h_hoehe = 300
                h_breite = 320
                y_null = 260
                x_null = 30
                grafik = {
                    'einteilung' :20,
                    'view_hoehe' : 400,
                    'view_breite' : 400,
                    'h_hoehe' : h_hoehe,
                    'h_breite' : h_breite,
                    'y_null': y_null,
                    'x_null': x_null,
...
                    'xvalues': [
                        (x_null + n*40, 2*n) for n in range(0, 7)
                    ],
                    'yvalues': [
                        (y_null - n*40, 2*n) for n in range(0, 7)
                    ],
                    'koo': [
                        (x_null + x_koo[n]*20, y_null - y_koo[n]*20, x_null + x_koo[n+1]*20, y_null - y_koo[n+1]*20) for n in range(0, 3)
                    ],
                    'x_koo': x_null + x0*20, 
                    'y_koo': y_null - y0*20,
                }
                print(grafik) 
und der svg Code dazu:

Code: Alles auswählen

        <text x="{{grafik.x_koo}}" y="{{grafik.y_koo}}" style="stroke:blue;stroke-width:1;">A</text>
        {%for xa, ya, xe, ye in grafik.koo %}
            <line x1="{{grafik.xa}}" y1="{{grafik.ya}}" x2="{{grafik.xe}}" y2="{{grafik.ye}}" style="stroke:black;stroke-width:1" />	
            <text x="{{grafik.xa}}" y="{{grafik.ya}}" style="stroke:black;stroke-width:1;">X</text>
        {%endfor%}
Der Befehl print(grafik) zeigt mir die gewünschten Koordinaten:
'koo': [(190, 100, 270, 100), (270, 100, 270, 0), (270, 0, 190, 100)]
Das Dreieck will aber nicht so wie ich - was mache ich denn jetzt wieder falsch?
Sirius3
User
Beiträge: 17737
Registriert: Sonntag 21. Oktober 2012, 17:20

Dein Wörterbuch `grafik` gut keinen Schlüssel "xa". Wäre auch doof, weil die for-Schleife mit den Laufvariablen gar nichts macht.
Pitwheazle
User
Beiträge: 871
Registriert: Sonntag 19. September 2021, 09:40

Dann habe ich das wahrscheinlich mal wieder nicht richtig kapiert. Also das [n] und das [n1] scheint ja in der Schleife "for n in range(0,3) zu funktionieren und erstellt drei Listen:
'koo': [(250, 240, 330, 240), (330, 240, 330, 140), (330, 140, 250, 240)]
und dann dachte ich, dass in der svg Schleife diese drei "abgearbeitet werden" und dann dreimal in der Schleife
{%for xa, ya, xe, ye in grafik.koo %}
mit Werten für xa, ya, xe und ye gefüllt wird und zwischen diesen Punkten jeweils eine Linie erstellt wird.
Wo ist mein Denkfehler?
PS. Ich weiß allerdings nicht, warum es "range(0,3)" heißen muss, das müsste doch eigentlich 4 Listen erstellen?
Pitwheazle
User
Beiträge: 871
Registriert: Sonntag 19. September 2021, 09:40

Also: Ich möchte das immer noch gerne wissen, was da nicht stimmt. Ich brauche das so ähnlich sicher wieder.
Aber ich habe jetzt etwas rumprobiert und festgestellt, dass ein Polygon auch nicht mehr Code erfordert:Bild
Mein Code:

Code: Alles auswählen

                x0 = breite = 1000
                y0 = hoehe =1000
                while x0 + breite > h_breite -30 or y0 + hoehe > h_hoehe -60:
                    x0 = random.randint(4,12)*20
                    y0 = random.randint(1,12)*20 
                    breite = random.randint(2,6)*20
                    hoehe = random.randint(2,6)*20
                schieb = random.randint(0,breite)					#verschiebt C in Bezug auf A
                x_koo = [x0, x0+breite, x0+schieb, x0]
                y_koo = [y0, y0, y0+hoehe, y0]
                ecken = ["A", "B", "C"]
                ecken_x = [-20,10,-5]                                				#schieb Benennung in x
                ecken_y = [10,10,-10]                               				#schieb Benennung in y 
... 
                'x1': x_null + x_koo[0], 'y1': y_null - y_koo[0], 
                'x2': x_null + x_koo[1], 'y2': y_null - y_koo[1], 
                'x3': x_null + x_koo[2], 'y3': y_null - y_koo[2],
                'ecken': [
                	 (x_null+x_koo[n]+ecken_x[n], y_null-y_koo[n]+ecken_y[n], ecken[n]) for n in (range(0,3))
                    	],  
                    }
und:

Code: Alles auswählen

        <polygon points="{{grafik.x1}},{{grafik.y1}} {{grafik.x2}},{{grafik.y2}} {{grafik.x3}},{{grafik.y3}}"  style="stroke:black;stroke-width:1;fill: #C0FFFF"/>
        <use href="#kreuz" transform="translate({{grafik.x1}},{{grafik.y1}})"/>
        <use href="#kreuz" transform="translate({{grafik.x2}},{{grafik.y2}})"/>
        <use href="#kreuz" transform="translate({{grafik.x3}},{{grafik.y3}})"/>
        {%for x, y, txt in grafik.ecken %}
            <text x="{{x}}" y="{{y}}" class="text">{{txt}}</text>
        {%endfor%}
... möglicherweise kann man die Kreuzchen noch zusammenfassen.
Antworten