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

原创 2017年01月03日 11:57:26

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

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

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

2. cache.isPencil从哪里来的?

下午要从前面打日志,看看它是怎么来的?

二、新发现

1. 以下是默认设置:默认颜色,字体大小等

三、新思路

  我现在找不到为什么会出现一个ispencil,即使我把ispencil删了,仍然出现,所以接下来我想到一个办法,就是:我把所有画直线的line,都改成line_qhz,我看行不行,如果行的话,可能就为画笔找到了出路。

四、重新做笔的粗细

发现如果单控制笔的粗细的话,要改的东西太多,现在的思路是怎么简单怎么来,接下来,这样做:

 把之前,给线条加宽度的代码拿过来,调调用一下,相关代码如下:

Widget.html中相关代码如下:

<canvas id="line-width" width="40"height="40"></canvas>

    <!-- line-width -->

    <sectionid="line-width-container" class="context-popup">

        <labelfor="line-width-text">Line Width:</label>

        <inputid="line-width-text" class="line-width-text"type="text" value="2">

       

        <div id="line-width-done"class="btn-007">Done</div>

    </section>

Widget.js中如下:

        functiondecorateLineWidth() {

            var context =getContext('line-width');

 

           tempStrokeTheLine(context, 2, 5, 15, 35, 15);

           tempStrokeTheLine(context, 3, 5, 20, 35, 20);

           tempStrokeTheLine(context, 4, 5, 26, 35, 26);

 

            context.fillStyle= 'Gray';

            context.font ='9px Verdana';

           context.fillText('Line', 8, 12);

           context.fillText('Width', 6, 38);

 

            var lineWidthContainer =find('line-width-container'),

                lineWidthText= find('line-width-text'),

               btnLineWidthDone = find('line-width-done'),

                h1 =document.getElementsByTagName('h1')[0],

                canvas = context.canvas;

 

            addEvent(canvas,'click', function() {

               hideContainers();

 

               lineWidthContainer.style.display = 'block';

               lineWidthContainer.style.top = (canvas.offsetTop + 1) + 'px';

               lineWidthContainer.style.left = (canvas.offsetLeft + canvas.clientWidth)+ 'px';

 

               lineWidthText.focus();

            });

 

           addEvent(btnLineWidthDone, 'click', function() {

               lineWidthContainer.style.display = 'none';

                lineWidth =lineWidthText.value;

            });

        }

Widget.min.js中如下:

 

                  functiondecorateLineWidth() {

                          varcontext = getContext("line-width");

                          tempStrokeTheLine(context,2, 5, 15, 35, 15), tempStrokeTheLine(context, 3, 5, 20, 35, 20),tempStrokeTheLine(context, 4, 5, 26, 35, 26), context.fillStyle ="Gray", context.font = "9px Verdana",context.fillText("Line", 8, 12), context.fillText("Width",6, 38);

                          varlineWidthContainer = find("line-width-container"),

                                   lineWidthText= find("line-width-text"),

                                   btnLineWidthDone= find("line-width-done"),

                                   canvas= (document.getElementsByTagName("h1")[0], context.canvas);

                          addEvent(canvas,"click", function() {

                                   hideContainers(),lineWidthContainer.style.display = "block",lineWidthContainer.style.top = canvas.offsetTop + 1 + "px",lineWidthContainer.style.left = canvas.offsetLeft + canvas.clientWidth +"px", lineWidthText.focus()

                          }),addEvent(btnLineWidthDone, "click", function() {

                                   lineWidthContainer.style.display= "none", lineWidth = lineWidthText.value

                          })

                  }

 

注:在decorateLineWidth()中加一行,就可以了用了,如下:

 

 

 

2017年1月1日星期日

版权声明:本文为博主原创文章,未经博主允许不得转载。

第50篇铅笔选择三种粗细(四)之样式及用按钮实现

关键词:铅笔选择三种粗细之样式, 铅笔选择三种粗细用按钮实现 一、铅笔选择三种粗细(四)之样式 1 现在样式如下: 需要做的几点如下: a.使其只针对铅笔 b.改成图片 c.只...

第45篇 白板bug修复(二)之选择颜色后框不消失

关键词:选择颜色后框不消失 一、白板bug修复 1. 选择颜色时当不选择新颜色,直接点确定,右边的“当前框线颜色”不自动消失 找到相关代码如下:------------widget.htm...

第44篇白板bug修复(一)

关键词:画矩形的线不是实线,选择颜色后框不消失 一、白板bug修复 1. 画矩形的线不是实线----------widget.min.js  先看画圆形修改粗细的代码,如下:             ...

第56篇一对多实现之私有白板向老师端传图片数据(三)仿制传图片dataURL及array_replace及array_replace_recursive

关键词:一对多实现, 私有白板向老师端传图片数据, 仿制传图片dataURL, 仿制传图片dataURL, array_replace,array_replace_recursive 一、私有白板向...

第60篇一对多之学生端私有白板图片保存及学生传数组过去不再单张传周三

关键词:学生端私有白板图片保存,学生传数组过去不再单张传 一、私有白板向老师端传图片数据 1.1 服务器运行平台 老师端:https://localhost:9101/demos/index.h...

第64篇一对多之学生端修改私有白板并保存(三)及私有白板传到老师端

关键词:学生端修改私有白板并保存, 私有白板传到老师端 一、私有白板向老师端传图片数据 1.1 本地服务器运行平台 老师端:https://localhost:9101/demos/index...

第53篇一对多实现之学生白板传图片到服务器(三)及array_pad

关键词:一对多实现, 学生白板传图片到服务器,frame研究, array_pad 一、一对多实现 1.1 运行平台 老师端:https://123.57.206.36:9100/demos/...

第41篇白板同步延迟问题(三)

关键词:白板同步延迟问题 一、把同步时间1000改成500,看看有没有助于减少延迟 1.1 相关代码 connection.onmessage = appendDIV;        co...

第7篇白板之图片旋转标记做成箭头(三)及quadraticCurveTo

关键词:图片旋转标记做成箭头, quadraticCurveTo 一、图片旋转标记做成箭头 1.1尝试加一张图片上去   现在图片加上去了,不起作用。之前的红点是起作用的,猜测是:红点加入了点击...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第49篇白板修复之铅笔选择三种粗细(三)
举报原因:
原因补充:

(最多只允许输入30个字)