SVG Grafiken Zeichenmodi und Konstanten für Koordinaten/Grössen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • SVG Grafiken Zeichenmodi und Konstanten für Koordinaten/Grössen

    Die Möglichkeit SVG Grafiken im Skin zu verwendem ist wunderbar, vielen Dank dafür.

    Folgende zwei Änderungen würden die Skinerstellung und -wartung nochmals vereinfachen:

    1. einen Parameter drawModus mittels dessen man bei einem ePixmap Element festlegen kann ob die Grafik, falls sie zu groß, respektiv zu klein für die angegeben Dimensionen ist, abgeschnitten oder gestretcht resp. gestaucht wird.

    Quellcode

    1. <ePixmap position="800,400" size="150,90" pixmap="mySkin/menu.png" drawMode="normal" />



    (nur ein Teil der Grafik wird gezeichnet falls zu gross, oder nicht der gesamte Bereich wird gefüllt falls zu klein)

    oder


    Quellcode

    1. <ePixmap position="800,400" size="150,90" pixmap="mySkin/menu.png" drawMode="stretch" />

    (die Grafik wird an die horizontale und vertikale Grösse angepasst)

    2. Konstanten für Koordinaten und Bildgrössen, ähnlich der Definition von Farben am Anfan eines Skins.

    Also an Stelle von:

    Quellcode

    1. <ePixmap position="800,400" size="150,90" pixmap="mySkin/menu.svg" />


    etwa:

    Quellcode

    1. <constants>
    2. <constant name="hPos" value="800" />
    3. <constant name="vPos" value="400" />
    4. <constant name="hSize" value="150" />
    5. <constant name="vSize" value="90" />
    6. </constants>



    und dann später im Skin:

    Quellcode

    1. <ePixmap position="hPos,vPos" size="hSize,vSize" pixmap="mySkin/menu.svg" />
  • Danke für den Tipp zu Punkt (1), ich kannte die Option nicht.

    Findest du eine nackte Zahl wirklich unübersichtlicher als einen der Funktion entpsrechenden Namen?

    Vor allem bietet dies die Möglichkeit den Skin sehr schnell global zu verändern. Wenn man z. B. einen bestimmten Button in sämtlichen Screens ein wenig mehr einrücken möchte. Und wenn schliesslich UHD Skin Auflösungen möglich sein werden, kann man auch hier sämtliche Grössen und Position schnell verändern und man braucht praktisch nur einen Skin zu warten.
  • Ohne jetzt direkten Bezug auf SVG zu nehmen, denn diese werden beim einlesen immer auf die Größe der zu Grunde liegenden pixmap skaliert habe ich mir mal die Mühe gemacht einige zusätzliche scaling Optionen anzubieten und dabei direkt einige Fehler im ganzen skin-scale-code zu fixen...

    Folgendes wäre mein Vorschlag für alles was auf ePixmap aufbaut:
    • "off" oder "none" : keine skalierung/anpassung
    • "on" oder "aspect" : skalierung unter erhaltung des Seitenverhältnisses, so dass auf jeden Fall alles sichtbar bleibt
    • "center" : zentrieren im UI element ohne Änderung der Größe
    • "width" : Auf die Breite des UI-Elements anpassen, in der Höhe wird dabei ggf. abgeschnitten
    • "height" : Auf die Höhe des UI-elements anpassen, in der Breite wird dabei ggf. abgeschnitten
    Was sich als kaputt herausstellte war wenn man scale="0" angegeben hatte. Da wurde trotzdem skaliert. Diesen Fehler hab ich NICHT behoben um eventuelle Nebeneffekte in exisitierenden skins zu vermeiden.
    Statdessen zeigen 0/1 wie bisher (jedenfalls schon ziemlich lang...) auf "aspect"
    Für Entwickler gibt's natürlich auch entsprechende Optionen, geändert hat sich, dass sich diese nun auch zur Laufzeit sofort auswirken (das war vorher nur der Fall wenn man eine neue pixmap gesetzt hat).:

    Python-Quellcode: bla.py

    1. """
    2. Verfügbare SCALE_TYPE_*
    3. ePixmap.SCALE_TYPE_NONE
    4. ePixmap.SCALE_TYPE_ASPECT
    5. ePixmap.SCALE_TYPE_CENTER
    6. ePixmap.SCALE_TYPE_WIDTH
    7. ePixmap.SCALE_TYPE_HEIGHT
    8. Sehr simples Beispiel:
    9. """
    10. pixmap.setScale(ePixmap.SCALE_TYPE_CENTER)
    mfg ,
    Reichi
  • Für die borderset´s hab ich auch schon bei Reichi etwas angefragt ,da kommt eventuell mal auch noch ne Veränderung sofern er da was machen kann und die Zeit da ist.
    (schön wäre da nämlich auch ganz ohne Grafiken und nur mit Farb und höhen Angabe wo sich dann die breite selbst bestimmt je nach Screenangabe und das halt ohne eine Grafik)

    Auch kann man bei svg gut mit Farbangaben arbeiten wenn man da ne Einstellung im Image hätte könnte man sogar per Fernbedinung die Farbe der Grafiken ändern . ;)

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von zombi ()

  • Das mit der reinen Farbe ist als eine weitere Option gedacht ,genauso wie zb. das man da ne svg auch einsetzen könnte usw.
    Daher schrieb ich ja das es in die Richtung borderset schon Überlegungen gibt und auch schon drüber gesprochen wurde ,von anderen Vorschläge hört sich Reichi denke auch gern an und sein Zettel ist da sicherlich schon extrem lang :D .
    Was die Jungs bei DMM dann da alles umsetzen können /wollen oder wann ist dann ne andere Sache .
    Aber was sie bisher so umgesetzt haben ist schon ne Wucht und auch das sie so sehr auf das Thema Skins und Skinmöglichkeiten eingehen zeigt ja das sie da uns Usern echt auch zuhören und vieles machbar machen.
  • Die Umsetzung ist ja schon super mit den scalable v. g. .... Dingern. :thumbup:

    Und ein Bild wo man Höhe und Breit frei definieren kann ist nen nettes Feature.
    Nicht direkt für nen speziell, gezaubertes Bild, wer will schon das das Seitenverhältnis vermurksen?

    Aber Grafiken in der Länge und Breite zu verunstalten, oder zu verzaubern wäre das schon interessant.
    Da müsste es nicht ein mal eine Füllen Option geben. So eine Grafik ist ja so einfach zu erstellen, welche dann
    in alle Richtungen gezogen werden kann. Sofern es das System erlaubt.

    Und bye the way, Farben zu verändern, von den System Icons....
    Macht man sicher nicht immer, aber ist ein geiles Feature. Ist mir auch schon durch den Kopf gegangen, so hätte man durchgängige Icons
    für den (materials) Stil. Und vielleicht passt es ja dann auch mit einem selbstgerechten Skin überein?
  • so wie es aussieht ist es jetzt schon bei den bordern so dass die .svg grafik komplett über das element scaliert wird. Hatte jetzt mal in der bsListboxEntry einen border durch ne .svg ersetzt und der selektierte bereich wird übermalt. Muss das mal später bi bsWindow probieren

    bei ner .png funktioniert es wies sollte. Aber ist auch nicht so schlimm mit der scalierten .svg nur der listen eintrag müsste darüber liegen.






    mit .SVG







    mit .PNG

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von capa ()

  • Im Borderset wird garnix skaliert :).
    Die Grafiken werden 1:1 übernommen und wiederholt bis die nötige breite erreicht wurde.

    Ich weiß auch nicht das wirklich Sinn macht?!
    Ein Horizontales Strecken einer Grafik mit irgendwas abseits eines rechten Winkels führt immer zu einer Veränderung der Kurven/Winkel.
    Man sieht das schön im Zombies Beispiel, die gestreckten Flanken werden beim strecken schlanker.
    Alles kreisförmige wird elliptisch, alle winkel werden beim strecken spitzer, beim stauchen stumpfer.

    Die "unwanted side effects" sind bei SVG die Selben wie bei alle anderen Grafiken nur halt ohne Verlust von Präzision und Schärfe da die eigentliche Grafik erst beim einlesen errechnet und gezeichnet wird.

    Rahmen aus festen Farben sind
    1. Sinvoller und schlüssiger
    2. Einfacher zu implementieren
    3. Verständlicher in ihrem Verhalten.
    mfg ,
    Reichi
  • Reichi schrieb:

    Im Borderset wird garnix skaliert :).
    Die Grafiken werden 1:1 übernommen und wiederholt bis die nötige breite erreicht wurde.

    Wie Du im oberen Beispiel siehst wird die SVG grafik im bsListboxEntry nicht nur in der Breite sondern auch in der Höhe wiederholt. Was sicherlich nicht richtig ist. Eine PNG von 100x1px wird in der Breite wiederholt bis zum erreichen der Breite der Liste, in der Höhe mit 1px aber belassen.