4.6. Texturen

4.6.1. Texture

Die Eigenschaft “Texture” weist einem Widget eine Textur zu:

<property name="Texture" value="meinbild.png" />

Sie können die Bildformate .jpg, .gif und .png verwenden. Grafisch wird die Textur als Hintergrund dargestellt, aber noch vor der Hintergrundfarbe (BackgroundColor) gezeichnet. Texturen dürfen Transparenz enthalten.

Das Textur-Bild wird per Default in Originalgröße oben links im Shape des Widgets angeordnet. Bei freien Formen wird das Bounding Rect um die Form errechnet, das dann als Bezugsrahmen genommen wird.

Beispiel:

<widget name="widget1">
  <property name="Location" value="80,80"/>
  <property name="Shape" value="R 150 150"/>
  <property name="BackgroundColor" value="red"/>
  <property name="Texture" value="logo.png" />
  <widget name="widget2">
    <property name="Location" value="25,25"/>
    <property name="BackgroundColor" value="yellow"/>
    <property name="Shape" value="R 50 50"/>
  </widget>
</widget>

Die Transparenz des eingebundenen PNG-Bildes macht deutlich, dass im Widget zuhinterst die Hintergrundfarbe, dann die Textur gezeichnet werden. Childwidgets sind vor der Textur angeordnet.

Um das Ladeverhalten eines Bildes zu steuern, stehen verschiedene Möglichkeiten zur Verfügung. Vgl. hierzu Datentypen/Image.

4.6.2. TextureMode

default: top-left

Werte: top-left, top-center, top-right, center-left, center, center-right,

bottom-left, bottom-center, bottom-right, tile, force, fit, cover, off

Mit der Eigenschaft “TextureMode” beeinflussen Sie die Art und Weise, mit der eine Textur in ein Widget eingepasst wird:

<property name="TextureMode" type="Symbol" value="center"/>

Folgende Werte stehen zur Verfügung:

top-left (Default)

Texture-Bild oben links in Originalgröße

ebenso:

top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right

tile

Texture-Bild wird in Originalgröße über die Bounds (= das umschließende Rechteck) des Widgets gekachelt.

force

Das Bild wird in Höhe und Breite auf die Bounds des Widgets skaliert und verzerrt dargestellt, sollten die Seitenverhältnisse von Bounds und Bild nicht übereinstimmen.

fit

Das Bild wird in die Bounds des Widgets eingepasst, das Seitenverhältnis wird beibehalten.

cover

Das Bild wird so in die Bounds eingepasst, dass das Seitenverhältnis beibehalten wird und die Form vollständig ausgefüllt ist.

off

Das Bild wird nicht angezeigt.

Ein Beispiel mit allen möglichen Texturemodes:

Das zugehörige Mad-Dokument.

4.6.3. JavaScript

Im folgenden einige beispielhafte Zugriffe und Zuweisungen auf Properties aus diesem Kapitel dargestellt.

Javascript-Syntax:

widget1.Texture     = "logo.png";
widget1.Texture     = Type.newImage("logo.png");
widget1.TextureMode = "center";