第46篇白板修复之移动按钮拿掉及橡皮擦可选颜色

关键词：移动按钮拿掉，橡皮擦可选颜色

一、插入图片后，再点击移动按钮，出现一个复制的当前白板

1.问题描述

现在移动图片时，它会复制整个画板进行移动。

2.找相关代码

 图片移动代码如下：

                  functiondecorateDragLastPath() {//移动

                          var point, i,

                                    x = 10,

                                   y= 6,

                                   line= "line",

                                   points= [

                                            [line,x, y, x + 5, y + 27],

                                            [line,x, y, x + 18, y + 19],

                                            [line,x + 17, y + 19, x + 9, y + 20],

                                            [line,x + 9, y + 20, x + 5, y + 27],

                                            [line,x + 16, y + 22, x + 16, y + 31],

                                            [line,x + 12, y + 27, x + 20, y + 27]

                                   ],

                                   length= points.length;

                          for(i = 0; i < length; i++) point = points[i], "line" === point[0];

                         

                          varcontext = getContext("drag-last-path"),

                          image= new Image;

           image.onload = function() {

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

                bindEvent(context,"DragLastPath")

           },

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

                          }

注：这段代码不但移动图像，而且移动线条。以上几行标红的代码是原版画图标 用的，现在用图片代替了，所以，没什么用了。

新需求是移动按钮拿掉，修改代码如下：

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

</canvas>

拿掉后，如下：

二、记号笔加上并且可以换颜色

1. 记号笔加上之后，如下：

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

注：加上之后，现在笔还不能调颜色，修改后代码如下：

       function decorateMarker() { //记号笔---可选颜色

                      functionhexToRGBA(h, alpha) {

                               return"rgba(" + hexToRGB(h).join(",") + "," + alpha +")"

                      }

                      functiondoneHandler() {

                               markerContainer.style.display= "none",

                               markerLineWidth= strokeStyleText.value,

                               markerStrokeStyle= hexToRGBA(fillStyleText.value, alpha)

                      }

                      varcolors = [

                               ["FFFFFF","006600", "000099", "CC0000","8C4600"],

                               ["CCCCCC","00CC00", "6633CC", "FF0000","B28500"],

                               ["666666","66FFB2", "006DD9", "FF7373","FF9933"],

                               ["333333","26FF26", "6699FF", "CC33FF","FFCC99"],

                               ["000000","CCFF99", "BFDFFF", "FFBFBF", "FFFF33"]

                      ],

                               context =getContext("marker-icon"),

           image= new Image;

            image.onload = function() {

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

               // bindEvent(context,"Marker")

            },

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

                               bindEvent(context,"Marker");

                      varmarkerContainer = find("marker-container"),

                               strokeStyleText= find("marker-stroke-style"),

                               markerColorsList= find("marker-colors-list"),

                               fillStyleText= find("marker-fill-style"),

                               btnMarkerDone= find("marker-done"),

                               canvas= context.canvas,

                               alpha= .2;

                      markerStrokeStyle= hexToRGBA(fillStyleText.value, alpha);

                      var html= "";

                      colors.forEach(function(colorRow){

                               varrow = "<tr>";

                               colorRow.forEach(function(color){

                                       row+= '<td style="background-color:#' + color + '" data-color="'+ color + '"></td>'

                               }),row += "</tr>", html += row

                      }),markerColorsList.innerHTML = html,Array.prototype.slice.call(markerColorsList.getElementsByTagName("td")).forEach(function(td){

                               addEvent(td,"mouseover", function() {

                                       varelColor = td.getAttribute("data-color");

                                       fillStyleText.value= elColor

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

                                       varelColor = td.getAttribute("data-color");

                                       fillStyleText.value= elColor, doneHandler()

                               })

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

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

                      }),addEvent(btnMarkerDone, "click", doneHandler)

             }

注：这样一来，记号笔就变成了橡皮擦，并且可选颜色。     

2016年12月29日星期四