Difference between revisions of "Shape"

From HSYCO
Jump to navigation Jump to search
 
(2 intermediate revisions by one other user not shown)
Line 1: Line 1:
 
{{UI Object Header}}
 
{{UI Object Header}}
A line.
+
Draw a circle, oval or a generic polygon shape.
  
 
== Parameters ==
 
== Parameters ==
Line 55: Line 55:
 
|Object rotation in degrees. By default a shape object is rotated around its center point
 
|Object rotation in degrees. By default a shape object is rotated around its center point
 
|-
 
|-
 +
 +
|rotationorigin
 
|<x-axis> <y-axis>
 
|<x-axis> <y-axis>
 
|Rotate the shape around a specific axis.
 
|Rotate the shape around a specific axis.
Line 112: Line 114:
  
 
|strokedash
 
|strokedash
|<dash>
+
|<dash string>
 
|See strokedash attribute above
 
|See strokedash attribute above
  

Latest revision as of 16:07, 13 October 2020

Note  For a description and a complete list of UI Objects, see UI Objects.

Draw a circle, oval or a generic polygon shape.

Parameters

  • id: the object's ID, used by UISets
  • pos: the top left corner of the rectangular area within which the shape will be drawn. Use the pixel coordinates format (x<x>y<y>)
  • width: the rectangular area's width in pixels.
  • height: the rectangular area's height in pixels.
  • corners: the number of corners (from 3 to 12) of the polygon shape. A value of 0 draws a circle.
  • stretch: true|false value. If true the shape will stretch to cover the rectangular area.
  • rotation: the rotation in degrees.
  • strokecolor: CSS color of the stroke (e.g. #ff0000, "red" or rgb(255,0,0))
  • strokewidth: the width of the stroke in pixels
  • strokedash: a list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.
  • fillcolor: CSS color of the fill (e.g. #ff0000, "red" or rgb(255,0,0))

Syntax

(shape[!<id>] <pos>; <width>; <height>; <corners>; <stretch>; <rotation>; <strokecolor>; <strokewidth>; <strokedash>; <fillcolor>)

UI Attributes

Common attributes

Name Value Description
visible true Default. Show the object
false Hide the object
blink true | slow Blink the object at a slow speed
fast Blink the object at a fast speed
false Stop the blinking
opacity 0.0 ... 1.0 Object opacity from 0 (not visible) to 1 (fully visible)
rotation 0 ... 360 Object rotation in degrees. By default a shape object is rotated around its center point
rotationorigin <x-axis> <y-axis> Rotate the shape around a specific axis.

Possible values for x-axis:

  • left
  • center
  • right
  • length in pixels (e.g. 20px)
  • % (e.g. 2%)


Possible values for y-axis:

  • top
  • center
  • bottom
  • length in pixels (e.g. 20px)
  • % (e.g. 2%)

Shape attributes

Name Value Description
width <width> The shape's rectangular area's width
height <height> The shape's rectangular area's height
corners <corners> The shape's corners. A value of 0 draws a circle.
stretch false If true the shape will stretch to cover the rectangular area.
strokecolor <CSS color> CSS color of the stroke (e.g. #ff0000, "red" or rgb(255,0,0))
strokewidth <width> Width of the stroke in pixels
strokedash <dash string> See strokedash attribute above
fillcolor <CSS color> CSS color of the fill (e.g. #ff0000, "red" or rgb(255,0,0))