On Tue, May 19, 2015 at 11:29 AM, Michael Schmalle < teotigraphix...@gmail.com> wrote:
> Ironically Om, this was my next post! SVG and what are we doing to use it. > > Maybe through all my bable of the last thread some might see where I am > coming from, I am really trying to figure out, what are we building on. > > Now SVG I understand, Canvas I understand. > > Om, what are the pluses and minuses of each paradigm? I was just reading > about this today, canvas doesn't have event handlers, svg does. > Canvas is a fire and forget mode of rendering. Think of Canvas as an equivalent to Flash's BitmapData. Once you draw on a Canvas, you cannot get access to individual elements without doing a lot of complicated hittests or other kind of hacks. Moreover, it is a raster object. So, if you draw on a Canvas and resize it up, it gets pixelated. SVG, on the other hand is a retained mode of rendering. All elements drawn in SVG become part of the DOM. This means that you can do event handling, animation, etc. much more easily. Also, SVG is vector drawing. So drawing in any size and scaling keeps the rendering quality intact. Canvas is generally used for drawing a ton of elements in runtime without needing them to be individually interactive. SVG is less performant because of the added dom related overhead on each element, and is (should) generally used for building interactive UI components (charts, maps, etc.) > > FXG -> SVG, is there currently a parser/renderer for this? How were you > planning on doing this. > So, my first approach was to write an FXG to SVG transformer[1] stylesheet that I imagined would be invoked by the compiler. It turns out that doing it the 'FlexJS' way was much easier. Basically, I created the primitives - Line, Circle, Path, Fill, Stroke, etc. in the AS side [2] Then, I created their JS equivalents [3] where I draw SVG elements via JavaScript. That is pretty much it. The MXML/FXG parsing, cross-compilation from AS to JS etc. is handled automatically by FlexJS (magic for me ;-) ) The idea from here on is that anything you draw on the screen via AS3 will look exactly the same in Flash vs. HTML/JS. Here is an example of flash [4] vs html [5] Put them side by side and see if you can tell the difference :-) The next progression was to build FlexJS charts out of these. Here is a set of chart components that Peter Ent built on top of this core graphics classes: Flash [6] vs HTML5[7] There is a pretty detailed wiki page for these charts [8] > > Is this something we could write that would pretty much cross compile to > js? > Yes, I believe we are at a point where things are getting more and more cross-compiled as opposed to be hand-written. Of course, the beauty is that you can draw in MXML/FXG and you can see a drawing in the JS side. Pretty cool. > > Tell me your ideas, I am very interested in this part. > > My next few TODOs are to build a spark like skinning system in FlexJS. Basically create FXG skins on the AS3 side and mirror them with SVG based skins on the JS side. Peter has built a small example that will let me play around with event driven, states based skins. I hope to get on this as soon as I get my Git access back. Of course, the core graphics packages needs more love with things like RadialGradients, and more fancy graphics primitives. After that I would like to tackle animation. I haven't given a lot of thought into this, so not sure how easy/hard this is going to be. Thanks, Om > > > Mike > > [1] https://github.com/apache/flex-asjs/tree/develop/fxg2svg [2] https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/as/src/org/apache/flex/core/graphics [3] https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/js/src/org/apache/flex/core/graphics [4] http://people.apache.org/~bigosmallm/flexjs/drawing/flash/ [5] http://people.apache.org/~bigosmallm/flexjs/drawing/html5/ [6] http://people.apache.org/~pent/chartswf/ [7] http://people.apache.org/~pent/chartjs/ [8] https://cwiki.apache.org/confluence/display/FLEX/FlexJS+Charts > > > See this is my problem, Randori was a straight cross compile with shims > and > > worked awesome. So all my questions to you are like me "unlearning" what > I > > spent 6+ months working on in that project. > > > > The compiler's emitter just puked out js and we locked in SWCs in the > apps > > that used js API surfaces. > > > > Although, the one thing as you know was Mike disagreed with FlexJS's view > > in ActionScript because he said HTML/CSS designers should just do what > they > > do and design in HTML/CSS. > > > > I disagree fundamentally with this idea. For one, HTML/CSS is a terrible > terrible paradigm. No designer is happy with the way things work today. I > would rather provide a better way of doing the visuals via MXML+FXG (like > we do in Flex's spark skins) and cross compile them over to JS + SVG + > Canvas as needed. > > Even the HTML/JS world is waking up to this idea. This presentation [1] > does a great job of explaining why SVG is better than CSS for interfaces > building. FlexJS is in a great position to provide this out of the box to > developers. > > Thanks, > Om > > [1] http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/ >
