.. _ref-rotscale:

Rotation und Skalierung
===============================================================================

**Rotation**
----------------

Default: ``0``

Die Eigenschaft "Rotation" dreht das Widget um seinen Center (standardmäßig den Punkt ``0,0`` im widget-eigenen Koordinatensystem)::

 <property name="Rotation" type="Number" value="10"/>

Der Drehwinkel wird als Zahl in Grad angegeben. Positive Werte drehen das Widget im Uhrzeigersinn, negative Werte drehen es gegen den Uhrzeigersinn. Der Standardwert der Eigenschaft Rotation ist 0. Der Wert 360 entspricht einer vollständigen Drehung.

Die Eigenschaft Rotation wird auf Kinder-Widgets nicht vererbt. Der Inhalt eines Widgets wird aber mit dem Eltern-Widget gedreht.

Beispiel::

 <widget name="widget1" x="80" y="20" shape="R 100 100">
   <property name="BackgroundColor" value="#ff0000" />
   <property name="Rotation" type="Number" value="20"/>
   <widget name="widget2" shape="R 30 30">
     <property name="BackgroundColor" value="#ffcc00" />
   </widget>
 </widget>
 
Das Widget rotiert um seinen Ankerpunkt im Koordinatensystem.
Das Child-Widget widget2 wird mitrotiert.

 
**Scale**
-------------------------

Default: ``1``

Die Eigenschaft "Scale" verändert die Größe des Widgets::

 <property name="Scale" value="2"/>

Die Eigenschaft Scale wird mit dem Typ Number angegeben, der Standardwert ist 1, also keine Skalierung.
Der Inhalt eines Widgets - Video, Text, aber auch seine Child-Widgets - wird mit dem skalierten Widget mitskaliert, die Eigenschaft wird nicht vererbt.

Der Bezugspunkt der Skalierung ist der Center-Punkt (standardmäßig ``0,0``) des Widgets.

Setzen der Property ``Scale`` führt dazu, dass das Koordinatensystem des betreffenden Widgets und seiner Kinder skaliert wird. 

Beispiel::

 <widget name="widget1">
   <property name="Location" type="Point" value="20,20"/>
   <property name="BackgroundColor" value="red"/>
   <property name="Scale" value="2"/>
   <property name="BorderWidth" value="1"/>
   <widget name="widget2" x="10" y="10">
     <property name="BackgroundColor" value="yellow"/>
     <property name="Shape" value="R 50 50"/>
   </widget>
 </widget>

.. note::

  Auch wenn es grundsätzlich möglich ist, ist es nicht empfehlenswert, die Property ``Scale`` auf der Presentation selbst zu setzen. Soll die ganze Presentation skaliert werden, empfiehlt es sich, ein Widget um den Inhalt der Presentation zu legen, das nur zur Skalierung dient::
    
    <presentation width="800" height="600">
      <widget name="Scaler" shape="R 400 300">
        <property name="Scale" value="2" />
        <property name="BackgroundColor" value="#990000" />
        
        <!-- Inhalt der Presentation -->
        <widget x="350" y="250" shape="R 50 50">
          <property name="BackgroundColor" value="#009900" />
        </widget>
        <!-- Ende -->
        
      </widget>
    </presentation>


**Center**
---------------

Die Eigenschaft "Center" wirkt sich nur im Zusammenhang mit den Eigenschaften Rotation und Scale aus. 
Mit Center können Sie den Bezugspunkt verändern, um den das Widget gedreht oder skaliert wird::

 <property name="Center" type="Point" value="20 20"/>

Die Eigenschaft Center wird mit dem Typ "Point" angegeben, der Default-Wert ist ``0,0``.

Beispiel::

 <widget name="widget1" x="80" y="80">
   <property name="Shape" value="R 100 100"/>
   <property name="Center" value="50,50"/>
   <property name="BackgroundColor" value="red"/>
   <property name="Rotation" value="10"/>
   <widget name="widget2">
     <property name="Location" value="25,25"/>
     <property name="BackgroundColor" value="yellow"/>
     <property name="Shape" value="R 50 50"/>
   </widget>
 </widget>

Durch die Angabe eines Center-Punktes ersparen wir uns die Verschiebung des Shapes im Koordinatenraum, auch die Platzierung des Childwidgets ist intuitiver.


JavaScript
-------------

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

Javascript-Syntax::
  
  myWidget.Center   = Type.newPoint(50,50);
  myWidget.Scale    = 2.0;
  myWidget.Rotation = 10;