Click here to Skip to main content
15,896,207 members
Articles / Multimedia / OpenGL

Drawing Polylines by Tessellation

Rate me:
Please Sign up or sign in to vote.
4.93/5 (39 votes)
21 Jul 2011CPOL8 min read 126.2K   5.8K   94  
Drawing Polylines by tessellation with joints, caps, feathering and per- vertex color
<body>
<script src='raphael-min.js'></script>
<script src='dragger.js'></script>
<script src='drawer.js'></script>
<link rel="stylesheet" type="text/css" href="layout.css" />
<div class='side_pane'>
	This is description.
</div>

<script>
//an application contains:
//-TP (drawer)
//-DG (dragger)
//-canvas1 (html element)
//-rl (Raphael canvas)
var app_count=0;

function demo_application1()
{
	var i=this.i=app_count;
	var parent=this;
	app_count++;
	document.write("<div class='main_canvas' id='canvas"+i+"'></div>");
	
	this.TP = new drawer();
	this.DG = new dragger(this.TP,'canvas'+i);
	this.rl = Raphael('canvas'+i);
	//
	this.TP.px=[30,30,200,200];
	this.TP.py=[100,200,100,200];
	
	this.TP.redraw=function()
	{
		var rl=parent.rl;
		var TP=parent.TP;
		rl.clear();
		rl.rect(0,0,800-1,600-1);
		
		//drawings,,,
		rl.text(120,80,"I am application "+parent.i+"!");
		for ( var i=0; i<4; i++)
		{
			TP.drawpoint(TP.px[i],TP.py[i], 4,0);
		}
		
		TP.drawpath(rl);
	}
	this.TP.redraw();
}

app1 = new demo_application1();
//app2 = new demo_application1();
</script>
</body>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Hong Kong Hong Kong
Chris H.F. Tsang
tyt2y3@gmail.com

Comments and Discussions