Capture specific UI element from the screen at anytime with Corona

Introduction:
In my last blog ( Capture whole screen at any time with Corona ) I have explained you that how easily we can take screenshot of the screen of our app using corona. So today I am going to explain you that how can corona can be useful to take a picture of specific display object.

Description:
As we already know that the ‘display’ API can be used to capture any screen, in similar way display library has funcion called ‘capture’ used to take the picture of a pointed UI element.

So let’s have a screen where we will have few UI elements and then we will capture one of the display object present on screen.

CODE BLOCK:

-- Define background color of the screen
display.setDefault( "background", 180, 180, 180 )

Let’s add few UI elements to the screen and let me describe the way to capture any UI element.

-- Define a label
local label = display.newText( "Click here to capture the below block!", 50, 100, nill, 30 )

-- Mentioned the text color
label:setTextColor( 0, 0, 255 )

-- Define a rectangle
local myBlock = display.newRect( 50, 200, 200, 200 )

<b>-- Mentioned color of the rectangle
myBlock:setFillColor( 120, 120, 120 )</b>

On above code we have added a label and a rectangle as UI element of the screen.

-- Define a function to capture any UI element of from the screen
local function labelClickListener(event)

-- Check the touch start condition
if event.phase == 'began' then

-- Capture object
local captureObject = display.capture( myBlock )
end
end

-- Assign event listener to the label
label:addEventListener( 'touch', labelClickListener)

Here I have prepare a touch event listener and associate that with the message label. On click of the label ‘labelClickListener’ function will be called.

On ‘labelClickListener’ function I have check the condition of began state of the touch and then perform the capturing. To capture the particular display object I define a variable called ‘captureObject’ where I have called display.capture() function which exactly captures display object that I have passed as a parameter to this function.

To show the captured image to the same window, simply modify the above function with below code.

local function labelClickListener(event)

-- Check the touch start condition
if event.phase == 'began' then

-- Capture object
local captureObject = display.capture( myBlock )

-- Set the position of captured image
captureObject.x, captureObject.y = 200, 500

end
end

So here define a local variable ‘captureObject’ to take the screenshoot of particular UI element displaying the same on screen by assigning the position for that image.

To save the image on device add an extra boolean parameter ‘true’ with the function ‘capture’ which says that to save the image to device. But to save in Android device we need to add special permission on settings file which looks like as below code.

settings =
{
android =
{
usesPermissions =
{
"android.permission.WRITE_EXTERNAL_STORAGE",
},
},
}

Summary:
So here I have described how can we capture any specific display object and can be shown on same screen and if needed we can store the same on device using Corona.

Written ByRaju Mahato, Software Developer, Mindfire Solutions

Advertisements

One thought on “Capture specific UI element from the screen at anytime with Corona

  1. Pingback: Capture specific UI element from the screen at any time with Corona. | Cross Platform Mobile App Architecture

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s