“canvas画布仿window系统自带画图软件"项目的思考

　　　　　　“canvas画布仿window系统自带画图软件"项目的思考

　　首先贴上DEMO图，并没有美化效果。对UI有要求的，请自带补脑技术。

　　　　

　　思考一

　　　　在做项目的过程中，我发现”工具栏“，"形状栏"中有些功能都需要对canvas元素同时使用onmousedown, onmousemove, onmouseup事件。然后我就使用兼容性添加事件的代码给每个功能添加这几个事件。兼容性代码如下：　　

 //添加事件方法
 function addEvents(obj, type, func) {
    if (obj.addEventListener) {
           obj.addEventListener(type, func, false);
    } else if (obj.attachEvent) {
           obj.attachEvent('on' + type, func);
    } else {
           obj['on' + type] = func;
    }
 }
 //删除事件方法
 function delEvents(obj, type, func) {
    if (obj.removeEventListener) {
          obj.removeEventListener(type, func, false);
    } else if (obj.detachEvent) {
          obj.detachEvent('on' + type, func);
    } else {
          obj['on' + type] = func;
    }
 }

　　结果导致的问题是，我点击某一个功能按钮，其他功能按钮的事件处理程序也会执行。思考了一会，才发现原来使用DOM2级添加事件给元素添加的个数是没有限制的。因此我一触发onmousedown, onmousemove, onmouseup事件，全部代码都会执行。那有没有需要时添加事件，不需要时删除事件的方法呢？ 正好有delEvents()方法（如上）,所以点击某个按钮，我在事件处理的入口就使用delEvents()方法，就删除按钮具有添加的onmousedown, onmousemove, onmouseup事件,从而保证这三个的事件的处理程序各只有一个。

　　贴下部分代码：

 /********工具组的 ‘橡皮擦’按钮操作函数组  Begin ******/
 addEvents(oEraser, 'click', beginEraseFun);
 function beginEraseFun(evt) {
     var e = window.event || evt;
     addEvents(mycanvas, 'mousedown', triggerEraser);
     addEvents(mycanvas, 'mouseup', EndTriggerEraser);
     addEvents(mycanvas, 'mousemove', clearArea);
     //删除其他按钮的三个事件
     delEventListLine();
     .......
 }
 /*  删除给按钮'线'添加的事件  */
 function delEventListLine() {
     delEvents(mycanvas, 'mousedown', triggerDrawLine);
     .......
 }

　　这样也就解决了一个事件触发多个处理程序的问题。但是这样写会有大量的冗余的代码。自己感觉也不好，或许会有更好的办法。

　　多多看看别人的代码能学习到解题思路，解决方法等。我看了别人的代码是这么写的:

 /*  画直线的函数  */
 function line() {
     mycanvas.onmousedown = function(evt) {
        // 代码
　　　　　　flag = 1;
     }
     mycanvas.onmouseup = function(evt) {
       //  代码
　　　　　　flag = 0;
     }
     mycanvas.onmousemove = function(evt) {
       //  代码
　　　　　　if (flag) {}
     }
     mycanvas.onmouseout = null;
 }

　　利用DOM0级添加事件只能有一个事件处理程序的特点，点击不同功能的按钮就调用相应的函数，通过覆盖前面的onmousedown,onmouseup, onmousemove事件属性来添加事件。(如画线的功能,调用line()函数)，这样会减少很多的冗余代码，不需要的事件属性可设为null，以备下次使用。

　　思考二

　　　　　在实现画线功能的过程中，发现了一个问题。就是在onmousedown, 且onmousemove时，鼠标跑到了外面抬起了你按下的鼠标键，那么当你再次回到画布时，还是会接着画，算是一个小BUG。因为你只有在画布中抬起鼠标时，flag值才变为0. 所以解决的办法是在onmouseout()中将flag变为0就OK了。

　　　　　顺便提一下在制作“许愿墙”项目中也遇到类似的问题。元素鼠标抬起的时候代码是这样:

$(dragObj).mouseup(function() {  $(this).css('opacity', '1');  });

　　　　　导致的问题是当我拖着元素（愿望贴）移动，到达了愿望贴不允许出去的区域，但是鼠标是可接着移动的。鼠标离开了愿望贴，再抬起来。却并没有透明度变为1（如图），还是半透明状态。因此我做了改进:

$(dragObj).mouseup(function() {
    $(this).css('opacity', '1');
}).mouseleave(function() {
    $(this).css('opacity', '1');
    move = false;
});

　　　　 增加了mouseleave()事件，一旦移出元素，就让透明度变为1且不允许拖动了。比较好的解决了提出的问题。

　　总结

　　　　 虽然这些不算是很大的问题，但是在做的时候，确实还是遇到了坎，也花费了时间去思考，为什么会这样，以及如何可以做到更好。或许对于别人来说这简直就是This is a piece of cake. 但是对我说却是意义非凡，因为万丈高楼平地起。