LiveCode for FM ManualFunctionsHow do I mask an image with an SVG path?

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:

  1. The image from a container field
  2. 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
   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"
   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)
   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 tData
Click to copy


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.


Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.