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).
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
>>> >>> >> >>>> >> >>
>>> >>> >> >>>> >>
>>> >>> >> >>>> >>
>>> >>> >> >>>>
>>> >>> >> >>>>
>>> >>> >> >>>
>>> >>> >> >
>>> >>> >>
>>> >>> >>
>>> >>>
>>> >>>
>>> >>
>>>
>>>
>
