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
