Design Challenge -- Round Corner mask on images

Scott Rossi scott at tactilemedia.com
Mon Mar 28 05:15:56 CEST 2016


If you have acceleratedRendering enabled, try disabling it.

Regarding your second screenshot, you're likely getting that result
because you repositioned the graphic within the group.

LC8 might be more sensitive to acceleratedRendering than previous
versions, but enabling the property in general sometimes causes
idiosyncrasies that need to be worked around.  It's possible ink effects
won't work for your situation, so you may need to resort to other methods.

Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design




On 3/27/16, 8:00 PM, "use-livecode on behalf of Sannyasin
Brahmanathaswami" <use-livecode-bounces at lists.runrev.com on behalf of
brahma at hindu.org> wrote:

>Thanks for the re-assurance and, that's a relief, that its a simple
>solution...
>
>Are you working in LC8 dp 16?
>
>BUT: What's happening here is:  I'm getting some serious rendering
>issues. Your stack opens fine and I could see the lovely roundrect grc
>mask... then as soon as I touch anything we get this kind of behavior
>
>http://wiki.hindu.org/screenshots/IDE-rendering-ssues.jpg
>
>If I save the stack the whole effect is lost. Thinking this is a
>temporary rendering issue, I saved, quit and reboot LC
>
>but then we get this:
>
>http://wiki.hindu.org/screenshots/round-corner-after-save.jpg
>
>And the group, inks etc. are all corrupted in the saved stack... at least
>here on my mac.
>
>What version of LC are you working in?
>
>I thought dp16 was stable enough to work in, and I want to pitch in on
>the beta testing so that LC team could get as much feedback on 16 as I
>could provide, but now I have to get real work done, so i think I need to
>step back from this bleeding edge... DP15 was actually pretty stable.
>What are you using?
>
>Can anyone else test this please?  Open Scotts stack in LC8 DP16
>
>go url "http://tactilemedia.com/download/RoundCornerSample.livecode"
>
>then set the selectGroupedControls to True, choose the selection tool and
>move the graphic mask around...does everything stay OK?  If the problem
>can be duplicated elsewhere... I will bug it....
>
>actually I bugged it anyway
>
>http://quality.livecode.com/show_bug.cgi?id=17247
>
>BR
>
>
>
>
>
>On March 27, 2016 at 4:12:58 PM, Scott Rossi
>(scott at tactilemedia.com<mailto:scott at tactilemedia.com>) wrote:
>
>An oval is the same as a roundRect, just with larger radii. The technique
>doesn't "fail" as shown in the demo stack, so yes, you may indeed be
>missing something. Make sure you have the inks applied properly.
>
>
>
>Regards,
>
>Scott Rossi
>Creative Director
>Tactile Media, UX/UI Design
>
>
>
>
>On 3/27/16, 6:52 PM, "use-livecode on behalf of Sannyasin
>Brahmanathaswami" <use-livecode-bounces at lists.runrev.com on behalf of
>brahma at hindu.org> wrote:
>
>>Scott, thanks stack downloaded
>>
>>Fascinating technique.
>>
>>But your example uses an oval... but if I use graphic style "round
>>rectangle" -- the technique fails -- or I am missing something.
>>
>>Can you try it there?
>>
>>tks
>>
>>
>>On March 27, 2016 at 1:42:52 PM, Scott Rossi
>>(scott at tactilemedia.com<mailto:scott at tactilemedia.com>) wrote:
>>
>>One way is using ink effects. In a group with the roundRect graphic
>>layered above the image:
>>blendSrcOver applied to the group
>>blendDstIn applied to the graphic
>>
>>You might want to take a look at the stack provided in this article for
>>ideas:
>>http://tactilemedia.com/blog/2015/11/04/livecode-basics-masking-objects/
>>
>>
>>Regards,
>>
>>Scott Rossi
>>Creative Director
>>Tactile Media, UX/UI Design
>>
>>
>>
>>
>>On 3/27/16, 3:26 PM, "use-livecode on behalf of Sannyasin
>>Brahmanathaswami" <use-livecode-bounces at lists.runrev.com on behalf of
>>brahma at hindu.org> wrote:
>>
>>>Our design team finished a design for a mobile app. The used rounded
>>>corners everywhere.
>>>
>>>see
>>>
>>>http://wiki.hindu.org/screenshots/radius-all-corners.jpg
>>>
>>>Something I wished we had in LC for all controls (groups included) is
>>>corner radius, but is is only available for graphics objects.
>>>
>>>
>>>set the roundRadius of grc "roundRectAngleButton" to pValue
>>>
>>>I'm digging in the forums for info an masks etc... but I'm out of my
>>>depth here.
>>>
>>>I'm thinking this is probably (I hope) not that hard to implement.
>>>
>>>it's obviously easy enough to create a background graphic with round
>>>corners, add a small field on the left site that is transparent, lock
>>>that, put an image on the right side, make this a small group and give
>>>the name of a target and we have a nice cool "button" but how do I get
>>>the image in the right half of the group to take the rounded corners of
>>>the background graphic?
>>>
>>>BR
>>>_______________________________________________
>>>use-livecode mailing list
>>>use-livecode at lists.runrev.com
>>>Please visit this url to subscribe, unsubscribe and manage your
>>>subscription preferences:
>>>http://lists.runrev.com/mailman/listinfo/use-livecode
>>
>>
>>
>>_______________________________________________
>>use-livecode mailing list
>>use-livecode at lists.runrev.com
>>Please visit this url to subscribe, unsubscribe and manage your
>>subscription preferences:
>>http://lists.runrev.com/mailman/listinfo/use-livecode
>>_______________________________________________
>>use-livecode mailing list
>>use-livecode at lists.runrev.com
>>Please visit this url to subscribe, unsubscribe and manage your
>>subscription preferences:
>>http://lists.runrev.com/mailman/listinfo/use-livecode
>
>
>
>_______________________________________________
>use-livecode mailing list
>use-livecode at lists.runrev.com
>Please visit this url to subscribe, unsubscribe and manage your
>subscription preferences:
>http://lists.runrev.com/mailman/listinfo/use-livecode
>_______________________________________________
>use-livecode mailing list
>use-livecode at lists.runrev.com
>Please visit this url to subscribe, unsubscribe and manage your
>subscription preferences:
>http://lists.runrev.com/mailman/listinfo/use-livecode





More information about the use-livecode mailing list