My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
HowTo  
How to use Degrafa.
howto, Featured
Updated Feb 4, 2010 by scalen...@gmail.com

How To Use Degrafa

This is a quick description of how to start using Degrafa. For more information you can refer to the samples at http://samples.degrafa.com or the documentation at http://docs.degrafa.com. If you don't have Degrafa installed, refer to the Getting Started wiki page.

Drawing

Anything that is drawn with Degrafa must be inside a <Surface> tag, like this:

<degrafa:Surface verticalCenter=“0“ horizontalCenter=“0“>
    <degrafa:GeometryGroup>
        <geometry:Circle/>
    </degrafa:GeometryGroup>
</degrafa:Surface>

With the

<surface>
tags added you can start creating a composition using fills, strokes, geometry shapes, geometry groups, repeaters, etc. To draw a shape it must reside inside a Geometry Group, as shown in the following MXML code. You can have multiple Geometry Groups to create advanced compositions. You can also apply effects and filters to Geometry Groups.

<degrafa:GeometryGroup>
	<geometry:Circle/>
</degrafa:GeometryGroup>

In order for a shape to be visible when drawn, a fill or stroke must be used inline of a shape, or referenced by a shape. For example:

<geometry:Circle radius=“150“>
	<geometry:fill>
		<paint:SolidFill color=“#62ABCD“/>
	</geometry:fill>
</geometry:Circle>

Or you could reference a fill or stroke, like this:

<degrafa:fills>
	<paint:SolidFill id=”blueFill” color=“#62ABCD“/>
</degrafa:fills>

<geometry:Circle fill=“{blueFill}“ radius=“150“>

That's the basics. You can do a lot more and we'll try to add more “How to” information as we have more time. For more information, check out the samples at http://samples.degrafa.com or the documentation at http://docs.degrafa.com.

Comment by stemla...@gmail.com, Jan 17, 2008

Is it possible to use that components is AS3 form to draw forms in a sprite ?

Comment by samiha.s...@gmail.com, Feb 18, 2008

he, I've downloaded degrafa.-1.2 for flex builder 2.0.1 but I have this errors:

1017: The definition of base class Locale was not found. Could not resolve <mx:Application> to a component implementation. unable to load SWC Degrafa.swc: multiple points

can any one help me please?

Comment by thesa...@gmail.com, Mar 18, 2008

I am trying to take a vector image created in Adobe Illustrator and saved as an SVG and convert it to a Degrafa element.

Is there an easy way to do this?

<ellipse fill="#00A7FF" stroke="#9F1600" cx="122.79" cy="232.249" rx="10.472" ry="14.369"/>

The above does not seem to match the structure that is used by Degrafa. So I was wondering if there is an easier way to do this?

<geometry:Ellipse fill="{iconFill}" stroke="{iconHighlight}" height="20" width="36" x="32.877" y="39.209"/>

Comment by project member scalen...@gmail.com, Mar 18, 2008

We're currently working on a tool to convert different formats (including SVG) to Degrafa. Until then you'll have to do it manually as you have shown.

Comment by tesshowi...@gmail.com, Apr 15, 2008

The surface tag is limiting placement. Right now it only uses absolute positioning. I'd like to be able to wrap it in a HBox, VBox, etc, and have the shapes space themselves apart accordingly.

Also, is there a way to make a dotted or dashed stroke on the shapes?

Comment by Romko.St...@gmail.com, Oct 16, 2008

"Also, is there a way to make a dotted or dashed stroke on the shapes? "

+1 is there? I was trying to extend SolidStroke? by overriding apply() method. it uses flash.display.Graphics.lineStyle to set solid stroke style... I've also found a hint (in as2.0) on using flash.display.Graphics.lineGradientStyle to display a dashed/dotted line, but all I got so far is a gray solid line...

can anyone tell me where did I go wrong?

override public function apply(g:Graphics, rc:Rectangle):void{
	
	super.apply(g, rc);
	
	//
	var colors:Array = [0x000000, 0xFFFFFF];
	var alphas:Array = [25,15];
	var ratios:Array = [0,255];
	var matrix:Matrix = new Matrix(10, 0, 1, 0, 10, 1);
	
	var spreadMethod:String = "reflect";
	var interpolationMethod:String = "linearRGB";
	var focalPointRatio:Number = .9;
	
	
	g.lineStyle(weight,color as uint,alpha,pixelHinting,
			scaleMode, caps, joints,miterLimit);
	g.lineGradientStyle("radial", colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRatio);

			
}
Comment by project member scalen...@gmail.com, Oct 16, 2008

Check out Renaun Erickson did: http://renaun.com/blog/2008/06/16/257/ . In a future version of Degrafa it will be VERY easy to do dashed, dotted, pattern, whatever lines you want.

Comment by letrongh...@gmail.com, Dec 11, 2008

Very good and easy-to-manage graphics operation. Thanks to Degrafa Team

Comment by cesarero...@gmail.com, Jan 19, 2009

any plans to port it to as3-only projects?

Comment by melikean...@gmail.com, Sep 28, 2010

can anyone tell me why this doesn't work, i am using the swc, it runs but nothing gets displayed.. :(

DegrafaBox?.mxml

<?xml version="1.0" encoding="utf-8"?> <degrafa:Surface xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="" xmlns:degrafa="http://www.degrafa.com/2007" xmlns:paint="com.degrafa.paint." >

<mx:Script>
<![CDATA[
import mx.utils.ColorUtil?;
Bindable? private var awidth:Number; Bindable? private var aheight:Number;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth,unscaledHeight); awidth = unscaledWidth; aheight = unscaledHeight;
}
]]>
</mx:Script>
<degrafa:fills>
<paint:SolidFill id="orangeFill" color="#FF3600"/>
</degrafa:fills>
<degrafa:GeometryGroup?
id="boxFace"> <degrafa:RegularRectangle?
width="{awidth}" height="{aheight}" fill="{ orangeFill }"/>
</degrafa:GeometryGroup>
</degrafa:Surface>

application

<local:DegrafaBox width="400" height="400" /> ( runs but nothing gets displayed.. )

Comment by undav...@gmail.com, May 4, 2011

Hello, I've seen that examples linked in the documentation (like "http://samples.degrafa.com/Circle/Circle.html") don't work. Is there any chance to get them? Thanks

Davide

Comment by project member greg.d...@gmail.com, May 27, 2011

@Davide - please try the links on the following page: http://www.degrafa.org/samples/foundation.html#basics (one example is http://www.degrafa.org/source/Circle/Circle.html )


Sign in to add a comment
Powered by Google Project Hosting