Introducing Graphics Component

The Graphics component provides the function to draw lines or shapes. The Graphics component allows the developer to use the HTML Canvas element easily as if it is any other component. Using the component properties, methods, and events, you can easily create the desired image in the script.

Registering Graphics.json

When Nexacro Studio is installed, the Graphics component is not set by default. You need to register Graphics.json in the project TypeDefinition and set the Graphics component as an object.

The Graphics.json file can be found in the path below.

[SDK installation folder]\nexacrolib\component\Graphics.json

Drawing Lines

Let us take a look at the most basic action of drawing a line on the Graphics component.

Example

Draw a red line on the blank screen as shown below.

sample_graphics_01.xfdl

Core features used in the example

strokepen

Specifies the color or format of the line. Since there is no default value, the line is not displayed on the screen unless the property value is specified.

How to implement an example

Add the script to load the Graphics component and draw a line over it.

var objGLine = new nexacro.GraphicsLine();
this.Graphics00.addChild( "GraphicsLine00", objGLine );
objGLine.set_x(10);
objGLine.set_y(10);	
objGLine.set_x2(50);
objGLine.set_y2(50);
objGLine.set_strokepen('1px solid red');
this.Graphics00.redraw();

This is the method of registering the necessary control (line or shape) on the Graphics component as a child. In the example, since a line is to be added, create the GraphicsLine object and add it using the AddChild method of the Graphics component.

var objGLine = new nexacro.GraphicsLine(); 
this.Graphics00.addChild( "GraphicsLine00", objGLine );

By specifying the properties of the GraphicsLine object, specify the starting point (x, y) and endpoint (x2, y2), and set the line thickness and color (strokepen). To display lines or shapes drawn with the specified properties, you need to call the redraw method of the Graphics component.

this.Graphics00.redraw();

Processing Lines or Shapes by Grouping

Objects that draw individual lines or shapes can also be added directly to the Graphics component. However, in the case of this configuration, if you need to change the location of the entire shape, then there is an inconvenience of having to call the method of individual objects every time.

If you use the GraphicsGroup object, though, you can add the GraphicsGroup object only to the Graphics component, and add the rest objects as child classes of the GraphicsGroup object. This way, if you only move the GraphicsGroup object, the rest of the shape will move along with it.

Example

Clicking the [Add Objects] button displays various types of objects. The rectangle was added as the child of the Graphics component, and the rest as child classes of the GraphicsGroup object. When you click the [rotate] button, you can see how the rectangle and the rest of the shape move.

sample_graphics_02.xfdl

Core features used in the example

setImageLoadEventHandler

Used when there is a part that needs processing after loading the image when using the GraphicsImage object. In the example, the size (width, height) of the image was taken from the actual image value after loading the image.

getObjectByID

Find the child classes of the Graphics component, GraphicsGroup object, and GraphicsPaths object by the ID value. In the example, it was found based on the Graphics component. It can be found by the Graphics component as in the example, or by the GraphicsGroup object.

How to implement an example

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.addGraphicsControl();
	this.Graphics00.redraw();
};

this.addGraphicsControl = function()
{
	//GraphicsRect
	var objGRect = new nexacro.GraphicsRect();
	this.Graphics00.addChild( "GraphicsRect00", objGRect );
	objGRect.set_x(50);
	objGRect.set_y(50);
	objGRect.set_width(50);
	objGRect.set_height(50);
	objGRect.set_strokepen("1px solid red");
	
	// GraphicsEllipse
	var objGEllipse = new nexacro.GraphicsEllipse();
	objGEllipse.set_x(150);
	objGEllipse.set_y(75);
	objGEllipse.set_width(50);
	objGEllipse.set_height(50);
	objGEllipse.set_strokepen("1px solid red");	
	
	// GraphicsText
	var objGText = new nexacro.GraphicsText();
	objGText.set_x(300);
	objGText.set_y(50);
	objGText.set_color('red');
	objGText.set_font('12pt/normal Verdana'); 
	objGText.set_text('Ryan');
	
	// GraphicsImage
	var objGImage = new nexacro.GraphicsImage();
	objGImage.set_x(200);
	objGImage.set_y(50);	
	objGImage.setImageLoadEventHandler(this.fn_checkGImage, this);
	objGImage.set_image("url('imagerc::img_50.png')");	
	
	// GraphicsLine
	var objGLine = new nexacro.GraphicsLine();
	objGLine.set_x(50);
	objGLine.set_y(120);
	objGLine.set_x2(250);
	objGLine.set_y2(0);
	objGLine.set_strokepen('1px solid red');  
	
	// GraphicsPaths
	var objGPaths = new nexacro.GraphicsPaths();
	objGPaths.set_x(50);
	objGPaths.set_y(120);
	objGPaths.set_strokepen('1px solid blue');  

	
	var objGPath = new nexacro.GraphicsPath();	
	objGPaths.addChild( "GraphicsPath00", objGPath );
	objGPath.moveTo(0,0);
	objGPath.arcTo( 50, 50, 50, 100, 0, true, false );
	
	// GraphicsGroup 
	var objGGroup = new nexacro.GraphicsGroup();
	this.Graphics00.addChild( "GraphicsGroup00", objGGroup );
	objGGroup.addChild("GraphicsEllipse00", objGEllipse);
	objGGroup.addChild("GraphicsText00", objGText);
	objGGroup.addChild("GraphicsImage00", objGImage);
	objGGroup.addChild("GraphicsLine00", objGLine);
	objGGroup.addChild("GraphicsPaths00", objGPaths);
}

Add the GraphicsRect object directly as the child of the Graphics component, but do not add the rest of the objects as the child classes of the Graphics component.

this.Graphics00.addChild( "GraphicsRect00", objGRect );

You can directly specify the width and height property values of the GraphicsImage object, but if you want to set the values of the actual image, then you need to process the property values in a separate function after the image is loaded as shown below.

var objGImage = new nexacro.GraphicsImage();
objGImage.setImageLoadEventHandler(this.fn_checkGImage, this);
objGImage.set_image("url('imagerc::img_50.png')");

Add the GraphicsGroup object and add it as the child of the Graphics component. Add the object that processes the rest of the shapes as child classes of the GraphicsGroup object.

var objGGroup = new nexacro.GraphicsGroup();
this.Graphics00.addChild( "GraphicsGroup00", objGGroup );
objGGroup.addChild("GraphicsEllipse00", objGEllipse);
objGGroup.addChild("GraphicsText00", objGText);
...

Since it is processed when image loading is completed, execute the redraw method.

this.fn_checkGImage = function()
{
	var objGImage = this.Graphics00.getObjectByID("GraphicsImage00");
	objGImage.set_width(objGImage.imagewidth);
	objGImage.set_height(objGImage.imageheight);
	this.Graphics00.redraw();
}

Find only the GraphicsRect object and execute the rotate method.

this.Button02_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objGRect = this.Graphics00.getObjectByID("GraphicsRect00");
	objGRect.set_fillstyle("yellow");
	objGRect.rotate(10);
	this.Graphics00.redraw();
};

Find only the GraphicsGroup object and execute the rotate method.

this.Button03_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objGGroup = this.Graphics00.getObjectByID("GraphicsGroup00");
	objGGroup.rotate(10);
	this.Graphics00.redraw();
};

Creating Simple Paint

Implement the function that allows you to draw lines or add shapes like Paint.

Example

Select either the Line, Rectangle, or Circle on the blank screen and drag with the mouse to display the shape. When you click the [clear] button, all shapes drawn on the screen disappear.

sample_graphics_03.xfdl

Core features used in the example

clear

Initializes all child objects. After executing the clear method, you must call the redraw method to process the initialization on the actual screen.

How to implement an example

Set the Line, Rectangle, and Circle items as the innerdataset item of the Radio component.

When the mouse button is pressed on the Graphics component (onlbuttondown), the value of the Radio component is checked to determine what action to perform, and when the mouse moves while the button is pressed (onmousemove), the drawing operation is processed according to the shape. When the mouse button is released (onlbuttonup), the status value is initialized.

var bMouseButtonPressed = false;
var preClientX;
var preClientY;
var nNUm = 0;
var temprectangle;
var tempellipse;
var drawType;
this.Graphics00_onlbuttondown = function(obj:nexacro.Graphics,e:nexacro.MouseEventInfo)
{
	bMouseButtonPressed = true;
	preClientX = e.clientx;
	preClientY = e.clienty;
	drawType = this.Radio00.value;
};

this.Graphics00_onlbuttonup = function(obj:nexacro.Graphics,e:nexacro.MouseEventInfo)
{
	bMouseButtonPressed = false;
	temprectangle = null;
	tempellipse = null;
};

this.Graphics00_onmousemove = function(obj:nexacro.Graphics,e:nexacro.MouseEventInfo)
{
	switch(drawType) {
	case 'Line':
		this.fn_drawLine(e);
		break;
	case 'Rectangle':
		this.fn_drawRect(e);
		break;
	case 'Circle':
		this.fn_drawEllipse(e);
		break;		
	default:
	}
};

this.fn_drawLine = function(e:nexacro.MouseEventInfo)
{
	var nowClientX = e.clientx;
	var nowCLientY = e.clienty;
	if(bMouseButtonPressed)
	{
		var objGLine = new nexacro.GraphicsLine();
		objGLine.set_x1(preClientX);
		objGLine.set_x2(nowClientX);
		objGLine.set_y1(preClientY);
		objGLine.set_y2(nowCLientY);
		objGLine.set_strokepen('1px solid red'); 
		this.Graphics00.addChild( "GraphicsControl_"+nNUm, objGLine );
		this.Graphics00.redraw();
		
		preClientX = nowClientX;
		preClientY = nowCLientY;
		nNUm++;
	}
};

Whenever the onmousemove event of the Graphics component occurs, a new GraphicsLine object is created and a line is drawn.

For example, if the strokepen property value is specified by randomly processing the color code value, a line is drawn in the following color. It is not a single line, but several lines are connected to look like a single line.

var colorCode = "#"+Math.round(Math.random()*0xffffff).toString(16);
objGLine.set_strokepen('1px solid '+colorCode);

this.fn_drawRect = function(e:nexacro.MouseEventInfo)
{
	var nowClientX = e.clientx;
	var nowCLientY = e.clienty;
	if(bMouseButtonPressed)
	{
		var objGRect = new nexacro.GraphicsRect();
		var left = preClientX;
		var top = preClientY;
		var width = nowClientX - preClientX;
        var height = nowCLientY - preClientY;
		
		if(nowClientX < preClientX)
		{
			left = nowClientX;
			width *= -1;
		}
		if(nowCLientY < preClientY)
		{
			top = nowCLientY;
			height *= -1;
		}
 
		objGRect.set_x(left);
		objGRect.set_y(top);
		objGRect.set_width(width);
		objGRect.set_height(height);
		objGRect.set_strokepen('1px solid red'); 
		if(temprectangle)
		{
			this.Graphics00.removeChild(temprectangle);
		}
		temprectangle = "GraphicsControl_"+nNUm;
		this.Graphics00.addChild("GraphicsControl_"+nNUm, objGRect );
		this.Graphics00.redraw();

		nNUm++;
	}
};

The code to correct the starting point when the mouse pointer moves to the left or up instead of down to the right from the starting point was added.

if(nowClientX < preClientX)
{
    left = nowClientX;
    width *= -1;
}

Then, it arbitrarily marks and deletes the rectangle when the mouse pointer moves. This allows the user to know where the final rectangle will be drawn.

if(temprectangle)
{
    this.Graphics00.removeChild(temprectangle);
}

this.fn_drawEllipse = function(e:nexacro.MouseEventInfo)
{
	var nowClientX = e.clientx;
	var nowCLientY = e.clienty;
	if(bMouseButtonPressed)
	{
		var objGEllipse = new nexacro.GraphicsEllipse();
		var left = preClientX;
		var top = preClientY;
		var width = nowClientX - preClientX;
        var height = nowCLientY - preClientY;
		
		if(nowClientX < preClientX)
		{
			left = nowClientX;
			width *= -1;
		}
		if(nowCLientY < preClientY)
		{
			top = nowCLientY;
			height *= -1;
		}
 
		objGEllipse.set_x(left+(width/2));
		objGEllipse.set_y(top+(height/2));
		objGEllipse.set_width(width);
		objGEllipse.set_height(height);
		objGEllipse.set_strokepen('1px solid red'); 
		if(tempellipse)
		{
			this.Graphics00.removeChild(tempellipse);
		}
		tempellipse = "GraphicsControl_"+nNUm;
		this.Graphics00.addChild("GraphicsControl_"+nNUm, objGEllipse );
		this.Graphics00.redraw();

		nNUm++;
	}
};

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Graphics00.clear();
	this.Graphics00.redraw();
};