Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Add the Graphics Power of SVG to PHP : Page 3

Discover how to generate and manipulate SVG documents dynamically—directly from PHP.


advertisement
Drawing Basic Shapes
You build SVG documents using the basic drawing methods listed in Table 1. For example, Listing 1 shows the code for a PHP script that generates an SVG document showing the basic shapes that phpHtmlLib supports (see Figure 1). Note that you must define the PHPHTMLLIB constant that points to the /phphtmllib directory and include the proper phpHtmlLib classes before you can generate the SVG content.

 
Figure 1. Basic Shapes Using phpHtmlLib: The code in Listing 1 draws basic shapes using the phpHtmlLib library.

The next example generates an SVG document that illustrates how to use the onmouseover and onmouseout events (see Figure 2):

 
Figure 2. Capturing Mouse Events: This rectangle (initially unfilled) fills with a red color whenever a user moves the mouse pointer over it.

<?php /** * Include the phphtmllib libraries */ define("PHPHTMLLIB," $_SERVER["DOCUMENT_ROOT"] ."/php/phpLibs/phphtmllib"); include_once("includes.inc"); //SVG helpers aren't included in //the autoload.inc by default include_once(PHPHTMLLIB. '/src/svg/SVGTAGS.inc'); include_once(PHPHTMLLIB. '/src/svg/svg_utils.inc'); //build the SVG Document object and set // the width=500, height=500 attributes // on the 'svg' root xml tag $svgdoc = new SVGDocument(500,500); //draw a rectangle //('x','y','width','height','fill', // 'stroke','stroke-width','style') $rect = svg_rect(55,5,60,60, "black,""blue,"2,NULL); //add a neat mouseover to the rect $rect->set_tag_attribute("onmouseover," "evt.target.setAttribute('style', 'fill:red;');"); $rect->set_tag_attribute("onmouseout," "evt.target.setAttribute('style', '');"); $svgdoc->add($rect); print $svgdoc->render(); ?>

The preceding code draws a rectangle with a mouseover script so that when users move the mouse pointer over the rectangle, the code fills the rectangle with red, and when they move the mouse pointer out of the rectangle, the code clears the fill.

 
Figure 3. Translate and Rotate: The figure shows an ellipse translated and rotated by 45 degrees.
The following example generates an SVG document for drawing an ellipse rotated at a 45-degree angle (see Figure 3):

<?php /** * Include the phphtmllib libraries */ define("PHPHTMLLIB," $_SERVER["DOCUMENT_ROOT"] ."/php/phpLibs/phphtmllib"); include_once("includes.inc"); //SVG helpers aren't included //in the autoload.inc by default include_once(PHPHTMLLIB.'/src/svg/SVGTAGS.inc'); include_once(PHPHTMLLIB.'/src/svg/svg_utils.inc'); //build the SVG Document object and set //the width=500, height=500 attributes $svgdoc = new SVGDocument(500,500); //draw an ellipse, translate it by (100 100) //and rotate it with -45 degrees //'cx','cy','rx','ry','fill','stroke','stroke-width','style' $ellipse = svg_ellipse(50,50,25,10,"none,""blue,"4,NULL); $ellipse->set_transform("translate(100 100) rotate(-45)"); $svgdoc->add($ellipse); print $svgdoc->render(); ?>

Generating SVG Diagrams
Using phpHtmlLib, you can generate SVG diagrams dynamically; however, the library currently supports only line graphs. The base class for graphing operations is SVGGraph; here's the constructor:



SVGGraph __construct ( $title, $width,  $height)

The arguments indicate the graph title, width and height. The SVGGraph class has three important descendants: SVGXYGraph, SVGXYPlotGraph, and SVGXYLineGraph. These classes offer a set of dedicated methods for building SVG graphs, of which the most important are the add_line and add_point methods. Here's an example of creating a simple graph:

void add_line (string $x_values, string $y_values, [string $color = "red"])

This method plots a line graph. The $x and $y arguments are strings of comma-separated numeric values representing the graph coordinates. The last argument (optional) specifies the line color which is set to red by default. To add a point to the graph, you'd use the add_point method:

 
Figure 4. Generated Line Graph: PHP generated this SVG graph with phpHtmlLib using an SVGGraph-derived class.

void add_point (string $x, string $y, [string $color = "red"])

The arguments specify the x and y coordinates of the inserted graph point. As a complete example, here's the PHP code to generate an SVG document that draws two line graphs (see Figure 4):

<?php /** * Include the phphtmllib libraries */ define("PHPHTMLLIB," $_SERVER["DOCUMENT_ROOT"] ."/php/phpLibs/phphtmllib"); include_once("includes.inc"); //SVG helpers aren't included in the autoload.inc by default include_once(PHPHTMLLIB.'/src/svg/SVGTAGS.inc'); include_once(PHPHTMLLIB.'/src/svg/svg_utils.inc'); //build the SVG Document object and set //the width=500, height=500 attributes $svgdoc = new SVGDocument(500,500); //define the graph sourface $graph = new SVGXYLineGraph("," 500, 500); $graph->set_grid_line_color("red"); //add a line $graph->add_line("10,20,23,51,90," "0,9,67,45,90," "black"); //add another line $graph->add_line("10,48.5,56,89," "9.5,34,56,67," "blue"); //add the graph to SVG document $svgdoc->add($graph); //show the SVG print $svgdoc->render(); ?>



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap