Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Custom shape
Started by jdsmedeirosbr Jan 24 2020 03:51 AM

4 replies to this topic
custom shape
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

jdsmedeirosbr

[GLOBAL: userInfoPane.html]
jdsmedeirosbr
  • Enthusiast

  • 94 posts
  • Corona SDK

hello, how can i create custom shapes? like this red rectangle with custom borders?

Attached Files



[TOPIC: post.html]
#2

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,960 posts
  • Corona SDK

This is probably done using masks, with the red bit just being a rounded rectangle that is cut-off by the mask so only the bottom left corner is shown.

 

Unfortunately it's not as easy in Corona as some other frameworks to use the larger image as a mask for the smaller one. You'll need a third image which is just black and white - black where you don't want the image to show and white where you do.

 

However this does mean you don't have to create the food images with rounded corners. It might be setup like this:

 

1) A normal rectangular image, 512 x 512.

2) A smaller rounded white rectangle, coloured red in code, placed to be in the top right with most of it outside the large image. Both images placed in same group.

3) A 512 x 512 mask, with a large white rounded rectangle in the middle and small black border. Mask applied to the group.

 

 

https://docs.coronalabs.com/guide/media/imageMask/index.html


  • sporkfin likes this

[TOPIC: post.html]
#3

jdsmedeirosbr

[GLOBAL: userInfoPane.html]
jdsmedeirosbr
  • Enthusiast

  • 94 posts
  • Corona SDK

So this effect can only be created with images? can't do it in code?

[TOPIC: post.html]
#4

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,960 posts
  • Corona SDK

Technically you could, using Corona's built in rounded rects to generate and save a mask on the fly and then apply it, but to be honest it will be a lot quicker to just create the mask manually. Also, the built-in round shapes in Corona are very pixelated.



[TOPIC: post.html]
#5

jdsmedeirosbr

[GLOBAL: userInfoPane.html]
jdsmedeirosbr
  • Enthusiast

  • 94 posts
  • Corona SDK

Thanks nick_sherman.


[topic_controls]
[/topic_controls]

Also tagged with one or more of these keywords: custom, shape