Tag Archives: Inkscape - Page 2

Menina

Desenho vetorial com o Inkscape.

Menina

:)

FLISOL Fortaleza 2009

flisol_cartaz_500px

Dia 25 de Abril de 2009 no Casa Brasil unidade Vila União, Rua Celso Tinoco, 1374, atrás do Colégio Jorge Vieira.

Downloads:

Buzz on JavaFX and Inkscape


At November, 26, on the main page of java.sun.com at the section From The Blogosfere

Thanks for all comments, suggestions and feedback on the post Inkscape and JavaFX working together. The JavaFX guru James Weaver posted about on his blog and it also figured out on java.sun.com on the From The Blogosfere section.

Bob said that there are build binaries of Inkscape for Windows, so we can already see it 0.46-devel working without compiling yourself yours.

\o/

And hey, Project Xort won a second place prize at the MySQL and GlassFish Student Reviews Contest. A lot of guys here from Brazil were prized, congractulations guys!

Black Cat and White Bunny

Two vector drawing I did to a friend. It’s anime-chiby style character, the first mixed with a cat and the second with a bunny. I did using Inkscape. As always, both under the Creative Commons Attribution-Share Alike license.

Download: black_cat.svg

White Bunny:

Download: white_bunny.svg

Inkscape and JavaFX working together

Inkscape is a open source cross-platform vector graphics editor application that I use daily to create draws.

When Project Nile was launched, me and some others guys complained about lack of open source alternatives in the workflow of creation with JavaFX. So we developed a module inside Inkscape that converts your SVG drawings to JavaFX code.

Features

  • Both are free and open source technologies, providing more tools on a powerful workflow for programmers and designers to develop Rich Internet Applications.
  • Comes natively with Inkscape. Install Inkscape an have JavaFX exporting out-of-the-box. No needing to install external plugins.
  • Provides a way to Inkscape users to make RIA applications reusing their work at drawing tool.
  • Provides a way to JavaFX programmers a tool for designers their graphics and interfaces.
  • Keep separated the JavaFX programming logic from the graphics resources but also provide a way to connect them.
  • They work on Windows, Mac OS, Linux, OpenSolaris and FreeBSD.

Workflow Example

I’ll show here step by step how would be a designer-developer workflow from designing graphical elements, such interfaces, to integrating it to a JavaFX Script code in NetBeans. In this example I’m using Inkscape 0.46-devel, build from the unstable sources and NetBeans 6.1 with the JavaFX module. See here how to build Inkscape from sources and here how to do some optimizations on the build.

Here’s a artwork (a modified version from another one I did in another post) made with Inkscape.

Doesn’t matter the complexity of the drawing it is made of discrete elements such circles, rectangles, paths and others. What the exporting module does is converting these SVG elements into JavaFX Scene Graph API elements.

To do that just click on File → Save As… or Shift+Ctrl+S.

Select JavaFx as the output format.

And chose a name. I’m saving the drawing as Girl.fx.

Now the drawing is a JavaFX class that extends from CustomNode. Once in your classpath (in this case the same directory of your main code) you can call it.

Girl{}

Another example, the famous SVG tiger.

Tiger{}

Actually, you can get the elements of your drawing as attributes nodes of the main node. We use the name you gave to your object to name the attributes.

import javafx.scene.paint.Color;
var girl = Girl{}
girl.rightiris.fill = Color.LIME;
girl.fringe.fill = Color.WHITE;
girl.backhair.fill = Color.DARKGRAY;
girl.hair.fill = Color.GRAY;

import javafx.scene.paint.Color;
var girl = Girl{}
girl.rightiris.fill = Color.GREEN;
girl.backhair.fill = Color.DARKRED;
girl.hair.fill = Color.RED;

You can also put event handling by code.

import javafx.input.MouseEvent;
var p = Player{}
p.x.onMouseClicked = function( e: MouseEvent ):Void {
java.lang.System.exit(0);
}

As a ordinary JavaFX Node, you can do whatever you do with a Node, like using it inside a application or applying effects or transformations.

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.effect.SepiaTone;
 
var girl = Girl{
   scaleX: 0.5
   scaleY: 0.5
   effect: SepiaTone{}
}
 
Frame {
   visible: true
   stage: Stage {
      content: [girl]
   }
}

Using this approach you can have the reference and total control under all those elements that compose your drawing. You can design complete interfaces and attach event handling by code.

Source code

The module is already on the main Inkscape dev tree and working properly. I guess it will be officially released to all users in the next Inkscape release.

Still to do

  • Fix some problems with strokes.
  • Fix some problems in the gradients.
  • Use Zlib to create jfd files when the structure is too big.
  • Provide a dynamic method like getElementById in JavaScript.
  • Convert effects like blur to JavaFX effects.
  • There are some i18n errors in the module to be fixed.
  • Finish the adaption from Paths to SVGPaths.
  • Finish the adaption to the new JavaFX 1.0 syntax (coming December, 2).

Thanks!

Thanks for all guys that worked on this module and also on the projects Inkscape and JavaFX. Specially thanks for Bob Jamison, Jim Clarke, Joshua Marinacci and others. That’s my first contribution to a big free software, I’m very glad and I want to do much more. :D

SVG: There She Is!!

Two SVG fanart drawings of the very cute animation There She Is!! from South-Korean.

The first one is a sign that is shown from first to last episode, love between cats and bunnies is not allowed. :)


sign_there_she_is.svg

The second, from the pro-love campaign from the fourth episode.


sign2_there_she_is.svg

Enjoy, share, print and modify. They are under Creative Commons Attribution Share-Alike license. I also did a more complete post (in portuguese) in my another blog.