Introducing Sketch

The Sketch component, as its name suggests, is the component that provides the function to draw something on blank paper. It is not a tool for drawing professionally but can be used when you need functions such as simple signing.

Example

Components used in terminals for signing after card payments in retail stores process similar functions as the Sketch component. It receives a signature, saves it as an image, and sends it to the card company along with payment information.

Creating Sketch

The Sketch component is not registered in the default TypeDefinition. If you select the [TypeDefinition> Objects] item in Project Explorer and run the editor, you can check the list of objects that have not been added in the Modules item. Click the [+] button next to the "nexacro.Sketch" item in the list to add the object.

Select Sketch from the toolbar, drag and drop it onto the form to create it.

Run it with QuickView (Ctrl + F6). The default setting is that you can draw on the Sketch component, so if you click the left mouse button and drag over the area, the picture will be drawn.

Adding Sketch Options

It provides two basic functions, drawing and erasing, and you can add text as well. When drawing, you can set the color, size, and shape of the brush. In this example, we will be adding a simple option.

Example

The Sketch component area is displayed and you can select the Color, Size options. If you select the Radio button, then you can add text or erase drawn images when editing.

When executed in the web browser, the created image can be saved as a file. If you use the runtime browser other than the web browser, you can implement the save function using a separate method.

sample_sketch_01.xfdl

Core features used in the example

setBrushColor, setBrushSize

Specifies the color or size of the line drawn in the Sketch area.

editmode

Able to choose one of four options. The default value is "stroke". If you select "text", you can add the character string to the selected point. The string is converted to an image when input is complete and it cannot be modified.

How to implement an example

Place the Sketch component and place the Static component and the Combo, Spin, Radio components to set options. Set innerdataset of the Combo component to 4 colors of "Black, Blue, Red, Yellow" and innerdataset of the Radio component to 4 options of "none, stroke, text, erase".

The brush size used in the Sketch component should be set to a value greater than 0. Set the value of the min property of the Spin component to 1.

When modifying the option value, add the corresponding event so that the modified value can be reflected in the Sketch component.

this.cmbColor_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	this.sketchMain.setBrushColor(obj.value);
};

this.spinSize_onchanged = function(obj:nexacro.Spin,e:nexacro.ChangeEventInfo)
{
	this.sketchMain.setBrushSize(obj.value);
};

this.Radio00_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.sketchMain.set_editmode(obj.value);
};

Run it with QuickView (Ctrl + F6) and draw a picture or add the string to the Sketch component while changing the option value.