Thanks Om. It looks much better in my opinion. But to be sure I wasn't imagining things I took screenshots of both and imported them into PS. I then created an animated gif showing both before and after.
I'm going to try and attach it. You'll notice the checkmark in the upper left hand corner looks more refined. In the blue ellipsis you'll see an extra row of antialiasing with the high 16x16 linear setting in the arc from 6' to 9'. And there is more smoothing overall. It's very subtle at normal resolution so you'll probably have to import it into PS to see any difference. Anyway, thanks for checking on this. One thing that we might want to check into is if the browser is setting pixel hinting in which case will cause some differences in the images. I think FP can enable or disable this option but the browser may not. On Wed, Sep 10, 2014 at 5:07 PM, OmPrakash Muppirala <bigosma...@gmail.com> wrote: > On Wed, Sep 10, 2014 at 12:54 PM, jude <flexcapaci...@gmail.com> wrote: > > > FYI according to the article I linked to here [1] it is possible to > > improve the rendering quality of vectors on the stage. I thought the > > article I linked to was a different article posted by Thimbault > > about drawWithQuality(). That means that documentation here [2] appears > to > > be incorrect or out of date. > > > > Om, can you set the stage quality to high 16x16 or high 16x16 linear in > > your Flash example and check for changes? Example code is in the article > > [1]. You may need to set the player version to greater than 15. It may be > > possible to change the quality at runtime. > > > > I made the following changes to make the flash side of things more sharper: > * All strokes have capsStyle = SQUARE and jointStyle = MITER > * Set stage.quality = HIGH_16X16_LINEAR in the top level application. > > Take a look now: > Flash: http://people.apache.org/~bigosmallm/flexjs/drawing/flash/ > HTML5: http://people.apache.org/~bigosmallm/flexjs/drawing/html5/ > > Thanks, > Om > > > > > > [1] http://blog.kaourantin.net/?p=152 > > [2] > > > http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/StageQuality.html > > > > > > On Monday, September 8, 2014, jude <flexcapaci...@gmail.com> wrote: > > > >> Way to go! Looks great. At one point browsers couldn't do graphics at > >> all. > >> > >> One thing I want to note is that the rendering in the browsers is > getting > >> better than that of Flash. I've attached a screen shot. > >> > >> > >> > >> > >> In the graphic (if it came through) Flash is on the left and HTML > >> (Firefox Mac) on the right. > >> In issue 1 the box is blurry. This may be a subpixel rendering issue but > >> if you compare both in a big picture way the Flash version is slightly > more > >> blurry all around. This might be caused by the level of anti-alias the > FP > >> is using. > >> In issue 2 the curve of the ellipsis has less fidelity than the HTML5 > >> version. You can see this when you look at them side by side. You may > not > >> be able to tell but I've seen other examples and it is more noticeable. > >> > >> In fact, at one point, Tinic Uro, one of the FP engineers said they can > >> do higher quality graphics if we do not care about performance (or we > need > >> quality over speed). He wrote about it here, > >> http://blog.kaourantin.net/?p=152 <--read this. This is for the > >> drawWithQuality() method that was added at the time of the post but this > >> does not give us the option to upgrade the rendering of the stage. The > >> drawWithQuality method uses the parameters here, > >> > http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/StageQuality.html > . > >> > >> > >> > >> These include, BEST, HIGH, HIGH_16X16, HIGH_16X16_LINEAR, HIGH_8X8, > >> HIGH_8X8_LINEAR, LOW, and MEDIUM. > >> > >> In the desktop profile of Adobe AIR, quality can be set to > >> StageQuality.BEST or StageQuality.HIGH (and the default value is > >> StageQuality.HIGH). Attempting to set it to another value has no effect > >> (and the property remains unchanged). > >> > >> I'd say we need to be able to set the stage quality to higher values if > >> we can especially if the browsers are starting to provide higher quality > >> rendering than Flash. Sorry to hijack this thread, this response is > really > >> a rally or FYI to be able to inform or convince the FP team that now is > the > >> time to enable higher rendering quality on the stage. > >> > >> > >> On Mon, Sep 8, 2014 at 2: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 <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/FlexJSUI/src/org/apache/flex/core/graphics > >>> [2] > >>> > >>> > https://github.com/apache/flex-asjs/tree/develop/frameworks/js/FlexJS/src/org/apache/flex/core/graphics > >>> > >> > >> >
