User Tools

Site Tools


graphic

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

graphic [2015/09/18 13:04] (current)
glass created
Line 1: Line 1:
 +====== Graphic ======
  
 +The **graphic** element can draw many types of graphics. ​
 +
 +{| style="​float:​right;​margin:​0 0 30px 20px;"
 +|+ A graphic element with a white stroke and gradient fill.
 +|-
 +|{{:​oegraphic.jpg?​nolink&​200|Graphic element screenshot}}
 +|}
 +
 +{| class="​wikitable"​
 +!
 +Characteristic
 +!
 +Definition
 +|-
 +| Type || Display Object
 +|-
 +| Category || Element
 +|-
 +| Scope || Local
 +|-
 +| Position || *
 +|-
 +| Parents || Container
 +|-
 +| Children || none
 +|-
 +| Gestures || none
 +|-
 +| Requirements || none
 +|}
 +
 +
 +{| class="​wikitable"​
 +!
 +Attribute
 +!
 +Type
 +!
 +Description
 +|-
 +| anchorX || number || sets the anchorX of curve
 +|-
 +| anchorY || number || sets the anchorY of curve
 +|-
 +|bottom || number || sets the bottom value
 +|-
 +| buttomLeftRadius || number || sets the bottom left radius of the graphic object
 +|-
 +| bottomRightRadius || number || sets the bottom right radius of the graphic object
 +|-
 +| class || text || sets the object'​s css class
 +|-
 +| className || text || specifies the class name of the object
 +|-
 +| color || number || sets fill color when fill type is color
 +|-
 +| controlX || number || sets controlX of curve
 +|-
 +| controlY || number || sets controlY of curve
 +|-
 +| cornerHeight || number || sets the height of the ellipse that is used to round the rectangle
 +|-
 +| cornerWidth || number || sets the width of the ellipse that is used to round the rectangle
 +|-
 +| debugStyle || object reference || sets the debug style
 +|-
 +| fill || text || sets fill type, choose: color or gradient
 +|-
 +| fillAlpha || number || sets fill alpha when fill type is color
 +|-
 +| fixedScale || true/false || set the fixed scaling of the object
 +|-
 +| gradientAlphas || text || sets gradient alphas when fill type is gradient; alpha values correspond to the colors in the gradientColors array ordered list, max 12 (e.g. 1, 1, 1)
 +|-
 +| gradientColors || text || sets gradient colors when fill type is gradient, max 12 (e.g. 0x000000, 0x555555, 0xFFFFFF)
 +|-
 +| gradientFocalPointRatio || number || a number that controls the location of the focal point of the gradient
 +|-
 +| gradientHeight || number || the height in pixels to which the gradient will spread
 +|-
 +| gradientInterpolation || text || specifies which interpolation value to use :RGB or linearRGB
 +|-
 +| gradientRatios || text || color distribution ratios; valid values are 0-255
 +|-
 +| gradientRotation || number || sets the rotation (in degrees) that will be applied to the gradient
 +|-
 +| gradientSpread || text || specifies which gradient spread method to use
 +|-
 +| gradientType || text || sets gradient type when fill type is gradient
 +|-
 +| gradientWidth || number || sets the width in pixels to which the gradient will spread
 +|-
 +| gradientX || number || sets how far in pixels the gradient is shifted horizontally
 +|-
 +| gradientY || number || sets how far in pixels the gradient is shifted vertically
 +|-
 +| heightPercent || text || sets the height percent of object
 +|-
 +| horizontalCenter || number || sets the horizontal center of object
 +|-
 +| left || number || sets the left value
 +|-
 +| line || text || sets line type, choose: color or gradient
 +|-
 +| lineAlpha || number || sets the alpha of the line
 +|-
 +| lineCaps || text || sets the type of cap on the line ends choose: none, round, or square
 +|-
 +| lineColor || number || sets the color of the line
 +|-
 +| lineGradientAlphas || text || sets line gradient alphas when line type is gradient; alpha value correspond to the colors in gradient color ordered list, max 12 (e.g. 1, 1, 1)
 +|-
 +| lineGradientColors || text || sets line gradient colors when line type is gradient ordered list, max 12 (e.g. 0x000000, 0x555555, 0xFFFFFF)
 +|-
 +| lineGradientFocalPointRatio || number || a number that controls the location of the focal point of the line gradient
 +|-
 +| lineGradientHeight || number || the height in pixels to which the gradient will spread
 +|-
 +| lineGradientInterpolation || text || specifies which interpolation value to use: RGB or linearRGB
 +|-
 +| lineGradientRatios || text || color distribution ratios, valid values are 0-255
 +|-
 +| lineGradientRotation || number || sets the rotation in degrees that will be applied to the gradient
 +|-
 +| lineGradientSpread || text || specifies which gradient spread method to used
 +|-
 +| lineGradientType || text || sets line gradient type when line type is gradient
 +|-
 +| lineGradientWidth || number || sets the width in pixels the gradient will spread
 +|-
 +| lineGradientX || number || sets how far in pixels the gradient is shifted horizontally
 +|-
 +| lineGradientY || number || sets how far in pixels the gradient is shifted vertically
 +|-
 +| lineJoints || text || specifies the type of joint on the line ends choose: miter, round, or bevel
 +|-
 +| lineMiterLimit || number || sets the limit at which a miter is cut off
 +|-
 +| linePixelHinting || true/false || specifies whether to hint strokes to full pixels
 +|-
 +| lineScaleMode || text || specifies how the line stroke size changes when graphic is scaled choose: normal, none, or vertical normal - Always scale the line thickness when the object is scaled (default)
 +|-
 +| lineStroke || number || sets the width of the line stroke in pixels
 +|-
 +| maxScale || number || sets maximum scale of the object in pixels
 +|-
 +| minScale || number || sets minimum scale of the object in pixels
 +|-
 +| pathCommands || text || sets the path moveTo and lineTo values
 +|-
 +| pathCoordinates || text || sets path coordinates
 +|-
 +| radius || number || sets radius in pixels of circle
 +|-
 +| right || number || sets the right value
 +|-
 +| shape || text || sets predefined shape type
 +|-
 +|scale || number || sets both x and y scale values
 +|-
 +| startX || number || sets starting x position for curve
 +|-
 +| startY || number || sets starting Y position for curve
 +|-
 +|top || number || sets top value
 +|-
 +| topLeftRadius || number || sets the top left radius of the graphic object
 +|-
 +| topRightRadius || number || sets the top right radius of the graphic object ​
 +|-
 +| verticalCenter || number || sets the vertical center of object
 +|-
 +| widthPercent || text || sets the percent width of object
 +|}
 +
 +See Also: [[Display Attributes]]
 +
 +
 +<​code:​csharp linenums:​1>​
 +<​Container scale="​.7"​ x="​200">​
 +    <!-- Horizontal Line -->
 +    <Text text="​Horizontal Line" x="​500"​ y="​50"​ color="​0xFFFFFF"​ fontSize="​25"​ width="​200"​ />
 +    <Graphic x="​500"​ y="​120"​shape="​line"​ width="​200"​ lineStroke="​5"​ lineColor="​0xFF0000"​ lineAlpha="​.5"​ />
 +
 +    <!-- Vertical Line -->
 +    <Text text="​Vertical Line" x="​750"​ y="​50"​ color="​0xFFFFFF"​ fontSize="​25"​ width="​200"​ />
 +    <Graphic x="​800"​ y="​100"​shape="​line"​ height="​200"​ lineStroke="​10"​ lineColor="​0x00FF00"​ lineAlpha="​.5"​ />
 +
 +    <!-- Vector -->
 +    <Text text="​Vector"​ x="​950"​ y="​50"​ color="​0xFFFFFF"​ fontSize="​25"​ width="​200"​ />
 +    <Graphic x="​1000"​ y="​100"​shape="​vector"​ width="​100"​ height="​200"​ lineStroke="​15"​ lineColor="​0x0000FF"​ lineAlpha="​1"​ />
 +
 +    <!-- Rectangle -->
 +    <Text text="​Rectangle"​ x="​1150"​ y="​50"​ color="​0xFFFFFF"​ fontSize="​25"​ width="​200"​ />
 +    <Graphic x="​1180"​ y="​120"​shape="​rectangle"​ width="​100"​ height="​100"​ fill="​color"​ color="​0x448866"​ lineStroke="​10"​ lineColor="​0x448899"​ />
 +
 +    <!-- Round Rectangle -->
 +    <Text text="​Round Rectangle"​ x="​500"​ y="​350"​ color="​0xFFFFFF"​ fontSize="​25"​ width="​200"​ />
 +    <Graphic x="​530"​ y="​400"​shape="​roundRectangle"​ width="​100"​ height="​200"​ cornerWidth="​20"​ cornerHeight="​20"​ fill="​color"​ color="​0xDDAA99"​ lineStroke="​10"​ lineColor="​0xAA7777"​ />
 +
 +    <!-- Circle -->
 +    <Text text="​Circle"​ x="​820"​ y="​350"​ color="​0xFFFFFF"​ fontSize="​25"​ width="​200"​ />
 +    <Graphic x="​750"​ y="​400"​shape="​circle"​ radius="​100"​ color="​0x44CCAA"​ lineStroke="​10"​ lineColor="​0x449933"​ />
 +
 +    <!-- Ellipse -->
 +    <Text text="​Ellipse"​ x="​1000"​ y="​350"​ color="​0xFFFFFF"​ fontSize="​25"​ width="​200"​ />
 +    <Graphic x="​1000"​ y="​400"​shape="​ellipse"​ width="​100"​ height="​200"​ color="​0x44CCAA"​ lineStroke="​0"​ />
 +
 +    <!-- Gradient Rectangle -->
 +    <Text text="​Gradient"​ x="​1200"​ y="​350"​ color="​0xFFFFFF"​ fontSize="​25"​ width="​200"​ />
 +    <Graphic x="​1200"​ y="​400"​ shape="​rectangle"​ width="​200"​ height="​100"​ lineStroke="​2"​ fill="​gradient"​ gradientAlphas="​.5,​ 1, .5" gradientColors="​0x229944,​ 0xFF5544, 0x3366AA"​ gradientRatios="​0,​ 65, 255" gradientRotation="​45"/>​
 +
 +    <!-- Triangle -->
 +    <Text text="​Triangle"​ x="​500"​ y="​640"​ color="​0xFFFFFF"​ fontSize="​25"​ width="​200"​ />
 +    <Graphic x="​500"​ y="​680"​ shape="​triangle"​ color="​0x00FF00"​ height="​100"/> ​
 +
 +    <!-- Curve -->
 +    <Text text="​Curve"​ x="​750"​ y="​640"​ color="​0xFFFFFF"​ fontSize="​25"​ width="​200"​ />
 +    <Graphic x="​530"​ y="​660"​ shape="​curve"​ color="​0xFF0000"​ startX="​150"​ startY="​100"​ anchorX="​400"​ anchorY="​100"​ controlX="​275"​ controlY="​0"/>​
 +
 +    <!-- Path -->
 +    <Text text="​Path"​ x="​1000"​ y="​640"​ color="​0xFFFFFF"​ fontSize="​25"​ width="​200"​ />
 +    <Graphic x="​800"​ y="​680"​ shape="​path"​ color="​0x000000"​ pathCommands="​1,​2,​1,​2"​ pathCoordinates="​200,​10,​ 300,110, 300,10, 200,​110"/> ​
 +
 +</​Container>​
 +</​code>​
graphic.txt · Last modified: 2015/09/18 13:04 by glass