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

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

一、铅笔选择三种粗细

1.问题描述

  现在铅笔只有一种默认粗细可选，也就是width=1;现在要加两种粗细，分别是width=4;width=7;

2. 思路分析

  这个相对来说有一定难度，可分为两个步骤：第一步是鼠标画时，展现出三种粗细；

                                          第二步是点阵笔画时，展现出三种粗细；

3. 开工

  现在做成了，添加三支笔，都能写的模式，如下：

相关代码如下：

   <section id="tool-box" class="tool-box"style="background:#e3e3e5;">

       <canvas id="image-icon" width="50"height="40" title="图片"></canvas >

        <canvas id="drag-last-path"width="50" height="40" title="移动"style="display:none;"></canvas>

       <canvas id="pencil-icon1"width="50" height="40" title="铅笔1"></canvas>

        <canvas id="pencil-icon2"width="50" height="40" title="铅笔2"></canvas>

        <canvas id="pencil-icon3"width="50" height="40" title="铅笔3"></canvas>

       <canvas id="colors" width="50"height="40" title="颜色"></canvas>

       <canvas id="colors" width="50"height="40" title="颜色"></canvas>

       <canvas id="eraser-icon" width="50"height="40" title="橡皮擦"style="display:none;"></canvas>

       <canvas id="line" width="50"height="40" title="直线"></canvas>

       <canvas id="arrow" width="50"height="40" title="箭头"></canvas>

       <canvas id="arc" width="50" height="40"title="圆形"></canvas>

       <canvas id="rectangle" width="50"height="40" title="矩形"></canvas>

       <!--

       <canvas id="br" width="60"height="60"></canvas>

       <!--以下暂不显示-->

       <canvas id="text-icon" width="60" height="45"title="文本"></canvas>

       <canvas id="marker-icon" width="60"height="45" title="记号笔"></canvas>

       <canvas id="drag-all-paths" width="60"height="45"></canvas>

       <canvas id="quadratic-curve" width="60"height="45" title="记号笔"></canvas>

       <canvas id="bezier-curve" width="60"height="45" title="记号笔"></canvas>

       <canvas id="clean" width="60"height="60" style="display:none;"></canvas>

</section>

加了三个decoratePencil，

        function decoratePencil1() {//铅笔1           

                          var context =getContext("pencil-icon1"),

                          image = new Image;

            image.onload = function() {

                context.drawImage(image, 0, 0,40, 40),

                bindEvent(context,"Pencil")

            },

            image.src ="/static/img/pencil.png";

        }

        function decoratePencil2() {//铅笔2           

                          var context =getContext("pencil-icon2"),

                          image = new Image;

            image.onload = function() {

                context.drawImage(image, 0, 0,40, 40),

                bindEvent(context,"Pencil")

            },

            image.src ="/static/img/pencil.png";

        }

        function decoratePencil3() {//铅笔3           

                          var context =getContext("pencil-icon3"),

                          image = new Image;

            image.onload = function() {

                context.drawImage(image, 0, 0,40, 40),

                bindEvent(context,"Pencil")

            },

            image.src ="/static/img/pencil.png";

        }

另外加了三个调用decoratePencil的代码如下：

但控制粗细的代码还集中到一起，如下：

                  line: 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}))

                  },

下一步就是将它们分开！

2016年12月30日星期五