Design Challenge -- Round Corner mask on images

[J. Landman Gay]

Addendum: I forgot to make the background around the image transparent. 
You'd need to do that.

On 3/27/2016 11:25 PM, J. Landman Gay wrote:
> 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