Introduction for project codename Flanvas. Flanvas is the canvas system I’m workin on in javascript that will allow you to use the canvas in a flash-like manner. Finally, an html native app that has interactivity. The Loader class will also load in XAML from an AI export.
I’ve been doing some research lately in to how I can convert Illustrator paths in to something I can use with the HTML Canvas. I’ve tried numerous things to try and get the path data out of illustrator, but it hasn’t gone very well — until today.
I stumbled across two very helpful articles. The first of which covers AI > XAML conversion and offers a free Illustrator plug-in that converts Illustrator work in to XAML. XAML is a XML based language Microsoft maintains that handles displaying graphics for WPF. Mike Swanson built this plug-in and it has proved to be very helpful so far.
Here’s a snippet of what XAML path data looks like:
{syntaxhighlighter brush: xml;fontsize: 100; first-line: 1; }<!– Layer 1/<Path> –>
<Path StrokeThickness=”1.0″ Stroke=”#ff000000″ StrokeMiterLimit=”1.0″ Fill=”#ffffffff” Data=”F1 M 0.048,0.498 L 83.048,8.498″/>{/syntaxhighlighter}
This is all great and dandy, but what am I supposed to do with this information? Well, class Jack says to start toying witht he paths and see what numbers change so that I can figure out what is what. This helped a little, but eventually I drove myself back to Google. Shortly after, I found my second helpful article about “Drawing Graphics Shapes in XAML” written by Mahesh Chand. With this new information I am able to convert XAML in to a javascript format with I can use to render this data in an HTML Canvas.
What’s next? Well, I’m going to start on a script that will convert the XAML code to javascript. You can thing use this javascript to draw your shapes in the HTML Canvas. My plan is to replace a lot of my flash development with this technique (using jQuery tweens). I’m hoping this will allow me to create rich content that will work not only for the desktop folks, but for the mobile users as well (iPhone). The script I create will most likely be posted in the Playground. I will make sure to link it in this article as well.
Update – March 15, 2010
I’ve accomplished pulling Illustrator art in to the canvas via XAML. It’s somewhat limited, but still shows a majority of the vector artwork. AI Meshes and dotted lines do not work natively. Dotted lines can be implemented with some extra work, but I’m busy with some other things right now.