Difference between revisions of "Canvas 3D - Line Tag"

From CDOT Wiki
Jump to: navigation, search
(Syntax)
(Tag Attributes)
 
(5 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
== Introduction ==
 
== Introduction ==
  
The Line is one of the basic primitives that can be created on the fly. The Line is a 2D face that can be displayed in a 3D world. The Line Tag encompasses the various attributes that are associated with a Line, such as a start position and an end position. In addition, the Line can be textured with a predefined image from a specific location.
+
The Line is one of the basic primitives that can be created on the fly. The Line Tag encompasses the various attributes that are associated with a Line, such as a start position and an end position.
  
 
== Tag Attributes ==
 
== Tag Attributes ==
  
* name
 
** '''Usage:''' <line name="myline" />.
 
** The ''name'' attribute is optional. If omited, the name is not used and thus cannot be retrieved within JavaScript.
 
** The Line is given an Identifier so that It can be retrieved and modified within JavaScript.
 
** The name is a only accepts a string of Alpha-numeric characters.
 
 
* start
 
* start
** '''Usage:''' <line start="20.0, 200.0" />.
+
** '''Usage:''' <line start="20, 200" />.
 
** The ''start'' attribute determines the start position of a line
 
** The ''start'' attribute determines the start position of a line
** The ''start'' attribute is optional. If omited, the start position defaults to the Origin location at {0.0, 0.0}.
+
** If omited, the start position defaults to the Origin location at {0, 0}.
** The ''start'' attribute holds a set of two floating point numbers separated by commas that are associated with the distance away from the Origin Point on the X and Y axis.
 
 
* end
 
* end
** '''Usage:''' <line end="50.0, 200.0" />.
+
** '''Usage:''' <line end="50, 200" />.
** The ''end'' attribute determines the end position of a line
+
** The ''end'' attribute determines the end position of a line. A line is then drawn from its start position to its end position.
** The ''end'' attribute holds a set of two floating point numbers separated by commas that are associated with the distance away from the Origin Point on the X and Y axis.
+
** ''This attribute cannot be omitted.''
 +
* fillcolor
 +
** '''Usage:''' <line fillcolor="#00FF00" />.
 +
** The ''fillcolor'' attribute sets a specific color that will be painted inside the line.
 +
** This value, if omitted, will default to black (#000000).
 +
* bordercolor
 +
** '''Usage:''' <line bordercolor="#FF00FF" />.
 +
** The ''bordercolor'' attribute sets a specific color of the border.
 +
** If omitted, the line will be drawn borderless.
 +
*linecap
 +
**'''Usage:''' <line linecap="round" />
 +
** The lineCap property determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square.
 +
**By default this property is set to butt.
 +
[[Image:Canvas_linecap.png]]
  
 
== Syntax ==
 
== Syntax ==
Line 28: Line 35:
 
<pre>
 
<pre>
 
<canvas>
 
<canvas>
   <line name="myline" start="10, 20" end="35, 20" />
+
   <line start="10, 220" end="350, 100" fillcolor="#000" linecap="butt" />
 
</canvas>
 
</canvas>
 
</pre>
 
</pre>

Latest revision as of 13:49, 10 March 2007

Line Tag Reference

Back To XML 3D Main Page

Introduction

The Line is one of the basic primitives that can be created on the fly. The Line Tag encompasses the various attributes that are associated with a Line, such as a start position and an end position.

Tag Attributes

  • start
    • Usage: <line start="20, 200" />.
    • The start attribute determines the start position of a line
    • If omited, the start position defaults to the Origin location at {0, 0}.
  • end
    • Usage: <line end="50, 200" />.
    • The end attribute determines the end position of a line. A line is then drawn from its start position to its end position.
    • This attribute cannot be omitted.
  • fillcolor
    • Usage: <line fillcolor="#00FF00" />.
    • The fillcolor attribute sets a specific color that will be painted inside the line.
    • This value, if omitted, will default to black (#000000).
  • bordercolor
    • Usage: <line bordercolor="#FF00FF" />.
    • The bordercolor attribute sets a specific color of the border.
    • If omitted, the line will be drawn borderless.
  • linecap
    • Usage: <line linecap="round" />
    • The lineCap property determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square.
    • By default this property is set to butt.

Canvas linecap.png

Syntax

<canvas>
  <line start="10, 220" end="350, 100" fillcolor="#000" linecap="butt" />
</canvas>

References

  • None.