Clipping part of an image without a MASK - or how do I

Solar2D Advanced Graphics
#1

Hello,

I have a need to take an image let a user use his finger to circle and area and then clip that part and duplicate it on screen.

Is this possible? If so how would I do this?

Thanks in advance.

Larry

#2

Hi Larry,

Well, you won’t be able to just “cut” a random piece from an image and get it back with full transparency around the new cut part. However, you might be able to fake that effect using snapshots. Your scenario is too specific for me to provide any direct advice, but the “SnapshotEraser” sample project might get you started in the right direction.

Brent

#3

How would I copy / cut a piece of an image and duplicate it on the screen ( what corona method would i use ? )

Thanks

Larry

#4

Hi Larry,

Well, there’s not really like “one method.” And initially, may I ask how you are figuring out if the user “draws” a complete circle or shape around what they’re trying to “cut”?

Brent

#5

Drawing a circle or square would not be hard, just have the have a circle expand our from a center point when a user moves their finger.

( that would be the easiest to start playing with ) then create a mask in that area to copy that part of the image.

i could explain it best with an image but for some reason i cant attach an image to this message.

#6

So it sounds like a standard mask would work for you, just that it needs to be dynamically sized to whatever circle size the player made? How about using a very large mask (white circle with black background) and then use the mask scale properties to adjust the circle after?

Brent

#7

hmm, that may be a good idea. I’ll do a little research and try it,

thanks larry

#8

I think you can do this by creating a dynamic texture (https://docs.coronalabs.com/api/type/TextureResourceCanvas/index.html) so the user touches “draw” into the TextureResourceCanvas. You’d have to be sure to invalidate the texture after each touch.

Then create a CompositePaint where paint1 is the image and paint2 is this dynamic texture.

By setting the effect to composite.multiply, you effectively use paint2 as the mask for paint1. The different is that the built-in mask functionality that Corona supports is more memory efficient, since it’s a single channel texture (rather than a 4 channel texture). And setting the effect can potentially reduce performance by breaking batching as described in the docs. 

But this usually applies to situations with tons of sprites on-screen. In your case, this probably is a non-issue. 

[Edit] One caveat is that you might lose the dynamic texture on Android devices upon a suspend/resume. You’d have to be sure to record the touches so as to be able to reproduce the texture on a resume.

#9

Hi Larry,

Well, you won’t be able to just “cut” a random piece from an image and get it back with full transparency around the new cut part. However, you might be able to fake that effect using snapshots. Your scenario is too specific for me to provide any direct advice, but the “SnapshotEraser” sample project might get you started in the right direction.

Brent

#10

How would I copy / cut a piece of an image and duplicate it on the screen ( what corona method would i use ? )

Thanks

Larry

#11

Hi Larry,

Well, there’s not really like “one method.” And initially, may I ask how you are figuring out if the user “draws” a complete circle or shape around what they’re trying to “cut”?

Brent

#12

Drawing a circle or square would not be hard, just have the have a circle expand our from a center point when a user moves their finger.

( that would be the easiest to start playing with ) then create a mask in that area to copy that part of the image.

i could explain it best with an image but for some reason i cant attach an image to this message.

#13

So it sounds like a standard mask would work for you, just that it needs to be dynamically sized to whatever circle size the player made? How about using a very large mask (white circle with black background) and then use the mask scale properties to adjust the circle after?

Brent

#14

hmm, that may be a good idea. I’ll do a little research and try it,

thanks larry

#15

I think you can do this by creating a dynamic texture (https://docs.coronalabs.com/api/type/TextureResourceCanvas/index.html) so the user touches “draw” into the TextureResourceCanvas. You’d have to be sure to invalidate the texture after each touch.

Then create a CompositePaint where paint1 is the image and paint2 is this dynamic texture.

By setting the effect to composite.multiply, you effectively use paint2 as the mask for paint1. The different is that the built-in mask functionality that Corona supports is more memory efficient, since it’s a single channel texture (rather than a 4 channel texture). And setting the effect can potentially reduce performance by breaking batching as described in the docs. 

But this usually applies to situations with tons of sprites on-screen. In your case, this probably is a non-issue. 

[Edit] One caveat is that you might lose the dynamic texture on Android devices upon a suspend/resume. You’d have to be sure to record the touches so as to be able to reproduce the texture on a resume.