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 >
