Sorry, but I wrote that backwards. First you draw the outside rect and then the inside one…
On Sep 1, 2013, at 2:39 PM, Harbs wrote: > The drawing is not very difficult. You'd do something like this: > > //given four points for your inside rectangle and assuming that your outside > one is the full width and height of the object > g.clear(); > g.beginFill(0x6600066,0.5);// make it whatever color you want... > g.moveTo(p1.x,p1.y) > g.lineTo(p2.x,p2.y); > g.lineTo(p3.x,p3.y); > g.lineTo(p4.x,p4.y); > g.lineTo(p1.x,p1.y); > // draw your outside rect > g.drawRect(0,0,width,height); > g.endFill(); > > On Sep 1, 2013, at 2:34 PM, Harbs wrote: > >> Do you mean something like the image cropping mechanism here? >> https://printui.com/web-to-print-demo-step-1.php >> >> It works with a rectangle mask with a hole punched out of it. It's redrawn >> every time updateDisplayList is called. As you can see, performance is fine… >> >> Harbs >> >> On Sep 1, 2013, at 1:20 AM, Ben Smeets wrote: >> >>> >>> >>> I know Maurice, I think the principle you showed me is indeed the only >>> way to go. Will try and apply some updateDisplayList in combination with >>> some Rectangle calculations (join/union/intersect/etc.) to see if I can >>> get it working while keeping it performant. Maybe it's less hard then I >>> think. >>> >>> The custom shaders were a no-go like you said. Did a quick test but the >>> performance was way off. Too bad. >>> >>> Cheers, Ben >>> >>> Maurice Amsellem schreef op 2013-08-31 22:43: >>> >>>> Ben, the code I sent you was simplified on purpose to help understanding. >>>> Of course you could create a "MaskableBitmap" component that would embed >>>> the masking rect. >>>> >>>> Moreover, masking is actually also a blending technique, using binary AND >>>> operator on two sources. >>>> >>>> Also, if you say that the colorizing could apply to a potentially huge >>>> number of images, I would suggest not to use custom shaders, as they will >>>> never be as fast as native FlashPlayer (blendmode or masking) >>>> >>>> Maybe there is some kind of magical combination of blendmodes that could >>>> do the same, but I can't help you on that. Let me know if you find >>>> something. >>>> >>>> Regards, >>>> >>>> Maurice >>>> >>>> -----Message d'origine----- >>>> De : Ben Smeets [mailto:[email protected]] >>>> Envoyé : samedi 31 août 2013 22:11 >>>> À : [email protected] >>>> Objet : Re: Limit Blendmode to 1 layer >>>> >>>> Thanks a lot Maurice, appreciate the help. I see what you mean, and >>>> although it could work all right, it would mean a lot of manual >>>> calculations. Doable, but I was hoping for something using blendmodes. The >>>> extra challenge I may not have mentioned before, is that it's not just 1 >>>> image that is placed, but theoretically unlimited. So that would mean >>>> creating the rects for each image separately. Doable though, so I'm >>>> keeping it in mind. Thanks! >>>> >>>> Ben >>>> >>>> On 31 aug. 2013, at 17:52, Maurice Amsellem <[email protected]> >>>> wrote: >>>> Hi Ben, Back from vacation, I couldn't resist trying "for real" the tips I >>>> sent you. So here is a sample tested app that does what you need, in pure >>>> mxml: The file "Koala.jpg" is a sample 200x200 jpeg. The image is not >>>> draggable of course, but it's correctly masked (0.3 red colorized) outside >>>> of the central white area. Try it and let me know. <?xml version="1.0"?> >>>> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009 [1]" >>>> xmlns:s="library://ns.adobe.com/flex/spark" backgroundColor="gray" > >>>> <s:Rect id="areaRect" left="100" top="100" right="100" bottom="100"> >>>> <s:fill> <s:SolidColor color="white" alpha="1"/> </s:fill> </s:Rect> >>>> <s:Group id="offMaskGrp" left="0" top="0" bottom="0" right="0"> <s:Rect >>>> id="leftStrip" left="0" top="0" bottom="0" width="100"> <s:fill> >>>> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect id="topStrip" >>>> left="100" top="0" right="100" height="100"> <s:fill> <s:SolidColor >>>> alpha="0"/> </s:fill> </s:Rect> <s:Rect id="rightStrip" top="0" bottom="0" >>>> right= >>> "0" >>> width="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect >>> id="bottomStrip" left="100" bottom="0" right="100" height="100"> <s:fill> >>> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> </s:Group> <s:Group >>> id="draggable" left="50" top="50"> <s:BitmapImage >>> source="@Embed('/embedded/Koala.jpg')" /> <s:Rect id="offRect" left="0" >>> top="0" right="0" bottom="0" mask="{offMaskGrp}"> <s:fill> <s:SolidColor >>> color="red" alpha="0.3"/> </s:fill> </s:Rect> </s:Group> </s:Application> >>> Regards, Maurice -----Message d'origine----- De : Ben Smeets >>> [mailto:[email protected]] Envoyé : mardi 27 août 2013 09:30 À : >>> [email protected] Objet : Re: Limit Blendmode to 1 layer Tnx Maurice, >>> Will try to come up with something working using your tips. If I do, I'll >>> let you know. @Alex: I tried the Pbj shader as well, but it completely >>> kills performance :( (as in, macbook lifting off into space with it's fan). >>> Ben On 27 aug. 2013, at 09:15, Maurice Amsellem >>> <[email protected]> wrote >>> : Option >>> 1) is not such complex math. You can use globalTolLocal and localToGlobal >>> to help for conversions. Option2) you can get both red and alpha, because >>> the hole only acts as a mask, and it´s the overlay rect that has the red >>> fill with alpha. I am in vacation, without my pc, so i can't send you any >>> code that i have tested until next week... Regards Maurice >>> ________________________________________ De : Ben Smeets [[email protected]] >>> Envoyé : lundi 26 août 2013 23:08 À : [email protected] Objet : Re: >>> Limit Blendmode to 1 layer Tnx Maurice, Option 1 is something I thought >>> about. Doable, but complex math. It's what triggered me to find help for a >>> different approach though. Option 2 is the road I'm at now. I have the >>> hole. The challenge is, that I would like the parts outside the "shape >>> layer" to be red instead of alpha. So masking (not sure) is not something >>> that'll work. That's how I got to the blendmodes. E.g. making the layer on >>> top (with the hole inside) red and blended. The >>> only >>> thing I'm still left with, is that that top layer will also colorize >>> everything below the image (the thing I only need to be colorized). Either >>> way what we come up with, It already helpes knowing that my current >>> approach is not entirely crazy, tnx :) Ben On 26 aug. 2013, at 22:03, >>> Maurice Amsellem <[email protected]> wrote: Ok, i think i >>> understood: the part of the dragged image that gets off the square dragging >>> area needs to be colorized. Assuming my understanding is correct, I would >>> do it either of two ways: 1) programmatic While the image is dragged >>> around, determine the area that is off bounds and draw a semi-transparent >>> rectangle ( in updateDisplayList) in. That area 2) mxml Add an overlay rect >>> the size and position of the dragged image, with alpha fill ( put them in >>> the same s:group) Create an area that corresponds to the off-bounds area, >>> ie the background rectangle with a hole corresponding to the square white >>> rectangle, and use it as a mask ( mask property) >>> to the >>> overlay rectangle. That way , the overlay rectangle will be drawn only >>> where the mask is ON. However, perfromance may be impacted when using large >>> masks, so i definitely prefer the programmatic way. Hope this helps Maurice >>> ________________________________________ De : Ben Smeets [[email protected]] >>> Envoyé : lundi 26 août 2013 20:30 À : [email protected] Objet : Re: >>> Limit Blendmode to 1 layer Sure, I'll try to explain it :) This is what I >>> currently have: - Top layer (blendMode=x) - Draggable object layer (image) >>> - Shape layer (square white rectangle) - Background layer (plain gray) The >>> Top layer is draggable. The goal is to make every part of Draggable layer >>> which is dragged outside of the shape layer below it, colorized (or >>> something visual, while retaining a bit of the visual aspect, which is why >>> I got to overlaying a blended layer.). Most issues have been tackled. Only >>> thing left now is that by applying a blendMode, the gray background get's >>> part of that blend effect ( >>> color) >>> as well. So I through the trick would be to limit the blendmode to only the >>> Dragable Object Layer. Don't mean to spam the list, if this is not exactly >>> Flex related. Any tips appreciated. Ben On 26 aug. 2013, at 19:29, Maurice >>> Amsellem <[email protected]> wrote: For me, colorTrasform applies >>> to the whole layer, no masking is possible. Maybe if you can describe in >>> more detail what you are trying to do, someeone can help... Maurice >>> ________________________________________ De : Ben Smeets [[email protected]] >>> Envoyé : lundi 26 août 2013 19:23 À : [email protected] Objet : Re: >>> Limit Blendmode to 1 layer Didn't think of that one, nice. Extra challenge >>> though, is that i can't transform the entire layer. Just the part that the >>> top layer is over (or is that possible with colortransform as well)? Op 26 >>> aug. 2013 om 17:35 heeft Maurice Amsellem <[email protected]> het >>> volgende geschreven: If the purpose of the blending layer is to apply an >>> coloring / lighting eff >>> ect to >>> the layer below, they applying a color transform to the layer below instead >>> (colorTransform property) could be what you need. Maurice >>> ________________________________________ De : Ben Smeets [[email protected]] >>> Envoyé : lundi 26 août 2013 15:58 À : [email protected] Objet : Limit >>> Blendmode to 1 layer Hi, Anybody know if it is possible to limit the effect >>> of a Blended layer to only the layer below it (e.g.). My app has a dark >>> background, the top layer which is blending is now blending over all >>> layers, including the background. I am trying to let it blend over 1 >>> specific layer below it without affecting anything else. Tnx, Ben >>> >>> >>> >>> Links: >>> ------ >>> [1] http://ns.adobe.com/mxml/2009 >> >
