Last updated April 24, 2009. Created by danielb on April 24, 2009.
Log in to edit this page.

This documentation is relevant to the SVG toolkit only (since this is the only one currently implemented).

Rectangle
Description: draw a rectangle. Main parameters are the coordinates of the top-left corner, height and width.
Attributes: #cx, #cy, #height, #width, #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity
Identification: #id, #class
Ellipse
Description: draw a ellipse. Main parameters are the coordinates of the center and the radii in x and y direction.
Attributes: #cx, #cy, #rx, #ry, #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity
Identification: #id, #class
Circle
Description: draw a circle. Main parameters are the coordinates of the center and the radius.
Attributes: #cx, #cy, #r, #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity
Identification: #id, #class
Line
Description: draw a line. Main parameters are the coordinates of the ending points.
Attributes: #cx1, #cy1, #cx2, #cy2, #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity
Identification: #id, #class
Polyline (multipoints)
Description: draw a set of connected straigth line segments. Main parameters are the points that make up the polyline. Syntax is forming an array:
<?php
$canvas
['polyline01'] => array(
'#type' => 'drawing_polyline',
'#points' => array(
 
1 => array(
   
'#cx' => int,
   
'#cy' => int,
    ),
 
2 => array(
   
'#cx' => int,
   
'#cy' => int,
    ),
  ),
);
?>

Attributes: #points => array( int => array( '#cx' => int, '#cy' => int)), #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity. Applying fill fills the area enclosed by the polyline, with the two ending points connected.
Identification: #id, #class

Polygon (multipoints)
Description: draw a set of connected straigth line segments and close it. Main parameters are the points that make up the polygon. Syntax is the same as of the polyline.
Attributes: #points => array( int => array( '#cx' => int, '#cy' => int)), #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity.
Identification: #id, #class
Path (multipoints)
Description: draw the outline of the shape point by point. You can use bezier, arc curves with this type.

Main parameters are the points that make up the shape. There are two syntaxes available for defining the shape: a machine friendly (implicit), and an inclusion friendly (explicit). Default is the implicit declaration, explicit has to be indicated by setting the #explicit TRUE. Examples:

Explicit path:

<?php
$canvas
['path_explicit'] => array(
 
'#type' => 'drawing_path',
 
'#explicit' => TRUE,
 
'#points' => 'M 100 100 L 300 100 L 200 300 z',
);
?>

Implicit path:

<?php
$canvas
['path_implicit'] => array(
 
'#type' => 'drawing_path',
 
'#points' => array(
   
1 => array(
     
'#cx' => 100,
     
'#cy' => 100,
     
'#modifier' => 'M',
    ),
   
2 => array(
     
'#cx' => 300,
     
'#cy' => 100,
     
'#modifier' => 'L',
    ),
   
3 => array(
     
'#cx' => 200,
     
'#cy' => 300,
     
'#modifier' => 'z',
    ),
  ),
);
?>

Attributes: #points (explicit or implicit declaration), #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity
Identification: #id, #class

Text
Description: print text.
Attributes: #cx, #cy, #rotate, #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity
Identification: #id, #class
Group
Description: group one or more objects.
Attributes: #transformations, #height, #width.
Typename: 'drawing_group'
File
Description: embedded SVG file (can be output of php file (AJAX))
Attributes: #height, #width, #location
Typename: 'drawing_file'
Example:

<?php
function draw_sparkline() {                                                                            
 
$canvas = array(
   
'#type' => 'drawing_file',
   
'#location' => drupal_get_path('module', 'sparkline') . '/sparkline.php',
   
'#height' => '200px',
   
'#width' => '200px',
    );
  return
$canvas;
}
?>

Attributes

#cx: x coordinate
#cy: y coordinate
#width: width of the object
#height: height of the object
#r: radius of the circle
#rx: radius in the x direction (one half axis of the ellipse)
#ry: radius in the y direction (one half axis of the ellipse)
#a: anchor, link to other pages, documents. Just like <a> in HTML.
#points: multipoint declaration. In path it can be explicit or implicit.
#rotate: rotation of the object around 0,0. Units in degrees.

Transformations

Only the group object is capable of declaring transformations for them. #transform is an array containing the names of the valid SVG transformation, and their argument in array format.
Example:

<?php
$canvas
['plot'] = array(
   
'#type' => 'drawing_group',
   
'#stroke' => 'black',
   
'#stroke-width' => 2,
   
'#transform' => array(
     
'translate' => array('50', -50),
     
'scale' => array(1,-1),
    ),
  );
?>

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.