flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From OmPrakash Muppirala <bigosma...@gmail.com>
Subject Re: [FlexJS] Drawing API
Date Mon, 08 Sep 2014 22:53:17 GMT
On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <pent@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.

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" <bigosmallm@gmail.com> wrote:
>
> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent <pent@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" <bigosmallm@gmail.com> wrote:
> >>
> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pent@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" <bigosmallm@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
> >> >>
> >>
> >>
>
>

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message