.. _ref-texture:

Texturen
===============================================================================


**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>
 
 
.. image:: ../images/4_6_1_logo_textur.png

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 :ref:`Datentypen/Image <ref-types-image>`.


.. _ref-texturemode:

**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:**

.. image:: ../images/texturemodes.png

Das zugehörige :download:`Mad-Dokument <../../reference/widget/1_texturemodes.mad>`.

  

	

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";