Having applied to the Drawing SVG project for the GSoC I started to outline my plans, which I would like to share here, to ask for your feedback on it. I will edit this document as the discussion progresses.
I think the logical setup is two-leveled: we want a general drawing module, and specific "tools" to use the models, primitives defined in the drawing module. This basic module has to be very well designed, because potentially many developers will want to use it. From here on I will use tool as referring to different drawing APIs, such as SVG.
What should be in this drawing.module?
Drawing
- dot
- x and y coordinates
- path (straight)
- n-line: 2xN coordinates
- linewidth
- path (bezier) (this one is going to be tough, but it would be a valuable addition for graphs)
- n-line: 2xN coordinates
- bezier curve: 2xN - 2 angles (for ending nodes we need only one angle)
- linewidth
- rectancle
- x and y coordinates for origin
- dimensions: height, width
- linewidth
- tilt (?)
- ellipse
- x and y coordinates for origin
- dimensions: major and minor axes
- linewidth
- tilt (?)
- irregular closed path (closed n-line)
- Nx2 coordinates
- linewidth
here is a code snippet how i imagined based on sime's proposal:
<?php
drawing_shapes() {
$shapes[] = array( // basically this is a small circle, or rectangle, maybe that should be first, and 'dot' modifying that?
'#name' => 'dot',
'#callback' => 'drawing_callb_dot',
'#callback_args' => array('x'=>'int', 'y'=>'int', 'size'=>'int')
);
$shapes[] = array(
'#name' => 'line',
'#callback' => 'drawing_callb_line',
'#callback' => array(initialize_dot($x1, $y1), initialize_dot($x2, $x2)) // this is supposed to create two points
);
$shapes[] = array(
'#name' => 'bline',
'#callback' => 'drawing_callb_bline',
'#callback' => array(initialize_dot($x1, $y1), initialize_dot($x2, $x2), 'angle1'=>'double', 'angle2'=>'double')
);
$shapes[] = array(
'#name' => 'ellipse',
'#callback' => 'drawing_callb_ellipse',
'#callback_args' => array('x'=>'int', 'y'=>'int', 'amaj'=>'int', 'amin'=>'int') // center + major/minor axes
);
$shapes[] = array(
'#name' => 'rectangle',
'#callback' => 'drawing_callb_rectangle',
'#callback_args' => array('x'=>'int','y'=>'int', 'height'=>'int', 'width'=>'int')
);
}
?>It is probably clear that I am not yet aware of the proper usage of callbacks, but I hope that the idea is clear behind it. When I was doing this sketch i realized the importance of the 'origin'. Where is the origin of a body? Center? Lower-left corner? What happens when we rotate it? This has to be well thought.
Canvas
Canvas is the drawing area for the graphic elements. By purpose I distinguish two types of canvases:
- root canvas, and
- group canvas, subcanvas, or just canvas
There is one general coordinate system definition, which in the systems of each canvas is the same (origin in the same relative location, axes in the same direction). The root canvas is the main drawing area, it has the references to the canvases within, and a certain size. Its location on the page is defined by CSS, or layout of the HTML. (possible feature: to check if canvases are out of the root canvas)
The canvas (for the subcanvas type I think the general term 'canvas' is acceptable, as generally it is clear we are not talking about the root element) can also contain references to its child elements, graphical elements, and the canvas' position in the parent canvas.
(Why did I not mention graphics in root canvas? Because I think graphics should be generally associated with the subcanvas type, as they can have location assigned. If we have one object, we can immediately assign it to its own canvas, to position it on the root canvas. )
Deformation
It is a possible request, that one wants to apply a certain distortion on an element. But what is this element? The canvas? a subcanvas?
Deformations to be implemented:
- magnification: one wants to enlarge one area in the canvas -> define a point, and a region around it
- rotation: rotate an object -> place the elements to be rotated on a canvas (=> we have a well defined center and location), and rotate it accordingly, along with all the objects on the canvas.
- other distortions: skew: region, or object?
[update 0329] Section: Canvas
Comments
You're over complicating and
You're over complicating and mis-defining canvas.
Your canvas will be the entire image you have to work with. E.g. if you're making a 500x500 unit image, that is your canvas. Essentially, it is the visible universe.
From there you can group elements into blocks and do relative positioning.
Essentially you can think of the SVG/Drawing space like you would an HTML document (SVG is XML based). In HTML you have the page, the root of the entire document (the tags really). From there you can add elements. You can either position these elements absolutely (everything relative to the root element) or relatively to it's parent. Like positioning Text to (5,5) relative to it's parent, a block element at (50,50), will render the text at (5,5). However if we set the Text's positioning to absolute, even though the block at (50,50) is its parent, the text will be rendered to (5,5).
bit more clarification on my part
I agree with you on the basic concept, I left that part of this section unfinished, I wanted to extend later. Thanks for the contribution and inspiration.
Just for a bit more clarification what I meant:
You have two different canvas types:
a) a root canvas, that is basically the drawing space that you also mentioned, this is positioned directly via CSS, or according to the HTML document, so no need for coordinates, and
b) group canvases, subcanvases that are essentially grouped elements, subelements of root, or other group canvases
There is only one root canvas, but there can be many group canvases, which furthermore can contain more groups. It might be necessary to handle certain objects together, just think putting a big moving dot on a graph for example with some text.
On the root canvas you need to declare one origin, which can be one of the corners, or the middle of the image. It will also give references to the subcanvases, and from positions defined in each subcanvas with the coordinate system you can calculate where it will be on the actual image.
I updated the document accordingly.
I know what relative and absolute positioning means, but I am not sure if this concept needs to be introduces: everything can be done by the canvas levels, for an absolute positioned text you simply put it on a canvas, which is a first level subcanvas of the root canvas.