How do I mask an image with an SVG path?
In LiveCode all controls have an inc property which modifies the way a control is drawn. By combining a group with the blendSrcOver ink that contains a control that has a blendDstIn ink we can create a mask effect. In this lesson we will use the SVG path widget to mask an image.
Creating the function
Open the LiveCode for FM solution and click on the `Functions` button.
In the LiveCode for FM Workspace click on the `+` (1) icon to create a new function. Name it `MaskWithSVGPath` (2) and click `OK` (3).
Scroll down the list of functions and select `MaskWithSVGPath` (1). You can enter a description (2) and copy the function script below into the script editor (3).
This script creates a group containing the original image and SVG path widget and exports a snapshot of the group to create the new image. This is a reusable technique you could use with any kind of image adornment object placed inside the group. The function has 2 parameters:
- The image from a container field
- The name of the SVG path from the SVG Icon Library or an SVG Path
if there is no stack "MaskImageWithSVGPathTemporary" then
create invisible stack "MaskImageWithSVGPathTemporary"
set the defaultStack to "MaskImageWithSVGPathTemporary"
create group "ExportGroup"
set the showBorder of group "ExportGroup" to false
set the margins of group "ExportGroup" to 0
set the ink of group "ExportGroup" to blendSrcOver
create image "OriginalImage" in group "ExportGroup"
set the showBorder of image "OriginalImage" to false
create widget "SVG" as "com.livecode.widget.svgpath" in group "ExportGroup"
set the ink of widget "SVG" to blendDstIn
else
set the defaultStack to "MaskImageWithSVGPathTemporary"
end if
if fmBinaryParamHasStream(1, "PNGf") then
put fmBinaryParamStream(1, "PNGf") into image "OriginalImage"
else if fmBinaryParamHasStream(1, "JPEG") then
put fmBinaryParamStream(1, "JPEG") into image "OriginalImage"
else
put fmBinaryParamStream(1, fmBinaryParamMain(1)) into image "OriginalImage"
end if
set the width of image "OriginalImage" to the formattedWidth of image "OriginalImage"
set the height of image "OriginalImage" to the formattedHeight of image "OriginalImage"
set the rect of widget "SVG" to the rect of image "OriginalImage"
if fmParam(2) is among the lines of iconNames() then
set the iconPresetName of widget "SVG" to fmParam(2)
else
set the iconPath of widget "SVG" to fmParam(2)
end if
put "binary" into tData["type"]
put width of image "OriginalImage" into tData["width"]
put the height of image "OriginalImage" into tData["height"]
set the itemDelimiter to "."
put item 1 of fmBinaryParamFilename(1) & "-masked" into tFilename
put "PNGf" into tData["main"]
export snapshot from group "ExportGroup" to tData["value"]["PNGf"] as PNG
put tFilename & ".png" into tData["filename"]
return tDataTesting
Choose `File -> New Solution...` from the menubar and save the file. Then choose `File > Manage > Database...` from the menubar.
In the `Manage Database` dialog create fields as seen in the image below. Then create a calculation field named `Masked Image`. This will open the `Specify Calculation` dialog.
In the `Specify Calculation` dialog enter the calculation as seen in the image below and set the `Calculation result is` option button to `Container` then click on `Storage Options...`
Check `Do not store calculation results` and click `OK`. Click `OK` on the `Specify Calculation` dialog and the `Manage Database` dialog to return to the solution.
Open the `Field Picker` (1) and drag the fields to the layout then click `Exit Layout` to return to browse mode.
Click on `New Record` and drag an image to the `Original Image` field. Fill out the other fields and watch the `Masked Image` change as you do.
0 Comments
Add your comment