Hi Carlos, What I added is intended mainly useful for emulation purposes, either for easier migration of code that uses that approach in Flex, or the convenience of a familiar api in certain circumstances. It provides a close approximation of (most of) the swf drawing api, but it may only be transitional support during migration for some people. It is intended for use in code and not at all intended for markup.
It sounds like you want more declarative svg/fxg or degrafa-ish/mxml graphics support. There seems to be support already for svg, when I look at support between Basic and Graphics, but I did not try to use those classes yet myself. mxml graphics (and degrafa) was built on top of the flash drawing api. I guess this emulation could be used to support that type of declarative graphics in the same way. But it probably would be more performant and compact to go direct to svg for a lot of that stuff, and maybe we already have some classes for that I think, looking in the other parts of the Basic and Graphics library (but, like I said, I did not use these yet). As an example: for the original swf graphics approach, to change the fill color on one of a set of rendered shapes in a declarative graphics tree represented by a single display object requires clear() and then re-render of all unchanged and changed definitions in the graphics data - in the emulation code it would empty the svg that is used for 'rendering' and then recreate it all with the small change. For 'direct-to-svg', it may only need to change the fill color on a corresponding svg native declarative shape or path, which then leaves the rest of the work up to the browser. On Tue, Jan 28, 2020 at 10:00 PM Carlos Rovira <[email protected]> wrote: > Hi again :), > > I still didn't see the code, but was imagining how I'd like to use this > feature. > > Some thoughts: > > 1.- Could be possible to have it as a bead for UIBase components a side of > the UIGraphicBase that could still be convenient for some cases? > > <j:Button> > <j:beads> > <js:MyGraphics> <-- This could be a custom bead with the graphics > code and the drawings can be created in a element created by a base bead > (Maybe IGraphicsBead? and a GraphicsBead) > </j:beads> > </j:Button> > > 2.- Could be possible even declare graphics instructions in MXML? > Inside a js:GraphicsBead tag add things like: > > <js:BeginFill color=""/> > <js:DrawRectangle x="0" y="0" w="100" h="100"/> > <js:EndFill/> > > (don't know right now if this could not be optimal, or maybe will require > compiler optimization to remove all the extra code and translate to simple > SWF/ SVG instructions) > > I thinking looking at the code of your example will help to imagine how all > this could be modeled/applied > > thanks > > Carlos > > > > > El mar., 28 ene. 2020 a las 9:44, Carlos Rovira (<[email protected] > >) > escribió: > > > Hi Greg, > > > > very cool! :) > > Hope to play with it very soon :) > > > > Do you plan to add your "graphics browser example" to examples? > > > > Thanks for working on this! :) > > > > Carlos > > > > El mar., 28 ene. 2020 a las 3:28, Greg Dove (<[email protected]>) > > escribió: > > > >> FYI, I just pushed the WIP on that. > >> > >> to use it in code, there is a UIGraphicsBase target. > >> I'm still not happy with that, so it could change over time. At the > moment > >> the svg 'child' in javascript that is used as the 'rendered output' > >> participates in the child element count for that class. Ideally it > should > >> not do that and should always be behind the children. Obviously there > are > >> different ways to make that work including adding a separate 'children' > >> div > >> container, but I wanted to see if there was a way to keep the native > >> implementation as siblings but avoid the '0' indexed svg element from > >> showing up in the normal api for child elements. > >> > >> Anyhow, a simple way to start working with this is as follows: > >> > >> Assuming you have the following in mxml; > >> > >> <js:UIGraphicsBase localId="jsGraphicsTarget" x="100" y="100"/> > >> > >> then you could do the following somewhere inside a script block: > >> (assuming: import org.apache.royale.display.Graphics; ) > >> > >> var graphics:Graphics = Graphics.getInstanceFor(jsGraphicsTarget); > >> {now use 'graphics' similar to how you would for swf here} > >> > >> > >> On Tue, Jan 21, 2020 at 8:18 AM Greg Dove <[email protected]> wrote: > >> > >> > Thanks for checking that, Carlos. I think it should be quick to add > this > >> > to Royale after I am back from vacation. > >> > > >> > > >> > > >> > On Mon, 20 Jan 2020, 01:21 Carlos Rovira, <[email protected]> > >> wrote: > >> > > >> >> Hi Greg, > >> >> > >> >> awesome work! Hope you can get ANT working soon. Although I think is > >> not > >> >> required and you can get to that at a later time when you have the > >> time. I > >> >> think the most important thing is not break maven/ant builds and not > >> >> affect > >> >> current code. Saving that, I think is safe to commit the work, and > >> then go > >> >> incremental from that point. I use to work in that way. If something > >> can > >> >> break build or running code, so it can be ensure integrity in one > >> commit, > >> >> then is better to work in a branch and merge as soon as you get the > >> safe > >> >> state. > >> >> > >> >> Thanks for working on that. it will make Royale even more > interesting. > >> I > >> >> think it could be great to use in Jewel for some graphic improvements > >> :) > >> >> > >> >> Looking at the example, I went through all and see all working good > or > >> >> with > >> >> the issues already mentioned in the text part (Mitter, Bitmap repeat > >> >> Error,...). Is curious to see that lines and curves seems to render > >> better > >> >> now in browsers than in Flash Player where still lacks of some weird > >> >> representations when going from rect to curve. > >> >> > >> >> We'll be showing this as soon as you commit to develop in social > >> networks. > >> >> I think this can be of interest for many people out there that can > see > >> >> Royale reaching new and important capabilities. > >> >> > >> >> Congrats for what you have achieved here!! Is awesome! :) > >> >> > >> >> > >> >> > >> >> El dom., 19 ene. 2020 a las 4:01, Greg Dove (<[email protected]>) > >> >> escribió: > >> >> > >> >> > Just quickly, to add to the list at the bottom of the last > email.... > >> >> > another thing you can do is download the rendered svg. > >> >> > It should open in Inkscape or Illustrator. I have been mainly using > >> >> > Inkscape to check that, I think it is more accurate in terms of > >> >> conforming > >> >> > with svg spec. > >> >> > > >> >> > > >> >> > On Sun, Jan 19, 2020 at 3:41 PM Greg Dove <[email protected]> > >> wrote: > >> >> > > >> >> > > > >> >> > > Just a quick update on where I am at with the above. > >> >> > > I was hoping to get the the current code for this in before I go > on > >> >> > > vacation for the next week, but I won't be able to do that (I > need > >> to > >> >> > work > >> >> > > through the build side of things, I have only got maven working > so > >> >> far). > >> >> > > > >> >> > > I have been focused recently on BitmapData support and have what > I > >> >> think > >> >> > > is an adequate starting point for this. > >> >> > > it is really only supporting setPixel, setPixel32, fillRect, > lock, > >> >> > unlock, > >> >> > > dispose. I did add a couple of other methods, but have not really > >> >> started > >> >> > > to test those yet. > >> >> > > > >> >> > > If you are interested you can test this and let me know of any > >> issues > >> >> you > >> >> > > see. I have a series of test suites in a live testing app I have > >> been > >> >> > using. > >> >> > > (This is really meant for desktop use, but does actually show > >> >> something > >> >> > on > >> >> > > a large screen tablet). > >> >> > > > >> >> > > Here is a direct link into one of the bitmap based tests: > >> >> > > > >> >> > > >> >> > >> > http://interactionscript.com/royale/swf-graphics/index.html?defaultTest=4,1 > >> >> > > See instructions at the end of this email if you want more info > >> about > >> >> > what > >> >> > > you can do. > >> >> > > > >> >> > > This is working with beginBitmapFill, and lineBitmapStyle. Smooth > >> vs. > >> >> > > non-smooth works on quite a few browsers, but not all browsers > >> seem to > >> >> > > support the non-smoothing (i.e. 'non-alias' or 'crisp' scaling) > >> >> option. > >> >> > > Repeat vs. non-repeat needs more work to get it to match because > of > >> >> the > >> >> > > way that patterns work in svg vs. how this works in flash. > >> >> > > I hope it will be possible using a feConvolveMatrix filter and a > >> >> > > 'duplicate' option for 'edgeMode', but I only started looking > into > >> >> that > >> >> > > today and need to stop for now. > >> >> > > > >> >> > > Browsers: So far I think the most problematic browser seems to be > >> >> desktop > >> >> > > Safari, although IE11 is not great for some gradients. > >> >> > > Things seem to work ok also on mobile tablets I tested on (old > iPad > >> >> and a > >> >> > > 6 year old Samsung Tablet with Chrome 59.x). > >> >> > > > >> >> > > > >> >> > > What can you do with the testing app? > >> >> > > It's really only to verify what works and what doesn't across > >> >> browsers. > >> >> > > But it would be great - if you have some time to play with it - > if > >> >> you > >> >> > > could check to see if there are any glaring issues that I have > not > >> yet > >> >> > > encountered, and let me know. > >> >> > > Here are some things you can do: > >> >> > > 1. You can look at all the tests and compare them visually > >> >> side-by-side > >> >> > > between html5 and Flash. > >> >> > > 2. if you see bitmapData referenced as a variable in the code > >> display > >> >> on > >> >> > > the main screen, you can do things with it. For example, in the > >> link > >> >> > above > >> >> > > it shows 'bitmapData0' being referenced as a var. In that case if > >> you > >> >> > typed > >> >> > > 'bitmapData0.dispose()' in the javascript console, it will run > that > >> >> code > >> >> > in > >> >> > > both javascript and flash, you will see the drawn content that > used > >> >> that > >> >> > > bitmapdata as a fill or stroke suddenly 'unpaint' itself > visually. > >> You > >> >> > > could also use fillRect, and setPixel etc to run that code in > both > >> >> > > javascript and flash. Note that BitmapData api is not yet fleshed > >> out > >> >> > very > >> >> > > much at all. > >> >> > > 3. You can (at least on Chome and some other browsers) send the > >> >> currently > >> >> > > executed code to the javascript console. You can then copy, > paste, > >> and > >> >> > > change some values before pressing enter to execute the same code > >> with > >> >> > > different settings. It will then run that code in both javascript > >> and > >> >> > > flash. > >> >> > > 3. You can open the javascript console and do a bunch of > arbitrary > >> >> stuff. > >> >> > > When you are doing that, simply imagine you already have imports > >> for > >> >> > > Matrix, BitmapData, Rectangle, and that you can simple type > >> >> > > 'graphics.{myGraphicsMethodHere}' for the target graphics > context. > >> >> > > > >> >> > > >> >> > >> >> > >> >> -- > >> >> Carlos Rovira > >> >> http://about.me/carlosrovira > >> >> > >> > > >> > > > > > > -- > > Carlos Rovira > > http://about.me/carlosrovira > > > > > > -- > Carlos Rovira > http://about.me/carlosrovira >
