第44篇白板bug修复（一）

关键词：画矩形的线不是实线,选择颜色后框不消失

一、白板bug修复

1. 画矩形的线不是实线----------widget.min.js

 先看画圆形修改粗细的代码，如下：

                  arc:function(context, point, options) {

                          if(options&& options[0] <=1 ){

                                   options[0]= 1.2;

                          }

                          context.beginPath(),context.arc(point[0], point[1], Math.abs(point[2]), 0, 2*Math.PI, point[4]), this.handleOptions(context, options ||this.getOptions({lineWidth:1.2}))

                  },

现在改矩形代码，没改之前如下：

    rect: function(context,point, options) {

                      this.handleOptions(context,options, !0), context.strokeRect(point[0], point[1], point[2], point[3]),context.fillRect(point[0], point[1], point[2], point[3])

             },

修改后如下：

             rect:function(context, point, options) {

                      if(options&& options[0] <=1 ){

                               options[0]= 1.3;

                      }

                      this.handleOptions(context,options  || this.getOptions({lineWidth:1.2}),!0), context.strokeRect(point[0], point[1], point[2], point[3]),context.fillRect(point[0], point[1], point[2], point[3])

             },

注：this.getOptions({lineWidth:1.2})是画矩形过程中，线条的粗细。

    options[0] = 1.3是画完矩形，矩形大小确定后线条的粗细。

2. 选择颜色时当不选择新颜色，直接点确定，右边的框线不自动消失

找到相关代码如下：------------widget.html

    <!-- colors selector-->

    <sectionid="colors-container" class="context-popupcolors-container">

        <divclass="input-div">

            <label for="stroke-style">当前框线颜色:</label>

            <inputid="stroke-style" type="color"value="#6c96c8">

        </div>

       

        <divclass="input-div" style="display:none;">

            <labelfor="fill-style">填充颜色:</label>

            <inputid="fill-style" type="color" value="#ffffff">

        </div>

       

        <divid="colors-done" class="btn-007"style="display:none;">确定</div>

    </section>

颜色控制代码如下：

                               functiondecorateColors() {//颜色--------------------------完成

 

                       

                      varcontext = getContext("colors"),

                      image =new Image;

            image.onload =function() {

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

               

            },

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

                      varcolorsContainer = find("colors-container"),

                               strokeStyleText = find("stroke-style"),

                               fillStyleText= find("fill-style"),

                               btnColorsDone= find("colors-done"),

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

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

                               hideContainers(),

                               colorsContainer.style.display= "block",

                               colorsContainer.style.top= canvas.offsetTop + 1 + "px",

                               colorsContainer.style.left= canvas.offsetLeft + canvas.clientWidth + "px",

                               strokeStyleText.focus(),

strokeStyleText.click()

                      }),

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

                               colorsContainer.style.display= "none",

                               strokeStyle= strokeStyleText.value,

                               fillStyle= "rgba(255,255,255,0)"

                      }),

                       addEvent(strokeStyleText,"change",function(){

                                btnColorsDone.click();

                      })

             }

2016年12月27日星期二