二刀流的博客

对于编程,一定要刀刀见血,不能流俗!

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

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

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

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日星期日

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/SanBaDao/article/details/53993153
文章标签: 铅笔选择三种粗细
个人分类: 铅笔选择三种粗细
想对作者说点什么? 我来说一句

adnroid白板实现

2014年08月30日 1.01MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭