| Newsgroups |
gmane.text.xml.svg.devel |
| Message-ID |
<[email protected]> |
Hi,
Announcing the release of Pergola 2.2.13 http://www.dotuscomus.com/pergola/ http://www.dotuscomus.com/pergola/.
New features:
- Datagrid (class + dependency classes)
- Context menu (class + contextmenuManager utility)
- Find dialog
- File dialog
- Input class extensions
- Keyboard management (class)
- Undo/Redo (class)
+ other extensions, + new requests and geometry utility functions.
Complete API reference (http://www.dotuscomus.com/pergola/currentVersion/Documentation/API-reference.html) and new tutorial with How To’s section (http://www.dotuscomus.com/pergola/currentVersion/Documentation/Tutorial.html)
A note: I recently read this review about Pergola: “Pergola is all about building whole apps in SVG, which is a sledgehammer for my particular nut.” It’s a nice assessment in a way, but I need to point out that basically the system and its services, as well as most library SVG objects (filters, patterns, shapes, etc.) are built with lazy loading. This means that if you use Pergola for simple works there’s absolutely no system underlying, in memory or anywhere. But if you create a window with a datagrid, menus et al, yes, there’s a system behind.
Let me show that Pergola is also a nut-cracker. The nut example below, visible at http://www.dotuscomus.com/pergola/currentVersion/Examples/Nut/nut2.svg http://www.dotuscomus.com/pergola/currentVersion/Examples/Nut/nut1.svg
uses a feTurbulence filter, a clip path (needed for the filter in this particular case (I can’t recall if a clip path is really needed or if there’s a way to do without)), and a path:
var nut= "path data here";
$C({
element : "path",
d : nut,
appendTo : $C({
element : "clipPath",
id : "clip",
appendTo : pergola.defs
})
});
$C({
element : "path",
d : nut,
filter : pergola.filter.noise({ // overriding some properties
baseFrequency : ".12 .05",
seed : 1000,
tableValues : {R : ".9 .05", G : ".42 .02", B : ".25 .01"}
}),
"clip-path" : "url(#clip)",
appendTo : pergola.user
});
___________________________
For a more realistic effect we could add lines on the shell; in this case we create a <g> container and we move the clip path from the path element (the nut) to the <g>. This would allow to overlay more stuff, like a pattern with opacity for example, which would also be clipped. Adding the lines:
var nut = "path data here";
// The clip path
…
var g = $C({
element : "g",
transform : "scale(.95) translate(100 100)",
"clip-path" : "url(#clip)",
appendTo : pergola.user
});
// The nut (without the clip). It could actually be a rect instead of a replica of the clip
…
// The lines (made randomly as a compound path in Inkscape):
$C({
element : "path",
d : "…",
fill : "none",
stroke : " #403010",
"stroke-width" : .25,
appendTo : g
});
// and the middle line
$C({
element : "path",
d : "...",
fill : "none",
stroke : "#603810",
"stroke-width" : .75,
appendTo : g
});
Domenico Strazzullo