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),
),
);
?>