第48篇白板修复之铅笔选择三种粗细(二)

来源:互联网 发布:搞笑网络段子精选 编辑:程序博客网 时间:2024/04/26 23:16

关键词:铅笔选择三种粗细

一、铅笔选择三种粗细(二)

1 现在经过调试,三种粗细都能出来,代码如下:

主要针对pencilHandler函数进行了处理,如下:

pencilHandler1 = {

                          ismousedown:!1,

                          prevX:0,

                          prevY:0,

                          mousedown:function(e) {

                                   find("pencil-icon3").click();

                                   varx = e.pageX - canvas.offsetLeft,

                                            y= e.pageY - canvas.offsetTop,

                                            t= this;

                                   t.prevX= x,

                                    t.prevY = y,

                                     t.ismousedown = !0,

                                      tempContext.lineCap = "round",

                                       drawHelper.line(tempContext,

                                             [t.prevX, t.prevY, x, y]),

                                              points[points.length] = ["pencil3",[t.prevX, t.prevY, x, y], drawHelper.getOptions()], t.prevX = x, t.prevY = y;

                                              //console.log("line",line);                  

                          },

                          mouseup:function(e) {

                                   this.ismousedown= !1

                          },

                         

                          mousemove:function(e) {

                                   varx = e.pageX - canvas.offsetLeft,

                                            y= e.pageY - canvas.offsetTop,

                                            t= this;

                                   t.ismousedown&& (tempContext.lineCap = "round",drawHelper.line(tempContext, [t.prevX, t.prevY, x, y]), points[points.length] =["pencil3", [t.prevX, t.prevY, x, y], drawHelper.getOptions()],t.prevX = x, t.prevY = y)

                          }

                  },

                 

   pencilHandler2 = {

                          ismousedown:!1,

                          prevX:0,

                          prevY:0,

                          mousedown:function(e) {

                                   find("pencil-icon2").click();

                                   varx = e.pageX - canvas.offsetLeft,

                                            y= e.pageY - canvas.offsetTop,

                                            t= this;

                                   t.prevX= x,

                                    t.prevY = y,

                                     t.ismousedown = !0,

                                      tempContext.lineCap = "round",

                                       drawHelper.line(tempContext,

                                             [t.prevX, t.prevY, x, y]),

                                              points[points.length] = ["pencil2",[t.prevX, t.prevY, x, y], drawHelper.getOptions()], t.prevX = x, t.prevY = y;

                                              //console.log("line",line);                  

                          },

                          mouseup:function(e) {

                                   this.ismousedown= !1

                          },

                          

                          mousemove:function(e) {

                                   varx = e.pageX - canvas.offsetLeft,

                                            y= e.pageY - canvas.offsetTop,

                                            t= this;

                                   t.ismousedown&& (tempContext.lineCap = "round",drawHelper.line(tempContext, [t.prevX, t.prevY, x, y]), points[points.length] =["pencil2", [t.prevX, t.prevY, x, y], drawHelper.getOptions()],t.prevX = x, t.prevY = y)

                          }

                  },

 

   pencilHandler3 = {

                          ismousedown:!1,

                          prevX:0,

                          prevY:0,

                          mousedown:function(e) {

                                   find("pencil-icon3").click();

                                   varx = e.pageX - canvas.offsetLeft,

                                            y= e.pageY - canvas.offsetTop,

                                            t= this;

                                   t.prevX= x,

                                    t.prevY = y,

                                     t.ismousedown = !0,

                                      tempContext.lineCap = "round",

                                       drawHelper.line(tempContext,

                                             [t.prevX, t.prevY, x, y]),

                                              points[points.length] = ["pencil3",[t.prevX, t.prevY, x, y], drawHelper.getOptions()], t.prevX = x, t.prevY = y;

                                              //console.log("line",line);                  

                          },

                          mouseup:function(e) {

                                   this.ismousedown= !1

                          },

                         

                          mousemove:function(e) {

                                    var x = e.pageX -canvas.offsetLeft,

                                            y= e.pageY - canvas.offsetTop,

                                            t= this;

                                   t.ismousedown&& (tempContext.lineCap = "round",drawHelper.line(tempContext, [t.prevX, t.prevY, x, y]), points[points.length] =["pencil3", [t.prevX, t.prevY, x, y], drawHelper.getOptions()],t.prevX = x, t.prevY = y)

                          }

                  },

又对粗细进行了分别设定如下:

           pencil1: function(context, point, options) {

                                   if(options&& options[0] <=1 ){

                                   options[0]= 1.3;

                          }

                          context.beginPath(),context.moveTo(point[0], point[1]), context.lineTo(point[2], point[3]),this.handleOptions(context, options|| this.getOptions({lineWidth:1.2}))

                  },

                 

                  pencil2:function(context, point, options) {

                                   if(options&& options[0] <=1 ){

                                   options[0]= 4;

                          }

                          context.beginPath(),context.moveTo(point[0], point[1]), context.lineTo(point[2], point[3]),this.handleOptions(context, options|| this.getOptions({lineWidth:4}))

                  },

                 

                  pencil3:function(context, point, options) {

                                   if(options&& options[0] <=1 ){

                                   options[0]= 7;

                          }

                          context.beginPath(),context.moveTo(point[0], point[1]), context.lineTo(point[2], point[3]),this.handleOptions(context, options|| this.getOptions({lineWidth:7}))

                  },

注:但目前的问题是,首选项成了限制,一直挂在首选项上,就是说只有第一支笔起作用,其它笔不起作用,下一步就是拿掉首选项。

2016年12月31日

1 0
原创粉丝点击