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);
};
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
>>>> >> >>
>>>> >>
>>>> >>
>>>>
>>>>
>>>
>
