首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

RequireJS简易绘图程序开发

Posted in Javascript onOctober 28, 2016

前言

RequireJS的出现让前端代码模块化变得容易，当前端项目越来越大，代码越来越多的时候，模块化代码让项目结构更清晰，不仅在开发时让我们的思路更清晰，而且后期维护起来也更容易。下面是我学习RequireJS后使用RequireJS开发的一款简易绘图程序，运行在浏览器中如下图所示：

RequireJS简易绘图程序开发

如果你对RequireJS还不是很了解，可以看我的RequireJS学习笔记：http://blog.csdn.net/yubo_725/article/details/52913853

开始

这个简易绘图程序的项目结构如下图所示：

RequireJS简易绘图程序开发

其中index.html是项目的主页，js目录下存放所有js文件，js/app目录为我们自定义的模块文件，js/lib目录中暂时没有文件，当我们的项目里用到一些其他前端框架如jquery等时，js/lib目录就存放这些框架的js文件，js/main.js为requirejs的配置文件，主要是配置一些路径，js/require.min.js是RequireJS框架的文件。下面请跟我一步一步完成这个简易的绘图程序吧！

一、配置requirejs

本项目的配置文件代码放在js/main.js中，代码内容如下：

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

主要就是配置了项目根目录为'js/lib'，然后配置了一个名为'app'的路径，路径为'../app'，即'js/app'目录。

二、编写模块代码

这个项目中的模块主要有如下几个：point.js, line.js, rect.js, arc.js, utils.js，下面一一说明：

point.js:

point.js这个模块代表一个点(x, y)，代码如下：

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

上面的代码中使用define定义了点这个模块，在回调函数中返回了一个类，该类有两个参数x,y，还有一个equals方法用于比较两个点是否相等。
要使用这个模块，我们可以使用如下代码：

require(['app/point'], function(Point) {
  //新建一个点类的对象
  var point = new Point(3, 5);
})

这里需要注意require()函数的第一个参数是一个数组，回调函数中的Point就代表了我们的点类，通过new Point()的方式创建点类的对象。

line.js:

line.js模块代表的是一条直线，代码如下：

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

直线模块的定义跟点模块的定义类似，都是在define的回调函数中返回一个类，这个直线类的构造方法中有两个点类的参数，代表直线的起点和终点，直线类还有一个drawMe方法，通过传入一个context对象，将自身画出来。

rect.js:

rect.js模块代表一个矩形，代码如下：

/** 矩形 */
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是矩形左上角的点的坐标，是一个point类，width和height分别代表矩形的宽高，同时还有一个drawMe方法将矩形自身画出来。

arc.js:

arc.js模块代表一个圆形，代码如下：

/** 圆形 */
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代表圆形所在的矩形的左上角的点的坐标，radius代表圆的半径，drawMe方法是画圆的方法。
在以上几个模块中，直线类、矩形类、圆形类都包含有drawMe()方法，这里涉及到了canvas绘图的知识，如果有不太清楚的，可以查一下文档：HTML 5 Canvas 参考手册

utils.js

utils.js模块主要是用来处理各种图形绘制的工具类，包括直线、矩形、圆形的绘制，也包括记录绘制轨迹、清除绘制轨迹，代码如下：

/** 管理绘图的工具 */
define(function() { 
  var history = []; //用来保存历史绘制记录的数组，里面存储的是直线类、矩形类或者圆形类的对象

  function drawLine(context, line) {
    line.drawMe(context);
  }

  function drawRect(context, rect) {
    rect.drawMe(context);
  }

  function drawArc(context, arc) {
    arc.drawMe(context);
  }

  /** 添加一条绘制轨迹 */
  function addHistory(item) {
    history.push(item);
  }

  /** 画出历史轨迹 */
  function drawHistory(context) {
    for(var i = 0; i < history.length; i++) {
      var obj = history[i];
      obj.drawMe(context);      
    }
  }

  /** 清除历史轨迹 */
  function clearHistory() {
    history = [];
  }

  return {
    drawLine: drawLine,
    drawRect: drawRect,
    drawArc: drawArc,
    addHistory: addHistory,
    drawHistory: drawHistory,
    clearHistory: clearHistory
  };
})

三、编写界面代码，处理鼠标事件

上面已经将本次简易绘图程序的模块都定义完了，在绘制图形时用到的也就是上面几个模块，下面要开始编写主界面的代码了，主界面里包含四个按钮，还有一块大的画布用于绘图，下面直接上index.html文件的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简易绘图程序</title>
  <style type="text/css">
    canvas {
      background-color: #ECECEC;
      cursor: default; /** 鼠标设置成默认的指针 */
    }
    .tool-bar {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="tool-bar">
    <button id="btn-line">画直线</button>
    <button id="btn-rect">画矩形</button>
    <button id="btn-oval">画圆形</button>
    <button id="btn-clear">清空画布</button>
    <span id="hint" style="color: red;">当前操作：画直线</span>
  </div>
  <canvas id="canvas" width="800" height="600"></canvas>
  <script type="text/javascript" src="js/require.min.js" data-main="js/main"></script>
  <script type="text/javascript">
    require(['app/point', 'app/line', 'app/rect', 'app/arc', 'app/utils'], 
      function(Point, Line, Rect, Arc, Utils) {

      var canvas = document.getElementById("canvas");
      var context = canvas.getContext('2d');
      var canvasRect = canvas.getBoundingClientRect(); //得到canvas所在的矩形
      canvas.addEventListener('mousedown', handleMouseDown);
      canvas.addEventListener('mousemove', handleMouseMove);
      canvas.addEventListener('mouseup', handleMouseUp);
      bindClick('btn-clear', menuBtnClicked);
      bindClick('btn-line', menuBtnClicked);
      bindClick('btn-rect', menuBtnClicked);
      bindClick('btn-oval', menuBtnClicked);

      var mouseDown = false; 
      var selection = 1; // 0, 1, 2分别代表画直线、画矩形、画圆

      var downPoint = new Point(0, 0), 
        movePoint = new Point(0, 0), 
        upPoint = new Point(0, 0);
      var line;
      var rect;
      var arc;

      /** 处理鼠标按下的事件 */
      function handleMouseDown(event) {
        downPoint.x = event.clientX - canvasRect.left;
        downPoint.y = event.clientY - canvasRect.top;
        if(selection === 0) { 
          line = new Line(downPoint, downPoint);
          line.startPoint = downPoint;
        } else if(selection === 1) {
          rect = new Rect(new Point(downPoint.x, downPoint.y), 0, 0);
        } else if(selection === 2) {
          arc = new Arc(new Point(downPoint.x, downPoint.y), 0);
        }
        mouseDown = true;
      }

      /** 处理鼠标移动的事件 */
      function handleMouseMove(event) {
        movePoint.x = event.clientX - canvasRect.left;
        movePoint.y = event.clientY - canvasRect.top;
        if(movePoint.x == downPoint.x && movePoint.y == downPoint.y) {
          return ;
        }
        if(movePoint.x == upPoint.x && movePoint.y == upPoint.y) {
          return ;
        }
        if(mouseDown) {
          clearCanvas();
          if(selection == 0) {
            line.endPoint = movePoint; 
            Utils.drawLine(context, line);
          } else if(selection == 1) {
            rect.width = movePoint.x - downPoint.x;
            rect.height = movePoint.y - downPoint.y;
            Utils.drawRect(context, rect);
          } else if(selection == 2) {
            var x = movePoint.x - downPoint.x;
            var y = movePoint.y - downPoint.y;
            arc.radius = x > y ? (y / 2) : (x / 2);
            if(arc.radius < 0) { 
              arc.radius = -arc.radius;
            }
            arc.startPoint.x = downPoint.x + arc.radius;
            arc.startPoint.y = downPoint.y + arc.radius;
            Utils.drawArc(context, arc);
          }
          Utils.drawHistory(context);
        }
      }

      /** 处理鼠标抬起的事件 */
      function handleMouseUp(event) {
        upPoint.x = event.clientX - canvasRect.left;
        upPoint.y = event.clientY - canvasRect.top;

        if(mouseDown) {
          mouseDown = false;
          if(selection == 0) {
            line.endPoint = upPoint;  
            if(!downPoint.equals(upPoint)) {
              Utils.addHistory(new Line(new Point(downPoint.x, downPoint.y), 
                new Point(upPoint.x, upPoint.y))); 
            }  
          } else if(selection == 1) {
            rect.width = upPoint.x - downPoint.x;
            rect.height = upPoint.y - downPoint.y;
            Utils.addHistory(new Rect(new Point(downPoint.x, downPoint.y), rect.width, rect.height));
          } else if(selection == 2) {
            Utils.addHistory(new Arc(new Point(arc.startPoint.x, arc.startPoint.y), arc.radius));
          }
          clearCanvas();
          Utils.drawHistory(context);
        }
      }

      /** 清空画布 */
      function clearCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }

      /** 菜单按钮的点击事件处理 */
      function menuBtnClicked(event) {
        var domID = event.srcElement.id;
        if(domID === 'btn-clear') {
          clearCanvas();
          Utils.clearHistory();
        } else if(domID == 'btn-line') {
          selection = 0;
          showHint('当前操作：画直线');
        } else if(domID == 'btn-rect') {
          selection = 1;
          showHint('当前操作：画矩形');
        } else if(domID == 'btn-oval') {
          selection = 2;
          showHint('当前操作：画圆形');
        }
      }

      function showHint(msg) {
        document.getElementById('hint').innerHTML = msg;
      }

      /** 给对应id的dom元素绑定点击事件 */
      function bindClick(domID, handler) {
        document.getElementById(domID).addEventListener('click', handler);
      }
    });
  </script>
</body>
</html>

index.html文件中的代码比较多，但最主要的代码还是对鼠标按下、移动、抬起三种事件的监听和处理，另外，获取鼠标在canvas中的坐标位置需要注意一点：由于event对象中获取的clientX和clientY是鼠标相对于页面的坐标，为了获取鼠标在canvas中的坐标，需要获得canvas所在的矩形区域，然后用clientX-canvas.left，clientY-canvas.top，来获取鼠标在canvas中的位置。

源码

本篇博客中的源码已托管到github，点击这里查看源码

已知bug

在画圆形时需要鼠标从左上角拖到右下角画圆，如果不是这样，圆的位置会有问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

RequireJS简易绘图程序开发

- Author -

对面的小胖妞看过来

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
javascript基础知识之html5轮播图实例讲解（44）
Feb 17 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
vue 全局环境切换问题
Oct 27 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 #Javascript
微信小程序 页面跳转传参详解
Oct 28 #Javascript
微信小程序 wx:key详细介绍
Oct 28 #Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 #Javascript
基于Layer+jQuery的自定义弹框
May 26 #Javascript
微信开发 js实现tabs选项卡效果
Oct 28 #Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 #Javascript
选择器(1) 克隆(1) 外键(1) SQL注入(2) #{}(1) 图片模糊(1) 脏读(2) 代理(2) canvas(2) 增删查改(1)
You might like
PHP调用其他文件中的类
2018/04/02 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
jquery 操作单选框，复选框，下拉列表实现代码
2009/10/27 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
基于Python os模块常用命令介绍
2017/11/03 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
windows下python安装pip图文教程
2018/05/25 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
Win10下配置tensorflow-gpu的详细教程（无VS2015/2017）
2020/07/14 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
巴西女装购物网站：Eclectic
2018/04/24 全球购物
俄罗斯鲜花递送：AMF
2020/04/24 全球购物
文员个人求职自荐信
2013/09/21 职场文书
党校培训思想汇报
2013/12/30 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
校庆口号
2014/06/20 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
公司停电通知
2015/04/15 职场文书
素质教育培训心得体会
2016/01/19 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
Nginx的gzip相关介绍
2022/05/11 Servers