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.
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_data
>>> =
>>> 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
>>> >> >>>> >> >>
>>> >> >>>> >>
>>> >> >>>> >>
>>> >> >>>>
>>> >> >>>>
>>> >> >>>
>>> >> >
>>> >>
>>> >>
>>>
>>>
>>
