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

simple-geometry

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

car-complex-path1

.

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:

<GraphicBorderSkin> 

<geometry>

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

</geometry>

</GraphicBorderSkin>

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:

<mx:Canvas>

<Surface>

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

</Surface>

</mx:Canvas>  

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:
com/degrafa/geometry/Path.as 
the function: 

override public function calculateLayout 
(childBounds:Rectangle=null):void{} 

—————- 
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 
layoutConstraint 
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: 

if(isNaN(_layoutConstraint.width)){ 
        tempLayoutRect.width = bounds.width; 
 } 

i rewrite it to: 

if(isNaN(_layoutConstraint.width)){ 
        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}" />

</linearConstraint></Path>

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. . :P