The good thing about Degrafa is its ability to utilize SVG Data either for creating Simple Geomerty:


to complex ones using combinations of different svg paths and geometries, like this one:



A lot of resources on how to skin flex components using Degrafa are now widely available  on the web, most of them located at the samples repository of the Degrafa site. A simple way of doing so even has a screencast, which also has been my initial reference in creating skins and border-skins for containers and controls like canvas and buttons respectively.

As I progress in my work in using Degrafa for my UI, I noticed that when applying Path to surfaces, or using Paths to define the icon of a button, the path does not follow the constraints I assign to it.

For example, a graphic border skin works out just fine when i assign it to be the skin of a button:



<Path x="{ax}" y="{ay}" width="{awidth}" height="{aheight}" data="....." />



Where the above code does not render properly when i assign this to be the icon of a button or any control component.

The same thing goes for this one:



<Path x="{ax}" y="{ay}" width="{awidth}" height="{aheight}" data="....." />



I came across a relevant topic regarding assigning of a degrafa class to a control icon in a blog of Mr. Patrick Hansen, and from his example I saw that he used a translateTransform to reposition the path that defines the checkmark icon for a checkbox and a note that says:

 <!--set transform becasue paths behave differnetly in Degrafa and the transfrom helps define the position-->

And I used his code to create my own checkmarck icon. Using my own path (I uses Inkscape btw) And I saw that mine is misplaced. From there I played with translating x and y until i can finally position the path on the right location. And I move on with my primary concern: Creating Icons for Buttons.

But I have to learn how to constraint the size of my path according to the size of my button.  I tried to look at other transforms and saw ScaleTransform. However if I assign scaleX and scaleY of the transform this just scales the drawing relative to the original size of the drawing (same problem i encountered with using images as icons) which is not what i needed. 

The thing is, I know what I needed. I do not know how to implement it. And since the web is only my resource and I can only know things that I have read (so my limitation is that I haven’t read every how-to’s of degrafa and if ever i did, i am short on comprehension).

Since I have source codes of degrafa (the latest available) I track the code that draws the path and found on:
the function: 

override public function calculateLayout 

I found this function a bit off 
since to be able to get inside this function 
a layout constraint should be defined. 

However, nowhere inside the code used the attributes i defined for my 
except on line 560 that 
assigns the _layoutRectangle = _layoutConstraint.layoutRectangle. 
Now, this _layoutConstraint.layoutRectangle is readonly and i cannot 
assign it anywhere. 
When i try to prompt this attribute it returns a 0000 rectangle. 
so this whole function seemed to me like it had done nothing. 

I tried rewriting the lines one by one by adding an if else condition 
for example 
on lines 542-544: 

        tempLayoutRect.width = bounds.width; 

i rewrite it to: 

        tempLayoutRect.width = bounds.width; 
} else { 
        tempLayoutRect.twidth = _layoutConstraint.width; 


and so forth 
and at the end i replaced line 560 to: 

_layoutRectangle = tempLayoutRect; 

and tried this on my skin file:

<Path data=".....">

<linearConstraint><LinearConstraint x="{ax}" y="{ay}" width="{awidth}" height="{aheight}" />


And I got what I needed.

The only thing now is I still have to reasign the x and y

as -x and -y respectively (I think its because the coordinate axis of inkscape is a bit different — well i really dont know)

as what Mr. Patrick did on his codes.

But I still feel the need to make this (adjustment) automated as possible since I recycle skins to use for various purposes.


And also, I dont want to be changing source codes so I created a class file that extends Path and used this instead.


*I dont know how to upload files here. . 😛



In flex,  You could skin components programmatically using Degrafa. And I have been doing just that eversince I got a new job here in Makati – trying to skin flex components using the Declarative Graphic Framework.

 I discovered degrafa from googling on ways to skin flex components.

I got a lot of results of course and I started on using (I mean trying to use) graphical skins (the easiest since I knew CSS)

Then I learned programmatic skinning (BUT I DON’T KNOW ACTION SCRIPT!!!) So i turned back to graphical skinning. The thing is that, I keep exporting png files from Inkscape, and keep redrawing them so I tried to google ways on using SVG for skinning instead

and I got Flex”i”MMI which mentioned degrafa.. 

(Ok, enough about that)

I get started on skinning components and I had fun (still having) . So I suggested my co-worker that I’d be using this library instead of learning actionscript drawing tool. Since I understand xml and I know Inkscape.

All in all everything is quite alright until I get to skin a checkbox, which until now, I did not learn how to do. Thanks to Mr. Patrick Hansen for sharing his code and showing me how to do it..

Now I’ll try it and let’s see if it goes alright. 

I’ll have to try too if this works drawing icons on button controls.. 😀

I’ve been using degrafa for a while but can’t quite grasp how to fully utilize the RadielGradientFill.

Here’s what i want to achieve:


It’s an elliptical gradient on a elliptical path. The center of a gradient is slightly off the horizontal x-axis and the radius of the circular gradient is bigger than that of the path.

Usually I create my vector graphics using Inkscape and then used   the generated SVG in xml format (you could do this by clicking the  xml icon – inkscape-xml-icon-toolbar)  in my degrafa objects.

Oh I know how to define simple radial gradients in degrafa but i could only produce circular gradients and i cant even change the x and y axis coordinates of the center.

I was quite frustrated because i dont know how to use the properties of the radial gradient fill to achieve the desired result. So I applied brute force, that is try – and – see method by defining one parameter and see how it affects the gradient to no avail.

Every once in a while I stop and search google for answers using vague keywords like: Degrafa RadialGradientFill  cx (coz the docs says you use this to offset the x-axis of your radial gradient).

And then finally i decided i have to see the code itself so that I could analyze where it happens, and what part of the code decides on how to draw the gradient.

So after downloading the degrafa source code, I saw on

com/degrafa/ on line 174 (under the function

 override public function begin(graphics:Graphics, rc:Rectangle))

The culprit was you have to define  the cx, cy and radius of the fill rather than just the cx and cy.

Like this one:

< RadialGradientFill cx="{rx*1.10}" cy="{ry}" radiusX="{rx*1.11}" radiusY="{ry*1.44}">

where rx=this.width/2 and ry = this.height/2

I thought (radius) should have a default value. (I found out that this is not the case.. 😀 )

See! I’m learning!

Most of the times, I cannot find a direct solution/instructions/guide to simple things such as this one. For example should have pointed out (specially for beginners like me) that cx and cy attributes do not make sense without defining the radius first.

I know, i know.. for most this maybe an obvious thing. But who knows, someone like me might have been stuck on this same problem too.. 😛



loving degrafa more and more