第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日
- 第48篇白板修复之铅笔选择三种粗细(二)
- 第49篇白板修复之铅笔选择三种粗细(三)
- 第47篇白板修复之铅笔选择三种粗细(一)
- 第50篇铅笔选择三种粗细(四)之样式及用按钮实现
- 第51篇铅笔选择三种粗细(五)之图片实现及定住其它按钮线条 周二
- 第45篇 白板bug修复(二)之选择颜色后框不消失
- 第44篇白板bug修复(一)
- 第53篇铅笔轨迹的撤销(二)之撤销后笔迹的同步
- 第7篇白板之图片旋转标记做成箭头(三)及quadraticCurveTo
- 第6篇白板之图片旋转标记做成箭头(二)
- 第63篇一对多之学生端修改私有白板并保存(二)
- 第41篇白板同步延迟问题(三)
- 第46篇白板修复之移动按钮拿掉及橡皮擦可选颜色
- 第40篇白板同步延迟问题(二)
- 第64篇一对多之学生端修改私有白板并保存(三)及私有白板传到老师端
- 第53篇一对多实现之学生白板传图片到服务器(三)及array_pad
- 第59篇老师端私有白板展示(二)老师端私有白板列表显示及列表图片上传到白板 周二
- 第55篇一对多实现之私有白板向老师端传图片数据(二)及array_reduce
- 360手机权限开启方法
- spring 事务属性的种类
- 项目优化之——加载
- 栈和堆的区别
- 时间限制(烽火戏诸侯)
- 第48篇白板修复之铅笔选择三种粗细(二)
- 61. Rotate List
- redis集群实现(八)redis+twemproxy集群
- SpringMVC入门(一)
- iOS开发归档存储
- fitsSystemWindows实践
- 应用8255A控制LED小灯开闭(附代码注释)
- 共享经济向共产经济转变
- 【CSS基础 】动画animation