javascript绘图类库jsDraw_VML/SVG

Class: jsColor

This class holds the color information and provides some color related basic functions.

Constructors:

jsColor()

By default the jsColor object is created with black color.

jsColor(hex)

Creates jsColor object with specified hexadecimal value.

Parameter	Type	Description
hex	String	Hexadecimal value of the color. The value can be specified in the similar way as that of the HTML elements. Eg. “#A45F22”, “F22E55”.

jsColor(colorName)

Creates jsColor object with specified name of color.

Parameter

Type

Description

colorName

String

One of the 16 color names also can be specified from following,

"aqua", "black", "blue", "fuchsia", "green", "gray", "lime", "maroon", "navy", "olive", "purple", "red", "silver", "teal", "white", "yellow".

Methods:

setHex(hex)

Description: Sets the color of an existing jsColor object with specified hexadecimal value.

Parameter	Type	Description
hex	String	Hexadecimal value of the color. The value can be specified in the similar way as that of the HTML elements. Eg. “#A45F22”, “F22E55”.

getHex()

Description: Gets the hexadecimal value of the jsColor object.

Return: Returns hexadecimal value of the jsColor object. Type: String

setRGB(redValue, greenValue, blueValue)

Description: Sets the color of an existing jsColor object with specified red, green and blue component values (RGB).

Parameter	Type	Description
redValue	Number	Red component value of the jsColor. The value should be whole number ranging from 0 to 255.
greenValue	Number	Green component value of the jsColor. The value should be whole number ranging from 0 to 255.
blueValue	Number	Blue component value of the jsColor. The value should be whole number ranging from 0 to 255.

getRGB()

Description: Gets the red, green and blue components (RGB values) of the jsColor object.

Return: Returns array of red, green and blue components (RGB values) of the jsColor object. Each value is a whole number ranging from 0 to 255. Type: Array

getDarkerShade(value)

Description: Gets the darker color shade of the jsColor object by specified value. A new jsColor object is returned by subtracting the specified value from each red, green and blue component of the jsColor object.

Parameter	Type	Description
value	Number	Value which is to be subtracted from each of the red, green and blue component of the jsColor object.

Return: Returns the new jsColor object having darker shade of the color. Type: jsColor

getLighterShade(value)

Description: Gets the lighter color shade of the jsColor object by specified value. A new jsColor object is returned by adding the specified value to each red, green and blue component of the jsColor object.

Parameter	Type	Description
value	Number	Value which is to be added to each of the red, green and blue component of the jsColor object.

Return: Returns the new jsColor object having lighter shade of the color. Type: jsColor

rgbToHex(redValue, greenValue, blueValue)

Description: Shared/Static method to convert specified RGB color value to Hexadecimal.

Parameter	Type	Description
redValue	Number	Red component value of the jsColor. The value should be whole number ranging from 0 to 255.
greenValue	Number	Green component value of the jsColor. The value should be whole number ranging from 0 to 255.
blueValue	Number	Blue component value of the jsColor. The value should be whole number ranging from 0 to 255.

Return: Returns hexadecimal value converted from specified RGB color. Returns false if parameters are invalid. Type: String

hexToRGB(hex)

Description: Shared/Static method to convert specified hexadecimal value to RGB color values.

Parameter	Type	Description
hex	String	Hexadecimal value of the color. The value can be specified in the similar way as that of the HTML elements. Eg. “#A45F22”, “F22E55”.

Return: Returns array of red, green and blue components (RGB values) converted from the specified hexadecimal value. Each value is a whole number ranging from 0 to 255. Returns false if parameter hex is invalid. Type: Array

Class: jsFont

This class holds the font information which can be used by other objects in object oriented way.

Constructor:

jsFont([family], [weight], [size], [style], [variant])

Creates the jsFont object with specified parameters. All parameters are analogous to the commonly used CSS font properties. All parameters are optional and if not specified, the default values will be used while drawing the text.

Description: Draws a rectangle at specified point, width and height.

Parameter	Type	Description
family	String	[Optional] Analogous to CSS font-family property. Font family name or generic name of font family.
weight	String	[Optional] Analogous to CSS font-weight property. Weight of the font. Possible values: "normal", "bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900"
size	String	[Optional] Analogous to CSS font-size property. Possible values: "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", "larger", size, %
style	String	[Optional] Analogous to CSS font-style property. Possible value: “normal”, ”italic”, “oblique”
variant	String	[Optional] Analogous to CSS font-variant property. Text displays either in small-caps font or normal font. Possible values: “normal”, “small-caps”

Properties:

Name	Type	Description
family	String	Analogous to CSS font-family property. Font family name or generic name of font family.
weight	String	Analogous to CSS font-weight property. Weight of the font. Possible values: "normal", "bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900"
size	String	Analogous to CSS font-size property. Possible values: "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", "larger", size, %
style	String	Analogous to CSS font-style property. Possible value: “normal”, ”italic”, “oblique”
variant	String	Analogous to CSS font-variant property. Text displays either in small-caps font or normal font. Possible values: “normal”, “small-caps”

Class: jsPen

This class holds the drawing pen/stroke information. Mainly it holds the color and width values to be used for 2D drawing. All draw methods take jsPen object as a parameter. Acts like a pen for drawing.

Constructors:

jsPen()

By default jsPen object is created with black color and 1px width.

jsPen(color, width)

Creates the jsPen object with specified color and width.

Parameter	Type	Description
color	jsColor	Color of the jsPen object.
width	Number	Width of the jsPen object.

Properties:

Name	Type	Description
color	jsColor	Color of the jsPen object.
width	Number	Width of the jsPen object.

Class: jsPoint

This class holds the 2D drawing point information. It holds values of x and y coordinates of the point.

Constructors:

jsPoint()

By default jsPoint object is created with (0, 0) coordinates.

jsPoint(x, y)

Creates the jsPoint object with specified x and y coordinates.

Parameter	Type	Description
x	Number	x coordinate of the point.
y	Number	y coordinate of the point.

Properties:

Name	Type	Description
x	Number	x coordinate of the point.
y	Number	y coordinate of the point.

Class: jsGraphics

This is the main object in the library. This object performs all the drawing activities.

Constructors:

jsGraphics()

By default jsGraphics object is created for the 2D vector drawing directly on the document element.

jsGraphics(canvasDivElement)

Creates the jsGraphics object for the 2D vector drawing on specified div element.

Parameter	Type	Description
canvasDivElement	Div Element	HTML DIV element on which the shapes to be drawn. This element is used as a canvas for drawing the shapes, showing grid etc.

Methods:

setOrigin(point)

Description: Sets the specified point as the origin of the co-ordinate system used for the 2D drawing. The new drawing is drawn using the specified point as origin set by last call to the setOrigin method. By default point (0,0) is the origin.

Parameter	Type	Description
point	jsPoint	The point to be set as a new origin.

getOrigin()

Description: Gets the existing origin of the 2D drawing co-ordinate system.

Return: Returns existing origin of the 2D drawing co-ordinate system. Type: jsPoint

setScale(value)

Description: Sets the drawing scale of the jsGraphics object. The new drawing is drawn as per the scale set by the last call to setScale method. By default the scale value 1. Scale is the factor by which all the metric drawing parameters are converted before drawing the actual pixels.

Parameter	Type	Description
value	Number	The value of the scale to be set.

getScale()

Description: Gets the existing scale of the jsGraphics object.

Return: Returns existing scale of the jsGraphics object. Type: Number

setCoordinateSystem(name)

Description: Sets the type of the 2D drawing coordinate system to the specified one.

Parameter	Type	Description
name	String	Name of the coordinate system. Possible values are “cartecian” and “default”

getCoordinateSystem()

Description: Gets the type/name of existing 2D drawing coordinate system.

Return: Returns the type/name of existing 2D drawing coordinate system. Type: String

logicalToPhysicalPoint(point)

Description: Converts the logical point in the 2D drawing coordinate system to its analogous point on the canvas document or div element.

Parameter	Type	Description
point	jsPoint	The logical point to be converted.

Return: Returns the point on the canvas document or div element analogous to the specified logical point.

drawLine(pen, point0, point1)

Description: Draws a line between the specified points.

Parameter	Type	Description
pen	jsPen	jsPen object to be used for drawing line.
point0	jsPoint	First point (Start point) of the line.
point1	jsPoint	Second point (End point) of the line

Return: Returns the parent div element holding all the content div elements of the line. Type: Div Element

drawRectangle(pen, point, width, height)

Description: Draws a rectangle at specified point, width and height.

Parameter	Type	Description
pen	jsPen	jsPen object to be used for drawing rectangle.
point	jsPoint	Top-Left corner point of the rectangle.
width	Number	Width of the rectangle.
height	Number	Height of the rectangle.

Return: Returns the parent div element holding all the content div elements of the rectangle. Type: Div Element

drawPolyline(pen, points)

Description: Draws a polyline (Connected set of lines) connecting to the specified points.

Parameter	Type	Description
pen	jsPen	jsPen object to be used for drawing polyline.
points	Array	Array of points to be connected by the polyline.

Return: Returns the parent div element holding all the content div elements of the polyline. Type: Div Element

drawPolygon(pen, points)

Description: Draws a polygon with the specified points as vertices.

Parameter	Type	Description
pen	jsPen	jsPen object to be used for drawing polygon.
points	Array	Array of points to be used as vertices of the polygon.

Return: Returns the parent div element holding all the content div elements of the polygon. Type: Div Element

drawCircle(pen, center, radius)

Description: Draws a circle with specified center point and radius.

Parameter	Type	Description
pen	jsPen	jsPen object to be used for drawing circle.
center	jsPoint	Center point of the circle.
radius	Number	Radius of the circle.

Return: Returns the parent div element holding all the content div elements of the circle. Type: Div Element

drawEllipse(pen, center, width, height)

Description: Draws an ellipse at specified center point with specified width and height.

Parameter	Type	Description
pen	jsPen	jsPen object to be used for drawing ellipse.
center	jsPoint	Center point of the ellipse.
width	Number	Width of the ellipse.
height	Number	Height of the ellipse.

Return: Returns the parent div element holding all the content div elements of the ellipse. Type: Div Element

drawArc(pen, center, width, height, startAngle, swapAngle)

Description: Draws an elliptical arc at specified center point with specified width, height, start angle and swap angle.

Parameter	Type	Description
pen	jsPen	jsPen object to be used for drawing arc.
center	jsPoint	Center point of the ellipse of which the arc is a part.
width	Number	Width of the ellipse of which the arc is a part.
height	Number	Height of the ellipse of which the arc is a part.
startAngle	Number	Start angle of the arc in degrees.
swapAngle	Number	Swap angle of the arc in degrees.

Return: Returns the parent div element holding all the content div elements of the arc. Type: Div Element

drawBezier(pen, points)

Description: Draws a cubic Bezier curve with the specified four points.

Parameter

Type

Description

pen

jsPen

jsPen object to be used for drawing the Bezier curve.

points

Array

Array of four points to be used to draw the cubic Bezier curve.

First and Fourth points are used as start and end points respectively while the second and third points are used as control points.

Return: Returns the parent div element holding all the content div elements of the cubic Bezier curve. Type: Div Element

drawPolyBezier(pen, points)

Description: Draws a general Bezier curve with the specified points. The general Bezier curve can be of any degree (linear, quadratic, cubic or more).

Parameter

Type

Description

pen

jsPen

jsPen object to be used for drawing the Bezier curve.

points

Array

Array of points to be used to draw the general Bezier curve.

First and Fourth points are used as start and end points respectively while the in between points are used as control points.

Return: Returns the parent div element holding all the content div elements of the general Bezier curve. Type: Div Element

drawCurve(pen, points, [tension])

Description: Draws an open curve passing through the specified points.

Parameter	Type	Description
pen	jsPen	jsPen object to be used for drawing the curve.
points	Array	Array of points to be used to draw the curve.
tension	Number	[Optional] An optional parameter which specifies the tension value to be used to draw the curve. The default value is 0.

Return: Returns the parent div element holding all the content div elements of the curve. Type: Div Element

drawClosedCurve(pen, points, [tension])

Description: Draws a closed curve passing through the specified points.

Parameter	Type	Description
pen	jsPen	jsPen object to be used for drawing closed curve.
points	Array	Array of points to be used to draw the closed curve.
tension	Number	[Optional] An optional parameter which specifies the tension value to be used to draw the closed curve. The default value is 0.

Return: Returns the parent div element holding all the content div elements of the closed curve. Type: Div Element

fillRectangle(color, point, width, height)

Description: Draws a color filled rectangle at specified point, width and height.

Parameter	Type	Description
color	jsColor	Color to be used for drawing filled rectangle.
point	jsPoint	Top-Left corner point of the rectangle.
width	Number	Width of the rectangle.
height	Number	Height of the rectangle.

Return: Returns the parent div element holding all the content div elements of the rectangle. Type: Div Element

fillPolygon(color, points)

Description: Draws a color filled polygon with the specified points as vertices.

Parameter	Type	Description
pen	jsColor	Color to be used for drawing filled polygon.
points	Array	Array of points to be used as vertices of the polygon.

Return: Returns the parent div element holding all the content div elements of the polygon. Type: Div Element

fillCircle(pen, center, radius)

Description: Draws a color filled circle with specified center point and radius.

Parameter	Type	Description
pen	jsColor	Color to be used for drawing filled circle.
center	jsPoint	Center point of the circle.
radius	Number	Radius of the circle.

Return: Returns the parent div element holding all the content div elements of the circle. Type: Div Element

fillEllipse(color, center, width, height)

Description: Draws a color filled ellipse at specified center point with specified width and height.

Parameter	Type	Description
pen	jsColor	Color to be used for drawing filled ellipse.
Center	jsPoint	Center point of the ellipse.
width	Number	Width of the ellipse.
height	Number	Height of the ellipse.

Return: Returns the parent div element holding all the content div elements of the ellipse. Type: Div Element

fillArc(color, center, width, height, startAngle, swapAngle)

Description: Draws a color filled elliptical arc at specified center point with specified width, height, start angle and swap angle.

Parameter	Type	Description
pen	jsColor	Color object to be used for drawing filled arc.
center	jsPoint	Center point of the ellipse of which the arc is a part.
width	Number	Width of the ellipse of which the arc is a part.
height	Number	Height of the ellipse of which the arc is a part.
startAngle	Number	Start angle of the arc in degrees.
swapAngle	Number	Swap angle of the arc in degrees.

Return: Returns the parent div element holding all the content div elements of the arc. Type: Div Element

fillClosedCurve(color, points, [tension])

Description: Draws a color filled closed curve passing through the specified points.

Parameter	Type	Description
pen	jsColor	Color to be used for drawing filled closed curve.
points	Array	Array of points to be used to draw the closed curve.
tension	Number	An optional parameter which specifies the tension value to be used to draw the closed curve. The default value is 0.

Return: Returns the parent div element holding all the content div elements of the closed curve. Type: Div Element

drawText(text, point, [font], [color], [width], [align])

Description: Draws the specified text at specified point location with various parameters.

Parameter	Type	Description
text	String	The text content to be drawn.
point	jsPoint	Point at which the text is to be drawn.
font	jsFont	[Optional] Font information to be used to draw the text. If not specified default font is used.
color	jsColor	[Optional] Color to be used to draw the text. If not specified default color is used.
width	Number	[Optional] Width of the text. Text will be wrapped to fit in the specified width.
align	String	[Optional] Alignment of the text. Possible values: “left”,”right”,”center” and ”justify”.

Return: Returns the parent div element holding the text content. Type: Div Element

drawImage(url, point, [width], [height])

Description: Draws the specified image at specified point.

Parameter	Type	Description
url	String	Url of the image to be drawn.
point	jsPoint	Point at which the image is to be drawn.
width	Number	[Optional] Width of the image. By default the actual image width is used.
height	Number	[Optional] Height of the image. By default the actual image height is used.

Return: Returns the parent div element holding the text content. Type: Div Element

showGrid([range], [showRange], [color])

Description: Displays the grid as per the 2D coordinate system.

Parameter	Type	Description
range	Number	[Optional] Grid lines interval. By default canvas-width/10 range will be used.
showRange	Boolean	[Optional] If true range will be displayed along x and y axis.
color	jsColor	[Optional] Color of the grid lines. Range and axis colors are darker by 150 than grid color. By default grid lines are shown with RGB(200,200,200) color.

hideGrid()

Description: Hides (clears) the displayed grid.

clear()

Description: Clears the graphics canvas.

Note:

Most of the fuctions return false for invalid parameter(s).

示例DEMO

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">  
    <html>  
        <head>  
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
            <title>Untitled Document</title>  
            <script type="text/JavaScript" src="/rardownload/20130202/20130202140711519.js"></script>  
        </head>  
        <body>  
            <div id="canvas" 
style="overflow:hidden;position:relative;width:600px;height:300px;"></div>   
             <script type="text/JavaScript">  
      
        //Create jsGraphics object  
        var gr = new jsGraphics(document.getElementById("canvas"));  
      
        //Create jsColor object  
        var col = new jsColor("red");  
      
        //Create jsPen object  
        var pen = new jsPen(col,1);  
      
        //Draw a Line between 2 points  
        var pt1 = new jsPoint(20,30);  
        var pt2 = new jsPoint(120,230);  
        gr.drawLine(pen,pt1,pt2);  
      
        //Draw filled circle with pt1 as center point and radius 30.   
        gr.fillCircle(col,pt1,30);  
      
        //You can also code with inline object instantiation like below  
        gr.drawLine(pen,new jsPoint(40,10),new jsPoint(70,150));   
      
    </script>  
        </body>  
    </html>

Documentation of jsDraw2D Javascript 2D Graphics Library