Requirejs Simple Drawing program Development _javascript Skill

Objective

The advent of Requirejs makes the front-end code modularization easy, the current end of the project more and more, more and more code, modular code to make the project structure clearer, not only in the development of our ideas clearer, but also easier to maintain later. Here is a simple drawing program that I developed using Requirejs after learning Requirejs, running in the browser as shown in the following image:

If you are not very familiar with Requirejs, you can see my Requirejs study notes: http://blog.csdn.net/yubo_725/article/details/52913853

Begin

The project structure of this simple drawing program is shown in the following illustration:

Where Index.html is the project's homepage, JS directory to store all JS files, Js/app directory for our custom module files, js/lib directory temporarily no files, when we use some other front-end framework such as jquery, js/ Lib directory to store these frames js file, js/main.js for the Requirejs configuration file, mainly configure some paths, Js/require.min.js is Requirejs framework files. Below please follow me step-by-step to complete this simple drawing program!

First, configure Requirejs

The configuration file code for this project is placed in Js/main.js, and the code reads as follows:

Require.config ({
  baseurl: ' Js/lib ',
  paths: {
    app: ' ...) /app '
  }
})

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

Second, write the module code

The main modules in this project are as follows: Point.js, Line.js, Rect.js, Arc.js, Utils.js, below one by one instructions:

Point.js:

Point.js This module represents a point (x, Y) with the following code:

/** 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 uses define to define the point of this module, returning a class in the callback function that has two parameter x,y, and a equals method to compare two points for equality.
To use this module, we can use the following code:

Require ([' app/point '], function (point) {
  //The object of the new dot class is
  var points = new (3, 5);
})

Notice here that the first parameter of the Require () function is an array, and the point in the callback function represents our dot class, creating the object of the point class by means of new dot ().

Line.js:

The Line.js module represents a line with the following code:

/** 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 a line module is similar to that of a dot module, is to return a class in the Define callback function, which has two point class parameters representing the starting and ending points of the line, and a Drawme method for the line class to draw itself out by passing in a context object.

Rect.js:

The Rect.js module represents a rectangle with the following code:

/** 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);}}
)

Where the startpoint is the coordinates of the point in the upper-left corner of the rectangle, is a points class, width and height respectively represent the width of the rectangle, and there is also a Drawme method to draw the rectangle itself.

Arc.js:

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

/** Circular *
/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 ();}}
)

Where startpoint represents the coordinates of the point in the upper-left corner of the rectangle in which the circle is located, the radius represents the radius of the circle, and the Drawme method is the method of drawing the circle.
In the above several modules, the line class, the rectangular class, the Circle class all contains has the DRAWME () method, here involves the Canvas drawing knowledge, if has not very clear, may check the document: HTML 5 Canvas Reference Manual

Utils.js

Utils.js module is mainly used to deal with a variety of graphic drawing of the tool class, including lines, rectangles, round drawing, but also include record-drawing trajectory, clear the drawing trajectory, the code is as follows:

/** Manage Drawing Tools
/define (function () { 
  var history = []///////////////////////////////////////////////

  DrawLine (context, line) {
    line.drawme (context);
  }

  function DrawRect (context, rect) {
    rect.drawme (context);
  }

  function DrawArc (context, ARC) {
    arc.drawme (context);
  }

  /** Add a draw trajectory/
  function AddHistory (item) {
    History.push (item);
  }

  /** the history track/
  function drawhistory {for
    (var i = 0; i < history.length; i++) {
      var obj = histor Y[i];
      OBJ.DRAWME (context);      
    }
  }

  /** Clear History Track
  /function ClearHistory () {
    history = [];
  }

  return {
    drawline:drawline,
    drawrect:drawrect,
    Drawarc:drawarc,
    addhistory:addhistory,
    drawhistory:drawhistory,
    clearhistory:clearhistory
  };
})

Third, the writing interface code, handling mouse events

The modules for this simple drawing program have been defined above. In the drawing of graphics used in the above several modules, the following to start writing the main interface code, the main interface contains four buttons, and a large canvas for drawing, the following directly on the index.html file code:

<!
  DOCTYPE html>  

The code in the index.html file is much more, but the main code is to monitor and process the mouse down, move, lift three kinds of events, in addition, Get the coordinates of the mouse in the canvas need to pay attention to: Because the event object Clientx and Clienty is the mouse relative to the coordinates of the page, in order to get the mouse in the canvas coordinates, need to get the canvas in the rectangular region, Then use Clientx-canvas.left,clienty-canvas.top to get the mouse position in the canvas.

Source

The source code in this blog has been hosted to GitHub, click here to view the source

Known bugs

When drawing a circle, you need to drag the mouse from the upper left corner to the lower right corner to draw a circle, if not, the position of the circle will be problematic.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.