第51篇铅笔选择三种粗细（五）之图片实现及定住其它按钮线条 周二

关键词：把三种笔粗细换成三个图片,
把其它按钮线条粗细定住

一、换成图片

1. 把三种笔粗细换成三个图片

  实现很简单，只要之前的思路走通了，之前用的是按钮形式（实际上是div），改成图片很简单，修改后的代码如下：

   <section id="line-width-container" class="context-popup">

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

<imgsrc="/static/img/LineWidthLittle.png">

</div>

        <divid="line-width-done2" class="btn-007">

<imgsrc="/static/img/LineWidthZhong.png">

</div>

        <divid="line-width-done3" class="btn-007">

<imgsrc="/static/img/LineWidthBig.png">

</div>

   </section>

效果如下：



二、把其它按钮线条粗细定住

目前问题：现在铅笔的三个粗细是可以随机应变了，但铅笔粗细变的同时，像画直线，箭头，圆的线条粗细也跟着就了，这样不符合要求，我要定死它们，不让它们跟着变。

修改后的代码如下：

                  function bindEvent(context,shape) {

                          "Pencil" !==shape && "Marker" !== shape || (lineCap = lineJoin ="round"), addEvent(context.canvas, "click", function() {

                                   if(textHandler.text.length && textHandler.appendPoints(),"Text" === shape ? textHandler.onShapeSelected() :textHandler.onShapeUnSelected(), "Pencil" !== shape &&"Marker" !== shape || (lineCap = lineJoin = "round"),dragHelper.global.startingIndex
= 0, setSelection(this, shape),"drag-last-path" === this.id ? (find("copy-last").checked =!0, find("copy-all").checked = !1) : "drag-all-paths" ===this.id && (find("copy-all").checked = !0,find("copy-last").checked = !1), "image-icon" === this.id){

                                            varselector = new FileSelector;

                                            selector.selectSingleFile(function(file){

                                                     if(file) {

                                                             varreader = new FileReader;

                                                             reader.onload= function(event) {

                                                                      varimage = new Image;

                                                                      image.onload= function() {

                                                                               varindex = imageHandler.images.length;

                                                                               imageHandler.lastImageURL= image.src, imageHandler.lastImageIndex = index, imageHandler.images.push(image),drawHelper.image(tempContext,[imageHandler.lastImageURL, 200, 20, 400,
400*(image.height/image.width),imageHandler.lastImageIndex]),

                                                                              points[points.length]= ["image", ["", 200, 20, 400,400*(image.height/image.width),imageHandler.lastImageIndex],drawHelper.getOptions()],

                                                                               find("drag-last-path").click()

                                                                      },image.src = event.target.result

                                                             },reader.readAsDataURL(file)

                                                     }

                                            })

                                   }

                              if ("drag-last-path" ===this.id){

                                  var rotationLeftImg= new Image;

                    rotationLeftImg.src ="/static/img/left.png";    

                                       dragHelper.global.rotationLeftImg =rotationLeftImg;

                                       var rotationRightImg= new Image;

                    rotationRightImg.src ="/static/img/right.png";

                                       dragHelper.global.rotationRightImg =rotationRightImg;

                                       var confirmImg= new Image;

                    confirmImg.src ="/static/img/complete.png"; 

                                       dragHelper.global.confirmImg = confirmImg;

                              }

                                   //"pencil-icon"=== this.id || "eraser-icon" === this.id || "marker-icon"=== this.id ? (cache.lineCap = lineCap, cache.lineJoin = lineJoin, lineCap =lineJoin = "round") : cache.lineCap && cache.lineJoin&& (lineCap = cache.lineCap,
lineJoin = cache.lineJoin),"eraser-icon" === this.id ? (cache.strokeStyle = strokeStyle,cache.fillStyle = fillStyle, cache.lineWidth = lineWidth, strokeStyle ="White", fillStyle = "White", lineWidth = 10) :cache.strokeStyle && cache.fillStyle && "undefined"
!=typeof cache.lineWidth && (strokeStyle = cache.strokeStyle, fillStyle =cache.fillStyle, lineWidth = cache.lineWidth)

                              
4000
     console.log('cache-->',cache);

                            "pencil-icon" === this.id ||"eraser-icon" === this.id || "marker-icon" === this.id ?(cache.lineCap = lineCap, cache.lineJoin = lineJoin, lineCap = lineJoin ="round") : cache.lineCap && cache.lineJoin &&(lineCap = cache.lineCap,
lineJoin = cache.lineJoin),

                             "eraser-icon" === this.id ?markerStrokeStyle = "white": markerStrokeStyle = "#FF7373",

                             "line-icon" === this.id ? (cache.lineCap =lineCap, cache.lineJoin = lineJoin, lineCap = lineJoin ="round",lineWidth = "2") : cache.lineCap &&cache.lineJoin && (lineCap = cache.lineCap,
lineJoin =cache.lineJoin,lineWidth = "2")

 

                          })

                  }

注：只在bindEvent函数里面增加了上述的红色部分，对线条进行了限制，因为线条排在铅笔下面，中断了，那种粗细的延续，问题得到临时解决。

经过测试发现，即使线条与箭头的位置换了，还是能定住粗细的变化。看来，这个方法是可行的。

2017年1月3日星期二
698字 银牌