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

最新推荐文章于 2023-08-29 16:08:42 发布

编个球编个大气球

最新推荐文章于 2023-08-29 16:08:42 发布

阅读量567

点赞数 1

分类专栏：铅笔选择三种粗细文章标签：铅笔选择三种粗细

本文链接：https://blog.csdn.net/SanBaDao/article/details/53967112

版权

铅笔选择三种粗细专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

一、铅笔选择三种粗细（二）

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;

}

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

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日