Development of simple Plotting Program in RequireJS

Introduction to simple Plotting Program Development in RequireJS

The emergence of RequireJS makes it easy to modularize the front-end code. When the front-end project grows and the code grows, the modular code makes the project structure clearer, not only makes our ideas clearer during development, in addition, it is easier to maintain it later. The following is a simple plotting program developed by using RequireJS after I learned RequireJS, as shown in the following code in the browser:

Start

Shows the project structure of this simple Plotting Program:

Index.html is the home page of the Project. All js files are stored in the js directory. The js/app directory is the custom module file. No files are found in the js/lib directory, when other front-end frameworks such as jquery are used in our project, the js/lib directory stores the js files of these frameworks, js/main. js is the configuration file of requirejs. It mainly configures some paths, js/require. min. js is the file of the RequireJS framework. Please follow me to complete this simple drawing program step by step!

1. Configure requirejs

The configuration file code of this project is stored in js/main. js. The Code content is as follows:

require.config({  baseUrl: 'js/lib',  paths: {    app: '../app'  }})

The main purpose is to configure the project root directory as 'js/lib', and then configure a path named 'app' with the path '.. /app', that is, the 'js/app' directory.

Ii. Compile the module code

The main modules in this project are as follows: point. js, line. js, rect. js, arc. js, and utils. js, which are described as follows:

Point. js:

The point. js module represents a vertex (x, y). The Code is as follows:

/** Point */define (function () {return function (x, y) {this. x = x; this. y = y; this. equals = function (point) {return this. x = point. x & this. y = point. y ;};};})

The above Code defines the vertex module using define, and returns a class in the callback function. The class has two parameters x and y, and the equals method is used to compare whether two points are equal.
To use this module, we can use the following code:

Require (['app/point'], function (point) {// create a vertex Class Object var Point = new point (3, 5 );})

Note that the first parameter of the require () function is an array. The Point in the callback function represents our vertex class, And the vertex class object is created using the new Point () method.

Line. js:

The line. js module represents a straight line. The Code is as follows:

/** Straight line */define (function () {return function (startPoint, endPoint) {this. startPoint = startPoint; this. endPoint = endPoint; this. drawMe = function (context) {context. strokeStyle = "#000000"; context. beginPath (); context. moveTo (this. startPoint. x, this. startPoint. y); context. lineTo (this. endPoint. x, this. endPoint. y); context. closePath (); context. stroke ();}}})

The definition of the linear module is similar to that of the vertex module. They all return a class in the define callback function. The constructor of this linear class has two vertex class parameters, it represents the start and end points of a straight line. The straight line class also has a drawMe method that draws itself by passing in a context object.

Rect. js:

The rect. js module represents a rectangle. The Code is as follows:

/** Rectangle */define (['app/point'], function () {return function (startPoint, width, height) {this. startPoint = startPoint; this. width = width; this. height = height; this. drawMe = function (context) {context. strokeStyle = "#000000"; context. strokeRect (this. startPoint. x, this. startPoint. y, this. width, this. height );}}})

StartPoint is the coordinate of the vertex in the upper left corner of the rectangle. It is a point class. width and height represent the width and height of the rectangle, and a drawMe method is used to draw the rectangle itself.

Arc. js:

The arc. js module represents a circle with the following code:

/** Circle */define (function () {return function (startPoint, radius) {this. startPoint = startPoint; this. radius = radius; this. drawMe = function (context) {context. beginPath (); context. arc (this. startPoint. x, this. startPoint. y, this. radius, 0, 2 * Math. PI); context. closePath (); context. stroke ();}}})

StartPoint indicates the coordinate of the point in the upper left corner of the rectangle where the circle is located. radius indicates the radius of the circle. The drawMe method is used to draw a circle.
In the above modules, the linear, rectangular, and circular classes all contain the drawMe () method. The canvas plotting knowledge is involved here, you can check the document: HTML 5 Canvas reference manual.

Utils. js

The utils. js module is mainly used to process various graphical plotting tools, including linear, rectangular, and circular plotting, as well as recording and clearing the plotting trajectory. The Code is as follows:

/** */Define (function () {var history = []; // an array used to save historical drawing records, function drawLine (context, line) {line. drawMe (context);} function drawRect (context, rect) {rect. drawMe (context);} function drawArc (context, arc) {arc. drawMe (context);}/** Add a draw track */function addHistory (item) {history. push (item);}/** draw the historical track */function drawHistory (context) {for (var I = 0; I 
 


3. Write interface code to handle mouse events
Code of the hosts file:
  
   Simple Plotting Program    
    Draw a straight line    Draw a rectangle    Circle    Clear canvasCurrent Operation: draw a straight line