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/src >> >>/ >> >> >> >org/apache/flex/core/graphics >> >> >> >> >> >> >> >> >> >
