JavaScript graphics library

JavaScript graphics library

Visualsw

In web development, when we need to draw some graphics on the web page, it is more difficult. In the recent development, you have encountered some need to draw graphics in the client, such as triangles, ellipses, etc. Fortunately, there is an internet, go to Google, huh, it's really a lot, just like this, I found a very good JavaScript DHTML graphics library, really good, I can't help but feel the professional, ^ _ ^, good , Let's take a look.

The old Walter Zorn's URL is http://www.walterzorn.com, very good JavaScript website, very strong.

This use is the web direct drawing function, to this address download

http://www.walterzorn.com/scripts/wz_jsgraphics.zip

Let's take a look at the effect:

Strong, huh, huh!

The help document on the page is very strong, don't use me to explain it.

I have made a little development above this, huh, everyone can develop new functions according to my own needs;

Added a method: straight line with arrows

First add some parameters:

/ *

============================================================================================================================================================================================================= ====================================

Function: Total line parameters with arrow

Author: Shen Wang

date:

2004/04/15

============================================================================================================================================================================================================= ====================

* /

Var linecolor = "# 000000";

Var linewidth = 3;

VAR arrowheadwidth = 5;

Var arrowheadangle = 15/180 * math.pi; // radians

Var arrowbegin = true;

Var arrownd = true;

/ *

============================================================================================================================================================================================================= ==================== * /

Then add a function of drawing the straight line, you can set the arrow, text, arrow angle, etc.

/ *

============================================================================================================================================================================================================= ====================

Function: Draw the straight line with arrow

Author: Shen Wang

date:

2004/04/15

============================================================================================================================================================================================================= ====================

* /

this.setarrowWidth = function (x)

{

Arrowheadwidth = x;

}

this.setarrowangle = function (x)

{

X = x> 90? 45: x;

X = x <0? 45: x;

Arrowheadangle = x * math.pi / 180;

}

this.SetLineWidth = function (x)

{

LINEWIDTH = X;

}

this.setLineColor = Function (x)

{

LineColor = X;

}

this.setarrowbegin = function (x)

{

Arrowbegin = x;

}

this.setarrowend = function (x)

{

Arrownd = x;

}

THIS.DRAWARROWHEADLINE = Function (beginx, beginy, endx, endy)

{

THIS.SETCOLOR (LINECOLOR);

THIS.SETSTROKE (LINEWIDTH);

VAR DX, DY;

Dx = math.abs (beginx-endx); DY = math.abs (beginy-end);

Var lineslope; // linear slope (radians)

LineSlope = Math.atan (DX / DY);

/ / Seeking the coordinates of the middle distance

VAR TMPLINE;

Tmpline = (linewidth arrowheadwidth) / (2 * math.sin (arrowheadangle);

// Time in the starting point

Var begincenterx;

Var begincentery;

// Test

Var EndCenterx;

VAR EndCentery;

IF (arrowbegin)

{

// Draw a starting point triangle

// begin

Begincenterx = Beginx TMPLINE * MATH.SIN (LINESLOPE);

Begincenter = Beginy Tmpline * Math.cos (LINESLOPE);

/ / Define the three vertices of the starting triangle

Var Beginx1, Beginy1;

Var beginx2, beginy2;

Var Beginx3, Beginy3;

Beginx1 = beginx;

Beginy1 = beginy;

Beginx2 = beginx-tmpline * math.sin (arrowheadangle-lineselope);

Beginy2 = Beginy TMPLINE * MATH.COS (arrowheadangle-linelope);

Beginx3 = Beginx TMPLINE * MATH.SIN (ArrowHeadangle Lineslope);

Beginy3 = Beginy TMPLINE * MATH.COS (arrowheadangle lineslope);

Var XbeginPoints = New Array (Beginx1, Beginx2, Beginx3);

VAR YbeginPoints = New Array (Beginy1, Beginy2, Beginy3);

This.FillPolygon (XbeginPoints, Ybeginpoints);

// end

}

Else

{

Begincenterx = beginx;

Begincenter = beginy;

}

IF (arrownd)

{

// Draw a final point triangle

// begin

EndCenterx = ENDX-TMPLINE * MATH.SIN (LINESLOPE);

EndCentery = endy-tmpline * Math.cos (LINESLOPE);

/ / Define three vertices of the end point triangle

Var ENDX1, Endy1;

Var ENDX2, Endy2;

Var ENDX3, Endy3;

ENDX1 = ENDX;

Endy1 = endy;

ENDX2 = ENDX-TMPLINE * MATH.SIN (arrowheadangle lineslope);

Endy2 = endy-tmpline * Math.cos (arrowheadangle lineslope);

ENDX3 = ENDX TMPLINE * MATH.SIN (arrowheadangle-linelope);

Endy3 = endy-tmpline * math.cos (arrowheadangle-linelope);

VAR Xendpoints = New Array (ENDX1, ENDX2, ENDX3);

Var YendPoints = New Array (Endy1, Endy2, Endy3);

This.FillPolygon (Xendpoints, YendPoints);

// end

}

Else

{

EndCenterx = ENDX;

EndCentery = endy;

}

// Draw the center line

This.drawline (Begincenterx, Begincentery, Endcenterx, EndCentery);

}

THIS.DRAWFLOWLINE = Function (Beginx, Beginy, Endx, Endy, Begintext, EndText)

{

Var Textx;

Var Texty;

THIS.DRAWARROWHEADLINE (Beginx, Beginy, Endx, Endy);

Textx = beginx 20;

Texty = Beginy;

THIS.DRAWSTRING (Begintext, Textx, Texty);

}

Let's take a look at the effect:

Test code: