Line - Revision history

Cleonis: Added that 'line' also accepts an array of two numbers, [x,y], as input for each of the points.

2014-08-30T20:07:44Z

Added that 'line' also accepts an array of two numbers, [x,y], as input for each of the points.

@@ Line 32: / Line 32: @@
 var li2 = b2.create('line',[p1,p2], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
 </jsxgraph>
 Here are some of the options that can be used with lines. A complete list can be found on our [http://jsxgraph.uni-bayreuth.de/docs/symbols/Line.html Line reference page].

Michael at 08:31, 8 June 2011

2011-06-08T08:31:41Z

← Older revision		Revision as of 08:31, 8 June 2011
Line 2:		Line 2:
	A line needs two points. Lets construct two points "A" and "B".		A line needs two points. Lets construct two points "A" and "B".
	<source lang="javascript">		<source lang="javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {~~originX~~: ~~200~~, ~~originY: 100~~, ~~unitX: 50~~, ~~unitY: 50~~});		var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
	var p1 = b.~~createElement~~('point',[-1,1], {name:'A',~~style~~:6});		var p1 = b.create('point',[-1,1], {name:'A',size:4});
	var p2 = b.~~createElement~~('point',[2,-1], {name:'B',~~style~~:6});		var p2 = b.create('point',[2,-1], {name:'B',size:4});
	</source>		</source>
	Then we construct a line through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.		Then we construct a line through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.
	<source lang="javascript">		<source lang="javascript">
	var li = b.~~createElement~~('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});		var li = b.create('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
	</source>		</source>

	<~~html>~~		<jsxgraph box="jxgbox" width="500" height="200">
	~~<link rel="stylesheet" type="text/css" href="http://~~jsxgraph~~.uni-bayreuth.de/distrib/jsxgraph.css" />~~		var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>~~		var p1 = b.create('point',[-1,1], {name:'A',size:4});
	~~<div id~~="jxgbox" ~~class~~="~~jxgbox~~" ~~style="width:500px;~~ height~~:200px; position:relative;"></div>~~		var p2 = b.create('point',[2,-1], {name:'B',size:4});
	~~<script type~~="~~text/javascript~~">		var li = b.createElement('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
	var ~~brd~~ = JXG.JSXGraph.initBoard('jxgbox', {~~originX~~: ~~200~~, ~~originY: 100~~, ~~unitX: 50~~, ~~unitY: 50~~});		</jsxgraph>
	var p1 = ~~brd~~.~~createElement~~('point',[-1,1], {name:'A',~~style~~:6});
	var p2 = ~~brd~~.~~createElement~~('point',[2,-1], {name:'B',~~style~~:6});
	var li = ~~brd~~.createElement('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
	</~~script>~~
	~~</html~~>

	Generally it is better to use JavaScript variables and not Geometry-Element names when constructing.		Generally it is better to use JavaScript variables and not Geometry-Element names when constructing.
Line 27:		Line 22:

	<source lang="javascript">		<source lang="javascript">
	var li2 = b.~~createElement~~('line',[p1,p2],		var li2 = b.create('line',[p1,p2],
	{straightFirst:false, straightLast:false, strokeWidth:2, dash:2});		{straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
	</source>		</source>

	<~~html>~~		<jsxgraph box="jxgbox2" width="500" height="200">
	~~<div id~~="jxgbox2" ~~class~~="~~jxgbox~~" ~~style="width:500px;~~ height~~:200px; position:relative;"></div>~~		var b2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});
	~~<script type~~="~~text/javascript~~">		var p1 = b2.create('point',[-1,1], {name:'A',size:4});
	var ~~brd2~~ = JXG.JSXGraph.initBoard('jxgbox2', {~~originX~~: ~~200~~, ~~originY: 100~~, ~~unitX: 50~~, ~~unitY: 50~~});		var p2 = b2.create('point',[2,-1], {name:'B',size:4});
	var p1 = ~~brd2~~.~~createElement~~('point',[-1,1], {name:'A',~~style~~:6});		var li2 = b2.create('line',[p1,p2], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
	var p2 = ~~brd2~~.~~createElement~~('point',[2,-1], {name:'B',~~style~~:6});		</jsxgraph>
	var li2 = ~~brd2~~.~~createElement~~('line',[p1,p2], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
	</~~script>~~
	~~</html~~>

	Here are some of the options that can be used with lines.		Here are some of the options that can be used with lines. A complete list can be found on our [http://jsxgraph.uni-bayreuth.de/docs/symbols/Line.html Line reference page].
	{\| cellpadding="8" cellspacing="0" border="1"		{\| cellpadding="8" cellspacing="0" border="1"
	! Attribute !! Type !! Effect		! Attribute !! Type !! Effect

A WASSERMANN at 17:11, 29 October 2009

2009-10-29T17:11:51Z

← Older revision		Revision as of 17:11, 29 October 2009
Line 13:		Line 13:
	<html>		<html>
	<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>~~
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	<div id="jxgbox" class="jxgbox" style="width:500px; height:200px; position:relative;"></div>		<div id="jxgbox" class="jxgbox" style="width:500px; height:200px; position:relative;"></div>

Bianca: /* Construction of a line */

2009-08-17T18:29:58Z

Construction of a line

← Older revision		Revision as of 18:29, 17 August 2009
Line 54:		Line 54:
	\| highlightStrokeColorOpacity \|\| float \|\| Colors the line, when moused over, with the given opacity. Must be between 0 and 1.<br>0: Line is fully transparent.<br>1: Line is not transparent.		\| highlightStrokeColorOpacity \|\| float \|\| Colors the line, when moused over, with the given opacity. Must be between 0 and 1.<br>0: Line is fully transparent.<br>1: Line is not transparent.
	\|-		\|-
	\| dash \|\| int \|\| Creates a dashed line. Value must be between 0 and 6. <br> 0: solid line<br> 1: dotted line<br>2: line with small dashes<br>3: line with normal dashes<br>4: line with long dashes<br>5: alternating dashes and ~~dots(IE)/small dashes(FF)~~<br>6: alternating ~~long~~ dashes and ~~dots(IE)/~~small ~~dashes(FF)~~		\| dash \|\| int \|\| Creates a dashed line. Value must be between 0 and 6. <br> 0: solid line<br> 1: dotted line<br>2: line with small dashes<br>3: line with normal dashes<br>4: line with long dashes<br>5: line with alternating medium and big dashes and large gaps<br>6: line with alternating medium and big dashes and small gaps
	\|-		\|-
	\| strokeWidth \|\| int \|\| Determines the thickness of the line		\| strokeWidth \|\| int \|\| Determines the thickness of the line

Bianca: /* Construction of a line */

2009-08-17T18:16:04Z

Construction of a line

New page

== Construction of a line ==
A line needs two points. Lets construct two points "A" and "B".
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p1 = b.createElement('point',[-1,1], {name:'A',style:6});
var p2 = b.createElement('point',[2,-1], {name:'B',style:6});
</source>
Then we construct a line through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.
<source lang="javascript">
var li = b.createElement('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
</source>

<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px; position:relative;"></div>
<script type="text/javascript">
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p1 = brd.createElement('point',[-1,1], {name:'A',style:6});
var p2 = brd.createElement('point',[2,-1], {name:'B',style:6});
var li = brd.createElement('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
</script>
</html>

Generally it is better to use JavaScript variables and not Geometry-Element names when constructing.
Now, we do the same examples with JavaScript variables. Further, we don't show the whole line, but only a segment. To show another variation, we use a dashed line style.

<source lang="javascript">
var li2 = b.createElement('line',[p1,p2],
{straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
</source>

<html>
<div id="jxgbox2" class="jxgbox" style="width:500px; height:200px; position:relative;"></div>
<script type="text/javascript">
var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p1 = brd2.createElement('point',[-1,1], {name:'A',style:6});
var p2 = brd2.createElement('point',[2,-1], {name:'B',style:6});
var li2 = brd2.createElement('line',[p1,p2], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
</script>
</html>

Here are some of the options that can be used with lines.
{| cellpadding="8" cellspacing="0" border="1"
! Attribute !! Type !! Effect
|-
| strokeColor || HTML colorstring || Colors the line in the color specified.
|-
| highlightStrokeColor || HTML colorstring || Colors the line, when moused over, in the color specified. If same as strokeColor , removes highlighting.
|-
| strokeColorOpacity || float || Colors the line with the given opacity. Must be between 0 and 1.<br>0: Line is fully transparent.<br>1: Line is not transparent.
|-
| highlightStrokeColorOpacity || float || Colors the line, when moused over, with the given opacity. Must be between 0 and 1.<br>0: Line is fully transparent.<br>1: Line is not transparent.
|-
| dash || int || Creates a dashed line. Value must be between 0 and 6. <br> 0: solid line<br> 1: dotted line<br>2: line with small dashes<br>3: line with normal dashes<br>4: line with long dashes<br>5: alternating dashes and dots(IE)/small dashes(FF)<br>6: alternating long dashes and dots(IE)/small dashes(FF)
|-
| strokeWidth || int || Determines the thickness of the line
|-
| straightFirst || bool || Determines whether the line is drawn beyond the first defining point.
|-
| straightLast || bool || Determines whether the line is drawn beyond the second defining point.
|-
| firstArrow || bool || Determines whether the line has an arrow at the first defining point.
|-
| lastArrow || bool || Determines whether the line has an arrow at the second defining point.
|-
| trace || bool || Determines whether the line is traced.
|-
| shadow || bool || Determines whether the line has a shadow.
|-
| visible || bool || Determines whether the line is shown.
|}

[[Category:Examples]]

PW: /* Construction of a line */

2008-11-24T14:00:51Z

Construction of a line

← Older revision		Revision as of 14:00, 24 November 2008
Line 15:		Line 15:
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>		<div id="jxgbox" class="jxgbox" style="width:500px; height:200px; position:relative;"></div>
	<script type="text/javascript">		<script type="text/javascript">
	var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});		var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
Line 33:		Line 33:

	<html>		<html>
	<div id="jxgbox2" class="jxgbox" style="width:500px; height:200px;"></div>		<div id="jxgbox2" class="jxgbox" style="width:500px; height:200px; position:relative;"></div>
	<script type="text/javascript">		<script type="text/javascript">
	var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});		var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});

Michael at 09:57, 21 October 2008

2008-10-21T09:57:49Z

← Older revision		Revision as of 09:57, 21 October 2008
Line 3:		Line 3:
	<source lang="javascript">		<source lang="javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
	var p1 = ~~board~~.createElement('point',[-1,1], {name:'A',style:6});		var p1 = b.createElement('point',[-1,1], {name:'A',style:6});
	var p2 = ~~board~~.createElement('point',[2,-1], {name:'B',style:6});		var p2 = b.createElement('point',[2,-1], {name:'B',style:6});
	</source>		</source>
	Then we construct a line through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.		Then we construct a line through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.
	<source lang="javascript">		<source lang="javascript">
	var li = ~~brd~~.createElement('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});		var li = b.createElement('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
	</source>		</source>

Line 28:		Line 28:

	<source lang="javascript">		<source lang="javascript">
	var li2 = ~~brd2~~.createElement('line',[p1,p2],		var li2 = b.createElement('line',[p1,p2],
	{straightFirst:false, straightLast:false, strokeWidth:2, dash:2});		{straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
	</source>		</source>

84.147.86.108 at 15:46, 17 September 2008

2008-09-17T15:46:40Z

← Older revision		Revision as of 15:46, 17 September 2008
Line 29:		Line 29:
	<source lang="javascript">		<source lang="javascript">
	var li2 = brd2.createElement('line',[p1,p2],		var li2 = brd2.createElement('line',[p1,p2],
	{straightFirst:false, straightLast:false, strokeWidth:2});		{straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
	</source>		</source>

84.147.86.108 at 15:45, 17 September 2008

2008-09-17T15:45:51Z

← Older revision		Revision as of 15:45, 17 September 2008
Line 25:		Line 25:

	Generally it is better to use JavaScript variables and not Geometry-Element names when constructing.		Generally it is better to use JavaScript variables and not Geometry-Element names when constructing.
	Now, we do the same examples with JavaScript variables. Further, we don't show the whole line, but only a segment. To show another ~~variant~~, we use a dashed line style.		Now, we do the same examples with JavaScript variables. Further, we don't show the whole line, but only a segment. To show another variation, we use a dashed line style.

	<source lang="javascript">		<source lang="javascript">
	var li2 = brd2.createElement('line',[p1,p2], {straightFirst:false, straightLast:false, strokeWidth:2});		var li2 = brd2.createElement('line',[p1,p2],
			{straightFirst:false, straightLast:false, strokeWidth:2});
	</source>		</source>

84.147.86.108 at 15:45, 17 September 2008

2008-09-17T15:45:12Z

← Older revision		Revision as of 15:45, 17 September 2008
Line 40:		Line 40:
	</script>		</script>
	</html>		</html>


			[[Category:Examples]]