Library interface
Here is a high-level API for a VectorGraphics
object. Not too extensive, but complete enough to fit the most common drawing needs.
All functions listed below are "public
", i.e., intended for use by the client, as opposed to "private
" functions (with the preceding underscore), used internally by the library.
function VectorGraphics(container)
{ ... }
VectorGraphics.prototype = {
MoveTo: function(x, y)
{ ... },
LineTo: function(x, y)
{ ... },
Rect: function(width, height)
{ ... },
Ellipse: function(rx, ry)
{ ... },
Polygon: function(arrayofPoints)
{ ... },
Text: function(string)
{ ... },
SetFillColor: function(rgb)
{ ... },
SetStrokeColor: function(rgb)
{ ... },
SetStrokeWidth: function(rgb)
{ ... },
SetFont: function(fontNames, fontSize, fontColor, fontVariant)
{ ... }
}
Usage
Using of the library is simple as nothing:
<script type="text/javascript" src="svg+vml.js"></script>
<script type="text/javascript">
function Draw()
{
var vg = new VectorGraphics(document.getElementById("container"));
vg.SetStrokeColor("black");
vg.SetStrokeWidth(1);
vg.MoveTo(100, 100);
vg.SetFillColor("green");
vg.Rect(100, 100);
vg.MoveTo(105, 105);
vg.SetFillColor("#ADFF2F");
vg.Rect(10, 10);
vg.MoveTo(120, 105);
vg.SetFillColor("#7CFC00");
vg.Rect(10, 10);
vg.MoveTo(135, 105);
vg.SetFillColor("#32CD32");
vg.Rect(10, 10);
vg.MoveTo(105, 120);
vg.SetFillColor("#3CB371");
vg.Rect(10, 10);
vg.MoveTo(105, 135);
vg.SetFillColor("#2E8B57");
vg.Rect(10, 10);
vg.Polygon([[195,85],[205,85],[205,95],[215,95],[215,105],[205,105],
[205,105],[205,115],[195,115],[195,105],[185,105],
[185,95],[195,95]]);
vg.MoveTo(100, 205);
vg.SetStrokeColor("#708090");
vg.LineTo(200, 205);
vg.LineTo(320, 320);
vg.LineTo(543, 320);
vg.SetStrokeColor("black");
vg.SetFont("Arial Unicode MS", 16, "blue", "normal");
vg.MoveTo(321, 315);
vg.Text("Some Not So Long Blue Text");
vg.MoveTo(100, 240);
vg.SetFillColor("#FF4500");
vg.Rect(100, 100);
vg.MoveTo(105, 245);
vg.SetFillColor("#F08080");
vg.Rect(10, 10);
vg.MoveTo(120, 245);
vg.SetFillColor("#CD5C5C");
vg.Rect(10, 10);
vg.MoveTo(135, 245);
vg.SetFillColor("#FF0000");
vg.Rect(10, 10);
vg.MoveTo(105, 260);
vg.SetFillColor("#B22222");
vg.Rect(10, 10);
vg.MoveTo(105, 275);
vg.SetFillColor("#8B0000");
vg.Rect(10, 10);
vg.Polygon([[195,225],[205,225],[205,235],
[215,235],[215,245],[205,245],
[205,245],[205,255],[195,255],
[195,245],[185,245],[185,235],[195,235]]);
vg.MoveTo(100, 345);
vg.SetStrokeColor("#90A0B0");
vg.LineTo(200, 345);
vg.LineTo(320, 345);
vg.LineTo(535, 345);
vg.MoveTo(321, 340);
vg.Text("Another Not So Long Blue Text");
vg.SetStrokeColor("black");
vg.MoveTo(100, 400);
vg.SetFillColor("#FFD700");
vg.Rect(100, 100);
vg.MoveTo(105, 405);
vg.SetFillColor("#FFFF00");
vg.Rect(10, 10);
vg.MoveTo(120, 405);
vg.SetFillColor("#FF8C00");
vg.Rect(10, 10);
vg.MoveTo(135, 405);
vg.SetFillColor("#B8860B");
vg.Rect(10, 10);
vg.MoveTo(105, 420);
vg.SetFillColor("#FFA500");
vg.Rect(10, 10);
vg.MoveTo(105, 435);
vg.SetFillColor("#D2691E");
vg.Rect(10, 10);
vg.Polygon([[195,385],[205,385],[205,395],
[215,395],[215,405],[205,405],
[205,405],[205,415],[195,415],
[195,405],[185,405],[185,395],[195,395]]);
vg.MoveTo(100, 505);
vg.SetStrokeColor("#B0C0D0");
vg.LineTo(200, 505);
vg.LineTo(320, 370);
vg.LineTo(542, 370);
vg.MoveTo(321, 365);
vg.Text("Final Not So Long Blue Text");
vg.SetStrokeColor("black");
vg.MoveTo(585, 345);
vg.SetFillColor("#DA70D6");
vg.Ellipse(50, 100);
vg.SetFillColor("#BA55D3");
vg.Ellipse(40, 80);
vg.SetFillColor("#9932CC");
vg.Ellipse(30, 60);
vg.SetFillColor("#8B008B");
vg.Ellipse(20, 40);
vg.SetFillColor("#800080");
vg.Ellipse(10, 20);
}
</script>