Design Challenge -- Round Corner mask on images

Sannyasin Brahmanathaswami brahma at hindu.org
Sun Mar 27 23:00:32 EDT 2016


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


More information about the use-livecode mailing list