More details emerged: On the JS side, I had created ChartDataGroup to hold the chart graphics. Since this was going to be SVG, I had ChartDataGroup create an SVG element. All of the itemRenderers I created simply added SVG graphics to this <svg> element. Switching to Om's core/graphics library caused a problem as it was trying to add an <svg> to an <svg>. Once I changed ChartDataGroup to use <div>, I began seeing the chart elements appearing.
I have some other things to sort out, but it is looking good. Peter Ent Adobe Systems On 9/10/14 12:51 PM, "Peter Ent" <p...@adobe.com> wrote: >I have the latest code; I didn't install it into my Apache FlexJS >deployment. That last step always gets me. > >I did more research on Path and discovered that the presence of the Z is >making the path closed (I thought a path string MUST end with a Z), so I >believe I can proceed with converting the chart package over to >core/graphics. > >Thanks, Om, for your help and patience. > >--peter > >On 9/10/14 10:45 AM, "OmPrakash Muppirala" <bigosma...@gmail.com> wrote: > >>On Sep 10, 2014 7:07 AM, "Peter Ent" <p...@adobe.com> wrote: >>> >>> I made a small modification to FlexJSTest_SVG: >>> >>> >>> var path2:Path = new Path(); >>> fill.color = 0x00FF00; >>> fill.alpha = 0.5; >>> // path2.fill = fill; >>> stroke.color = 0xFF00FF; >>> stroke.weight = 3; >>> path2.stroke = stroke; >>> path2.drawPath(250,500,"M150 0 L75 200 >>L225 200 Z"); >>> this.addElement(path2); >>> >>> >>> >>> I removed the fill for the Path. This should have drawn 2 lines >>>starting >>> at (150,0) with a line to (75,200) and another to (225,200). Which it >>>did. >>> But it also closed the figure by drawing a third line from (225,200) >>>back >>> to (150,0). >> >>That is so weird. It did not do that when I tested it. Will try it out >>again in some time and see what's going on. >> >>> >>> For the LineChart, the first and last points cannot be closed. >>> >>> Thanks, >>> Peter Ent >>> Adobe Systems >>> >>> On 9/10/14 9:26 AM, "Peter Ent" <p...@adobe.com> wrote: >>> >>> >I ran FlexJSTest_SVG without any issues from Flash Builder. I will >>>look >>to >>> >see how each of these graphics elements are being used. >>> > >>> >Thanks, >>> >Peter Ent >>> >Adobe Systems >>> > >>> >On 9/9/14 8:47 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> wrote: >>> > >>> >>On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <p...@adobe.com> wrote: >>> >> >>> >>> I tried that and it did not work (because the fill and stroke were >>>not >>> >>> set), so I changed my itemRenderer to create the Rect at the point >>>of >>> >>>use: >>> >>> >>> >>> protected function drawBar():void >>> >>> { >>> >>> if (this.width > 0 && this.height > 0) >>> >>> { >>> >>> if (filledRect == null) filledRect = new Rect(); >>> >>> var solidColor:SolidColor = new SolidColor(); >>> >>> solidColor.color = fillColor; >>> >>> var solidStroke:SolidColorStroke = new SolidColorStroke(); >>> >>> solidStroke.color = fillColor; >>> >>> solidStroke.weight = 1; >>> >>> filledRect.fill = solidColor; >>> >>> filledRect.stroke = solidStroke; >>> >>> filledRect.drawRect(0,0,this.width,this.height); >>> >>> >>> >>> if (needsAdd) { >>> >>> addElement(filledRect); >>> >>> needsAdd = false; >>> >>> } >>> >>> } >>> >>> } >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> That's the AS code, but the x-compiled JS code is identical (except >>for >>> >>> all of the Language.as things Falcon adds). I'm getting the same >>> >>>exception >>> >>> when the filledRect element is added. I stepped through using >>>Firebug >>> >>>and >>> >>> all of the code is being executed, so the Rect's fill and stroke >>>are >>> >>>now >>> >>> set and the width and height of the itemRenderer have non-zero >>>values. >>> >>>So >>> >>> this should draw a filled rectangle. >>> >>> >>> >> >>> >>It's possible that I have not checked in something. Are you able to >>> >>compile and run the examples\FlexJSTest_SVG without any issues? >>> >> >>> >>Perhaps you can check in your code so I can see what's happening? >>> >> >>> >>Thanks, >>> >>Om >>> >> >>> >>Thanks, >>> >>Om >>> >> >>> >> >>> >>> >>> >>> Peter Ent >>> >>> Adobe Systems >>> >>> >>> >>> >>> >>> >>> >>> On 9/9/14 4:53 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> >>>wrote: >>> >>> >>> >>> >Ah, I see what's happening. My code expects the drawXXX() >>>[drawRect, >>> >>> >drawPath, etc.] to be called before adding it as an element to the >>> >>>parent. >>> >>> > >>> >>> >Try switching >>> >>> > >>> >>> >this.filledRect = new org.apache.flex.core.graphics.Rect(); >>> >>> >this.addElement(this.filledRect); >>> >>> > >>> >>> >to >>> >>> > >>> >>> >this.filledRect = new org.apache.flex.core.graphics.Rect(); >>> >>> >this.filledRect.drawRect(x,y,width,height); >>> >>> >this.addElement(this.filledRect); >>> >>> > >>> >>> >I can change how this works, but I don't see an invalidation >>mechanism >>> >>> >that >>> >>> >I can use. How do you suggest we approach this? >>> >>> > >>> >>> >Thanks, >>> >>> >Om >>> >>> > >>> >>> >On Tue, Sep 9, 2014 at 1:40 PM, OmPrakash Muppirala >>> >>><bigosma...@gmail.com >>> >>> > >>> >>> >wrote: >>> >>> > >>> >>> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <p...@adobe.com> >>>wrote: >>> >>> >> >>> >>> >>> I created a temporary item renderer to see how the x-compile >>>would >>> >>> >>>work. >>> >>> >>> Here is the code in my temporary item renderer that creates the >>> >>>Rect: >>> >>> >>> >>> >>> >>> >>> >>> >>> >>>>>>>>org.apache.flex.charts.supportClasses.TempBoxRenderer.prototype.set >>>>>>>>_ >>>>>>>>d >>> >>>>>>a >>> >>>>>>ta >>> >>> >>> = >>> >>> >>> function(value) { >>> >>> >>> >>> >>>org.apache.flex.charts.supportClasses.TempBoxRenderer.base(this, >>> >>> >>> 'set_data', value); >>> >>> >>> if (this.filledRect == null) { >>> >>> >>> this.filledRect = new >>org.apache.flex.core.graphics.Rect(); >>> >>> >>> this.addElement(this.filledRect); >>> >>> >>> } >>> >>> >>> }; >>> >>> >>> >>> >>> >>> >>> >>> >>> this.addElement() is called which leads to the addedToParent >>> >>>function >>> >>> >>> where the crash happens. I see that GraphicShape.js doesn't >>extends >>> >>> >>> UIBase.js, which it probably should, given how the AS side >>>works. >>> >>> >>> >>> >>> >>> Peter >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >> Are you sure you have the latest code? I remember fixing this >>exact >>> >>> >>issue >>> >>> >> a few commits ago. >>> >>> >> If you can check in the example, it will be easier for me to >>>chase >>> >>>the >>> >>> >> issue down. >>> >>> >> >>> >>> >> I contemplated if I should extend GraphicShape off of a >>>relatively >>> >>>heavy >>> >>> >> UIBase or if I can just implement IUIBase. As a temporary >>> >>>workaround, >>> >>> >>I do >>> >>> >> have an addedToParent() method in GraphicShape, where the >>>element >>> >>>should >>> >>> >> already be on the DOM, so that getBBox() should work. >>> >>> >> >>> >>> >> Have you tried it in any other browser, maybe it is a browser >>> >>>specific >>> >>> >> issue? Are there any other errors in the console? >>> >>> >> >>> >>> >> Thanks, >>> >>> >> Om >>> >>> >> >>> >>> >> >>> >>> >>> >>> >>> >>> On 9/9/14 2:22 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> >>> >>>wrote: >>> >>> >>> >>> >>> >>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <p...@adobe.com> >>>wrote: >>> >>> >>> > >>> >>> >>> >> Have run into a problem on the JS side. Firebox is telling >>>me >>> >>>that >>> >>> >>>in >>> >>> >>> >>this >>> >>> >>> >> code from GraphicShape.js: >>> >>> >>> >> >>> >>> >>> >> >>> >>>org.apache.flex.core.graphics.GraphicShape.prototype.addedToParent = >>> >>> >>> >> function() { >>> >>> >>> >> var bbox = this.element.getBBox(); >>> >>> >>> >> this.resize(this.x_, this.y_, bbox.width + this.x_ * 2, >>> >>> >>>bbox.height + >>> >>> >>> >> this.y_ * 2); >>> >>> >>> >> }; >>> >>> >>> >> >>> >>> >>> > >>> >>> >>> >Peter, >>> >>> >>> > >>> >>> >>> >Can you please attach the html code for the svg element that >>>is >>> >>> >>>throwing >>> >>> >>> >an >>> >>> >>> >error? I will try to repro it on my side. >>> >>> >>> >Did you try Chrome or other browsers? >>> >>> >>> > >>> >>> >>> >Thanks, >>> >>> >>> >Om >>> >>> >>> > >>> >>> >>> > >>> >>> >>> >> >>> >>> >>> >> >>> >>> >>> >> this.element.getBBox() is returning undefined. I know that >>> >>> >>>this.element >>> >>> >>> >>is >>> >>> >>> >> set with an SVG element. >>> >>> >>> >> >>> >>> >>> >> I'm using Firefox 31.0 on Mac OS X. >>> >>> >>> >> >>> >>> >>> >> Peter Ent >>> >>> >>> >> Adobe Systems >>> >>> >>> >> >>> >>> >>> >> On 9/9/14 10:37 AM, "Peter Ent" <p...@adobe.com> wrote: >>> >>> >>> >> >>> >>> >>> >> >The update to handle 'A' and 'a' works great! Thanks. >>> >>> >>> >> > >>> >>> >>> >> >Peter Ent >>> >>> >>> >> >Adobe Systems >>> >>> >>> >> > >>> >>> >>> >> >On 9/9/14 3:42 AM, "OmPrakash Muppirala" >>><bigosma...@gmail.com >>> >>> >>> >>> wrote: >>> >>> >>> >> > >>> >>> >>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala >>> >>> >>> >> >><bigosma...@gmail.com> >>> >>> >>> >> >>wrote: >>> >>> >>> >> >> >>> >>> >>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent >>><p...@adobe.com> >>> >>> >>>wrote: >>> >>> >>> >> >>> >>> >>> >>> >> >>>> I haven't tried the JS side - this is all Flash. In >>>SVG, >>> >>>the >>> >>> >>>fill >>> >>> >>> >> >>>>takes >>> >>> >>> >> >>>> care of closing the path; I'm not using any line or >>border. >>> >>> >>> >> >>>> >>> >>> >>> >> >>>> >>> >>> >>> >> >>> Yes, it looks like the A parameter is not supported. I >>will >>> >>> >>>work >>> >>> >>> on >>> >>> >>> >> >>> adding this support in Path. I took a big chunk of the >>Path >>> >>> >>> >> >>>implementation >>> >>> >>> >> >>> from spark.primitives.Path. It seems like we do need to >>> >>>tweak >>> >>> >>>it >>> >>> >>> >> >>>further. >>> >>> >>> >> >>> >>> >>> >>> >> >>> >>> >>> >>> >> >>Hi, >>> >>> >>> >> >> >>> >>> >>> >> >>The support for 'a' and 'A' (Elliptical Arc) has been >>>added >>to >>> >>>the >>> >>> >>> >>Flash >>> >>> >>> >> >>implementation of the Path api. I tried with this: >>> >>> >>> >> >> >>> >>> >>> >> >>path.drawPath(250,500,"M 50 50 L 100 50 A 50 50 0 0 0 50 0 >>> >>>Z"); >>> >>> >>> >> >> >>> >>> >>> >> >>and got a nice little wedge drawn on the screen. >>> >>> >>> >> >> >>> >>> >>> >> >>More importantly, the Flash and SVG renderings look >>>(almost) >>> >>>the >>> >>> >>> same. >>> >>> >>> >> >> >>> >>> >>> >> >>As part of this implementation, I borrowed the >>> >>>drawEllipicalArc() >>> >>> >>> >>method >>> >>> >>> >> >>from the svgweb library(flash implementation of SVG) [1] >>>The >>> >>> >>>code is >>> >>> >>> >> >>Apache licensed. I have added the link to the original >>>code >>> >>>as a >>> >>> >>> >>comment >>> >>> >>> >> >>in our code. Do I need to mention this in the NOTICE or >>> >>>LICENSE >>> >>> >>> >>files? >>> >>> >>> >> >> >>> >>> >>> >> >>Peter, if you can do some more testing and let me know >>>your >>> >>> >>>feedback, >>> >>> >>> >> >>that >>> >>> >>> >> >>would be great. >>> >>> >>> >> >> >>> >>> >>> >> >>And looks like this can be added to the current SDK's FXG >>> >>> >>> >>implementation >>> >>> >>> >> >>as >>> >>> >>> >> >>well. I am surprised that we did not hit this issue in >>>the >>> >>> >>>current >>> >>> >>> >>SDK. >>> >>> >>> >> >> >>> >>> >>> >> >>Thanks, >>> >>> >>> >> >>Om >>> >>> >>> >> >> >>> >>> >>> >> >>[1] >>> >>> >>> >> >> >>> >>> >>> >> >>> >>> >>> >> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>https://code.google.com/p/svgweb/source/browse/trunk/src/org/svgweb/util >>> >>> >>>s >>> >>> >>> >> >>/ >>> >>> >>> >> >>EllipticalArc.as?r=1251 >>> >>> >>> >> >> >>> >>> >>> >> >> >>> >>> >>> >> >> >>> >>> >>> >> >> >>> >>> >>> >> >>> I see that mx.charts.chartClasses.GraphicsUtilities has >>>a >>> >>> >>>drawArc() >>> >>> >>> >> >>> method. I will probably end up using that >>>implementation. >>> >>> >>> >> >>> >>> >>> >>> >> >>> >>> >>> >>> >> >>>> Which brings me to the next issue. When drawing a >>>series >>of >>> >>> >>> >>connected >>> >>> >>> >> >>>> lines (for the LineChart), the first and last points >>>are >>> >>> >>>getting >>> >>> >>> >> >>>> connected, which I do not want. My loop to build the >>>path >>> >>>looks >>> >>> >>> >>like >>> >>> >>> >> >>>>this, >>> >>> >>> >> >>>> below. point[0] != point[last] so they should not be >>> >>> >>>connected. I >>> >>> >>> >> >>>>tried >>> >>> >>> >> >>>> "z" and "Z" thinking one meant leave the path closed >>>and >>> >>>one >>> >>> >>> closed >>> >>> >>> >> >>>>the >>> >>> >>> >> >>>> path, but that didn't make any difference. >>> >>> >>> >> >>>> >>> >>> >>> >> >>>> var pathString:String = >>""; >>> >>> >>> >> >>>> >>> >>> >>> >> >>>> for (var i:int=0; i < >>> >>> >>> >>points.length; >>> >>> >>> >> >>>>i++) >>> >>> >>> >> >>>> { >>> >>> >>> >> >>>> var point:Object = >>> >>> >>>points[i]; >>> >>> >>> >> >>>> if (i == 0) >>> >>>pathString >>> >>> >>>+= >>> >>> >>> >>"M >>> >>> >>> >> >>>> "+point.x+" "+point.y+" "; >>> >>> >>> >> >>>> else pathString >>>+= >>> >>>"L >>> >>> >>> >> >>>>"+point.x+" >>> >>> >>> >> >>>> "+point.y+" "; >>> >>> >>> >> >>>> } >>> >>> >>> >> >>>> >>> >>> >>> >> >>>> pathString += "Z"; >>> >>> >>> >> >>>> >>> >>> >>> >> >>>> path.drawPath(0, 0, >>> >>> >>>pathString); >>> >>> >>> >> >>>> >>> >>> >>> >> >>>> >>> >>> >>> >> >>> >>> >>> >>> >> >>> That is weird. I will play with it and see why that is >>> >>> >>>happening. >>> >>> >>> >> >>> >>> >>> >>> >> >> >>> >>> >>> >> >>> Is moveTo() and lineTo() a better approach? >>> >>> >>> >> >>> >>> >>> >>> >> >>> In psedocode, the lines would be drawn like this: >>> >>> >>> >> >>> >>> >>> >>> >> >>> graphics.moveTo(points[0].x, points[0].y); >>> >>> >>> >> >>> for (var i:int=0; i < points.length; i++) { >>> >>> >>> >> >>> if(i+1 < points.length) >>> >>> >>> >> >>> { >>> >>> >>> >> >>> graphics.lineTo(points[i+1].x, points[i+1].y); >>> >>> >>> >> >>> } >>> >>> >>> >> >>> } >>> >>> >>> >> >>> >>> >>> >>> >> >>> In any case, I have the Line class in my list of Graphic >>> >>> >>>elements >>> >>> >>> >>to >>> >>> >>> >> >>> implement. >>> >>> >>> >> >>> >>> >>> >>> >> >>> >>> >>> >>> >> >> >>> >>> >>> >> >> >>> >>> >>> >> >> >>> >>> >>> >> >>> Thanks, >>> >>> >>> >> >>> Om >>> >>> >>> >> >>> >>> >>> >>> >> >>> >>> >>> >>> >> >>>> >>> >>> >>> >> >>>> Thanks, >>> >>> >>> >> >>>> Peter Ent >>> >>> >>> >> >>>> Adobe Systems >>> >>> >>> >> >>>> >>> >>> >>> >> >>>> On 9/8/14 4:13 PM, "OmPrakash Muppirala" >>> >>><bigosma...@gmail.com >>> >>> > >>> >>> >>> >> wrote: >>> >>> >>> >> >>>> >>> >>> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent >>> >>><p...@adobe.com> >>> >>> >>> wrote: >>> >>> >>> >> >>>> > >>> >>> >>> >> >>>> >> I took care of the gjslint issues. >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> > >>> >>> >>> >> >>>> >Thanks! Hope it was not too much trouble. >>> >>> >>> >> >>>> > >>> >>> >>> >> >>>> > >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> >> Can you supply more information about Path and what >>>is >>> >>>in >>> >>> >>>the >>> >>> >>> >>path >>> >>> >>> >> >>>> >>string? >>> >>> >>> >> >>>> >> I have a path working in SVG to do the wedges for >>>the >>> >>>pie >>> >>> >>> chart, >>> >>> >>> >> >>>>but >>> >>> >>> >> >>>> >>that >>> >>> >>> >> >>>> >> same string isn't working with core.graphics.Path. >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> >> var pathString:String = 'M' + x + ' ' + y + ' L' + >>>x1 + >>> >>>' ' >>> >>> >>>+ >>> >>> >>> >>y1 + >>> >>> >>> >> >>>>' A' >>> >>> >>> >> >>>> >>+ >>> >>> >>> >> >>>> >> radius + ' ' + radius + >>> >>> >>> >> >>>> >> ' 0 0 1 ' + x2 + ' ' >>>+ >>> >>>y2 + >>> >>> >>>' >>> >>> >>> >>z'; >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> >> It doesn't look, to me, like "A" is being >>>recognized. >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> > >>> >>> >>> >> >>>> >The path looks like it is doing the following: >>> >>> >>> >> >>>> >M x y : move to x, y >>> >>> >>> >> >>>> >L x1 y1 : draw line from x,y to x1,y1 >>> >>> >>> >> >>>> >A radius radius : draw an arc with xradius=radius and >>> >>> >>>yradius = >>> >>> >>> >> >>>>radius >>> >>> >>> >> >>>> >(so, a circular arc) >>> >>> >>> >> >>>> >0 0 1 : x-axis rotation=0, large-arc = false, sweep = >>true >>> >>> >>> >> >>>> >x2 y2 : ending point of the arc >>> >>> >>> >> >>>> >z : finish drawing >>> >>> >>> >> >>>> > >>> >>> >>> >> >>>> >BTW, don't you need another line to complete the >>>wedge? >>> >>> >>> >> >>>> > >>> >>> >>> >> >>>> >Is it working fine on the flash side? I will take a >>>look >>> >>> >>>soon. >>> >>> >>> >> >>>> > >>> >>> >>> >> >>>> >Thanks, >>> >>> >>> >> >>>> >Om >>> >>> >>> >> >>>> > >>> >>> >>> >> >>>> > >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> >> Thanks, >>> >>> >>> >> >>>> >> Peter Ent >>> >>> >>> >> >>>> >> Adobe Systems >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> >> On 9/8/14 12:04 PM, "OmPrakash Muppirala" < >>> >>> >>> bigosma...@gmail.com> >>> >>> >>> >> >>>> wrote: >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" >>><p...@adobe.com> >>> >>> wrote: >>> >>> >>> >> >>>> >> >> >>> >>> >>> >> >>>> >> >> I forgot to add that when I build flex-asjs, >>>gjslint >>> >>> >>>finds a >>> >>> >>> >> >>>>number >>> >>> >>> >> >>>> >>of >>> >>> >>> >> >>>> >> >> issues in the new JS graphics code (its usual, >>spaces >>> >>>at >>> >>> >>>the >>> >>> >>> >>end >>> >>> >>> >> >>>>of >>> >>> >>> >> >>>> >> >>lines, >>> >>> >>> >> >>>> >> >> sort of thing). I think I am using version 2.3.10 >>>of >>> >>> >>>gjslint >>> >>> >>> >>but >>> >>> >>> >> >>>>I'm >>> >>> >>> >> >>>> >>not >>> >>> >>> >> >>>> >> >> 100% sure. >>> >>> >>> >> >>>> >> > >>> >>> >>> >> >>>> >> >Yeah, unfortunately there is no gjslint available >>>for >>> >>> >>>Windows. >>> >>> >>> >> I >>> >>> >>> >> >>>> >>guess I >>> >>> >>> >> >>>> >> >will need you Mac folks to help me out with this >>>:-) >>> >>> >>> >> >>>> >> > >>> >>> >>> >> >>>> >> >Thanks, >>> >>> >>> >> >>>> >> >Om >>> >>> >>> >> >>>> >> > >>> >>> >>> >> >>>> >> >> >>> >>> >>> >> >>>> >> >> Peter Ent >>> >>> >>> >> >>>> >> >> Adobe Systems >>> >>> >>> >> >>>> >> >> >>> >>> >>> >> >>>> >> >> On 9/8/14 3:48 AM, "OmPrakash Muppirala" >>> >>> >>> >><bigosma...@gmail.com> >>> >>> >>> >> >>>> >>wrote: >>> >>> >>> >> >>>> >> >> >>> >>> >>> >> >>>> >> >> >FlexJS now supports a basic drawing API (Rect, >>> >>>Ellipse, >>> >>> >>> >>Circle, >>> >>> >>> >> >>>> >>Path, >>> >>> >>> >> >>>> >> >> >SolidColor, SolidColorStroke) Here are the AS3 >>>[1] >>> >>>and >>> >>> >>>JS >>> >>> >>> >>[2] >>> >>> >>> >> >>>> >>versions >>> >>> >>> >> >>>> >> >> > >>> >>> >>> >> >>>> >> >> >So far, the rendering fidelity between the Flash >>and >>> >>> >>> >>SVG/HTML5 >>> >>> >>> >> >>>> >>version >>> >>> >>> >> >>>> >> >>is >>> >>> >>> >> >>>> >> >> >very very close. For sure, there are some >>>pretty >>> >>>major >>> >>> >>> >>things >>> >>> >>> >> >>>>to >>> >>> >>> >> >>>> be >>> >>> >>> >> >>>> >> >> >worked >>> >>> >>> >> >>>> >> >> >out, but generally so far, the results have been >>> >>>very >>> >>> >>> >> >>>>encouraging. >>> >>> >>> >> >>>> >> >> > >>> >>> >>> >> >>>> >> >> >You can see a quick and dirty example here: >>> >>> >>> >> >>>> >> >> >Flash version: >>> >>> >>> >> >>>> >> >> >>> >>> http://people.apache.org/~bigosmallm/flexjs/drawing/flash/ >>> >>> >>> >> >>>> >> >> >HTML5 version: >>> >>> >>> >> >>>> >> >> >>> >>> http://people.apache.org/~bigosmallm/flexjs/drawing/html5/ >>> >>> >>> >> >>>> >> >> > >>> >>> >>> >> >>>> >> >> >HTML5 version has been tested to work fine on >>> >>>Chrome, >>> >>> >>> >>Firefox, >>> >>> >>> >> >>>> IE11, >>> >>> >>> >> >>>> >> >> >Android browser and iPad Safari. >>> >>> >>> >> >>>> >> >> > >>> >>> >>> >> >>>> >> >> >Next up, i will be working on the following >>>items: >>> >>> >>> >> >>>> >> >> >Polygons, Linear gradients, Radial gradients, >>> >>>filters >>> >>> >>>and >>> >>> >>> >>drop >>> >>> >>> >> >>>> >>shadows. >>> >>> >>> >> >>>> >> >> >These should bring us very close to our current >>>FXG >>> >>> >>>based >>> >>> >>> >> >>>>drawing >>> >>> >>> >> >>>> >>APIs. >>> >>> >>> >> >>>> >> >> > >>> >>> >>> >> >>>> >> >> >After that, I plan on programmatically >>>recreating a >>> >>>few >>> >>> >>>FXG >>> >>> >>> >> >>>>based >>> >>> >>> >> >>>> >>skins >>> >>> >>> >> >>>> >> >in >>> >>> >>> >> >>>> >> >> >FlexJS and see how we can apply it skins on UI >>> >>> >>>components. >>> >>> >>> >> >>>> >> >> > >>> >>> >>> >> >>>> >> >> >Feedback welcome! >>> >>> >>> >> >>>> >> >> > >>> >>> >>> >> >>>> >> >> >[1] >>> >>> >>> >> >>>> >> >> > >>> >>> >>> >> >>>> >> > >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> >>> >>> >>> >> >>>> >>> >>> >>> >> >>> >>> >>> >>> >>> >>https://github.com/apache/flex-asjs/tree/develop/frameworks/as/projects >>> >>> >>> >> >>>>/ >>> >>> >>> >> >>>>F >>> >>> >>> >> >>>> >>l >>> >>> >>> >> >>>> >> >> >exJSUI/src/org/apache/flex/core/graphics >>> >>> >>> >> >>>> >> >> >[2] >>> >>> >>> >> >>>> >> >> > >>> >>> >>> >> >>>> >> > >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> >>> >>> >>> >> >>>> >>> >>> >>> >> >>> >>> >>> >>> >>> >>https://github.com/apache/flex-asjs/tree/develop/frameworks/js/FlexJS/s >>> >>> >>> >> >>>>r >>> >>> >>> >> >>>>c >>> >>> >>> >> >>>> >>/ >>> >>> >>> >> >>>> >> >> >org/apache/flex/core/graphics >>> >>> >>> >> >>>> >> >> >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> >> >>> >>> >>> >> >>>> >>> >>> >>> >> >>>> >>> >>> >>> >> >>> >>> >>> >>> >> > >>> >>> >>> >> >>> >>> >>> >> >>> >>> >>> >>> >>> >>> >>> >>> >> >>> >>> >>> >>> >>> > >>> >