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/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/s
> >>>>r
> >>>>c
> >>>> >>/
> >>>> >> >> >org/apache/flex/core/graphics
> >>>> >> >>
> >>>> >>
> >>>> >>
> >>>>
> >>>>
> >>>
> >
>
>
