Design Challenge -- Round Corner mask on images

[J. Landman Gay]

My method doesn't use a graphic at all. The button itself just uses the 
image as a backpattern.

I'll leave my test stack here for a while:
<https://www.dropbox.com/s/ho56oaaaqjvbe26/RoundRect%20Button%20example.livecode?dl=0>

On 3/27/2016 11:03 PM, Scott Rossi wrote:
> Jacque's backPattern idea is an option purely for masking images as well,
> though you're more limited using that option.  The image and graphic need
> to be the same height, and you need to have "extra" image on the left side
> so you can crop off the rounded corners on the left.
>
> The advantage of that option is you probably won't get any rendering
> artifacts with acceleratedRendering enabled (no ink effects needed).  The
> disadvantage is the image needs to be fit precisely to the masking
> graphic, while in a group with ink effects, you have more flexibility in
> placing/sizing the image.
>
> Regards,
>
> Scott Rossi
> Creative Director
> Tactile Media, UX/UI Design
>
>
>
>
> On 3/27/16, 8:38 PM, "use-livecode on behalf of J. Landman Gay"
> <use-livecode-bounces at lists.runrev.com on behalf of
> jacque at hyperactivesw.com> wrote:
>
>> On 3/27/2016 5:26 PM, Sannyasin Brahmanathaswami wrote:
>>
>>> 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?
>>>
>>
>> I could reproduce it this way:
>>
>> Have your designer create the entire content of the image area,
>> including the beige left-side label area, but without any text. Import
>> the image.
>>
>> Make a button the same dimensions as the image. Set the button
>> properties to:
>>
>> Showborder: false
>> Opaque: true
>> Backpattern: the ID of the image
>> Margins: 4,4,250,4
>> Textsize: 28
>> Label: set it in the msg box or script:
>>     set the label of btn x to "Three" &cr& "Line" &cr& "Label"
>>
>> You can't type in a multi-line label in the inspector, but you can set
>> one via script.
>>
>> This gives you a regular button that you can attach a script to normally.
>>
>> --
>> Jacqueline Landman Gay         |     jacque at hyperactivesw.com
>> HyperActive Software           |     http://www.hyperactivesw.com
>>
>> _______________________________________________
>> 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
>


-- 
Jacqueline Landman Gay         |     jacque at hyperactivesw.com
HyperActive Software           |     http://www.hyperactivesw.com