Using the Signature Widget
The signature widget is a canvas for freehand drawing, that can be used for capturing signatures. The path data can then be exported.
Creating a Signature Widget
A signature widget can be created by dragging it out from the
Tools Palette, where it appears with the following icon:
Alternatively it can be created in script using:
create widget as "com.livecode.widget.signature"
Using the Signature Widget
Once the signature has been drawn on the widget, the data can be exported using the pathData property. This is a numerically keyed array consisting of the individual pieces of path data that make up the drawn path.
Each path info element contains three keys:
- path - SVG path instructions
- color - the color to paint the path with
- width - the line width of the path
The following code can be used to export the pathData array to SVG file format:
function svgFileData pSignature
local tPathData
put the pathData of pSignature into tPathData
local tSVG
put "<svg xmlns=" & quote & "http://www.w3.org/2000/svg" & quote & ">" & return into tSVG
repeat for each element tElement in tPathData
put "<path d=" & quote & tElement["path"] & quote after tSVG
put " stroke=" & quote & "rgb(" & item 1 to 3 of tElement["color"] & ")" & quote after tSVG
put " stroke-opacity=" & quote & round(item 4 of tElement["color"] / 255) & quote after tSVG
put " stroke-width=" & quote & tElement["width"] & quote after tSVG
put "/>" & return after tSVG
end repeat
put "</svg>" after tSVG
return tSVG
end svgFileData
The pathData can also be used to manipulate the appearance of the signature. For example, to thicken the line data, the following handler could be used:
command thickenSignature pSignature, pFactor
local tPathData
put the pathData of pSignature into tPathData
repeat for each key tKey in tPathData
multiply tPathData[tKey]["width"] by pFactor
end repeat
set the pathData of pSignature to tPathData
end thickenSignature
The results of applying this to a signature with factors of 1.5 and 0.5 can be seen below:
Similarly, colours can be applied.
The signature widget can be exported as an image using the export snapshot or import snapshot command.
export snapshot from rect (the rect of widget "signature") of widget "signature" to file (specialFolderPath("desktop") & "/signature.png") as PNG
Clearing the Signature
To clear the signature widget set the pathData to empty.
set the pathData of widget "signature" to empty
Signture Widget Properties
Name | Summary | Syntax |
---|---|---|
borderWidth |
The width of the border to draw |
get the borderWidth of widget set the borderWidth of widget to pixels |
opaque | Whether the background of the widget is filled |
get the opaque of widget set the opaque of widget to {true | false} |
pathData | The path data used to draw the widget |
get the pathData of widget set the pathData of widget to array |
Oskar
Hello
How can I clear the content of the signature widget?
Thanks
Matthias Rebbe
The information is stored in the pathData,
so
set the pathData of widget "signature" to empty
would delete the content of the widget.