Dmitri's feedback about animation & APIs, etc.

Hi All,

    I spent some time with Dmitri Baranovskiy chatting about his
experiences building Raphael, developer feedback he
gets and pain points for developers that Raphael solves.

    He was kind enough to put together a document covering the main
points and I think it would be great input to
consider as we do new things for SVG2 - especially the DOM APIs.

    The original document is here: https://gist.github.com/2203573 and
I've pasted a plain text version below.

    Definitely worth a read.

Alex
--
Dear SVG WG,

While developing Raphaël I came across different issues with SVG API
as a developer and in this letter I am going to share my experience of
these issues and, more importantly, my approach to solve them with
Raphaël API.

Start with easy one.

getBBox() — doesn’t take transformations into account. I guess there
are cases when this is useful, but it would be nice to have ability to
get bounding box of the object after transformation as well. Also I
added x2 & y2 as a returning values. This made developer life a bit
easier.

Transformations
The API for transformations are way to verbose, from coding point of
view it should be relatively easy to set and get(!) transformation of
an element. Getting is an issue. I decided for Raphaël to copy path
string approach where you have set of command with parameters. So, I
made commands for transformations: “t”, “r”, “s” & “m”, which are
translate, rotate, scale and matrix.

transform=”translate(100, 100) rotate(45deg, 100, 100)”
is equal to this transform string:

t100,100r45,100,100
I also noticed that all transformations are relative, i.e. depend on a
previous one. I added commands for absolute transformations: “T”, “R”
& “S”. For rotation it’s origin of rotation that remains absolute. For
scale I added origin of scale; it’s really not fair that rotation has
origin, but scale always scale around 0,0. When origin is not
specified I use center of bounding box as an origin. I am not going
deep into syntax it basically the same as path string, just different
commands. It’s implemented in Raphaël since 2.0.0 and I received some
positive feedback on it.

Methods
There are some methods I implemented in Raphaël that I (and pretty
much any developer) would be keen to see in DOM API: isPointInside(x,
y), returns boolean value depends on if given point inside or outside
of the shape. getElementsByPoint(x, y), returns array of elements that
shapes contain given point. isPointInsideBBox() isPointInsidePath(),
these two are self explanatory, but notice that they don’t use DOM.
pathBBox(), same no DOM harmed pathIntersection(), give array of
points for intersection of the two paths. transformPath(pathstring,
transformstring), return path string after transform string was
applied to it. getPointAtLength() , which will in addition to x, y
give alpha as angle of derivative at the point. And here some methods
that I didn’t implement yet, but would be awesome to have: Logical
operators on path line add, subtract, intersect, etc. Finding the
offset of the path.

In general would be awesome to do some work on the paths without
creating a DOM element.

Animation
In addition to standard animation API:

el.animate(to, ms, callback);
I added ability to create an animation object:

var a = Raphael.animation(to, ms, callback);
el.animate(a);
Now, you can ask element for it’s status:

var s = el.status();
this will return array of animations and their current status in form
of 0..1. Alternatively you can write:

var s = el.status(a);
this will simply return your number 0..1 as a status of given
animation. You can also pass a value into status, like this:

el.status(a, 0.5);
this will set animation to the middle stage, like if it jump back (or
forward) to the middle. This simple addition to API makes it very
flexible especially with custom attributes.

Custom Attributes
You can watch this video here: https://vimeo.com/37155152 In short,
you can create a function that returns set of attributes and assign it
as a attribute with a custom name.
--

Received on Wednesday, 11 April 2012 01:17:49 UTC