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/utils/ >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/sr >>>c >>> >>/ >>> >> >> >org/apache/flex/core/graphics >>> >> >> >>> >> >>> >> >>> >>> >>
