Drawing module - graphic features for Drupal
The Drawing module consists of two main packages. The first is the drawing.module, this contains generic functions in order to parse graphic arrays, and the second is the toolkit package. The toolkit package at the moment contains only an SVG toolkit, but following the scheme other XML based graphical languages (VML) could be added. The toolkit contains theme functions that assemble the XML for the given syntax.
The following documentation contains the syntax in which different graphics can be called. For example calling a rectangle will result in having a rectangle drawn. Yay.
Drawing API documentation, 5.x-2.x-dev
This documentation is relevant to the SVG toolkit only (since this is the only one currently implemented).
- Rectangle
Attributes: #cx, #cy, #height, #width, #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity
Identification: #id, #class
Attributes: #cx, #cy, #rx, #ry, #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity
Identification: #id, #class
Attributes: #cx, #cy, #r, #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity
Identification: #id, #class
Attributes: #cx1, #cy1, #cx2, #cy2, #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity
Identification: #id, #class
<?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
Attributes: #points => array( int => array( '#cx' => int, '#cy' => int)), #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity.
Identification: #id, #class
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
Attributes: #cx, #cy, #rotate, #a.
Style attributes: #stroke, #stroke-width, #fill, #opacity
Identification: #id, #class
Attributes: #transformations, #height, #width.
Typename: 'drawing_group'
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),
),
);
?>