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

原创 2017年01月03日 23:16:02

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

一、换成图片

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)

                                   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字 银牌

版权声明:本文为博主原创文章,未经博主允许不得转载。

第50篇铅笔选择三种粗细(四)之样式及用按钮实现

关键词:铅笔选择三种粗细之样式, 铅笔选择三种粗细用按钮实现 一、铅笔选择三种粗细(四)之样式 1 现在样式如下: 需要做的几点如下: a.使其只针对铅笔 b.改成图片 c.只...
  • SanBaDao
  • SanBaDao
  • 2017年01月03日 20:22
  • 266

canvas lineWidth为1时线条粗细和颜色

今天在使用html5的canvas时碰到了一个问题
  • hansuiqingsong
  • hansuiqingsong
  • 2014年10月13日 21:45
  • 3328

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

关键词:铅笔选择三种粗细 一、铅笔选择三种粗细 1.问题描述   现在铅笔只有一种默认粗细可选,也就是width=1;现在要加两种粗细,分别是width=4;width=7; 2. 思路分...
  • SanBaDao
  • SanBaDao
  • 2017年01月01日 15:06
  • 226

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

关键词:铅笔选择三种粗细 一、铅笔选择三种粗细(二) 1 现在经过调试,三种粗细都能出来,代码如下: 主要针对pencilHandler函数进行了处理,如下: pencilHandler1...
  • SanBaDao
  • SanBaDao
  • 2017年01月01日 17:22
  • 174

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

关键词:铅笔选择三种粗细 一、铅笔选择三种粗细(三) 1 现在经过调试,三种粗细都能出来,代码如下: 2. cache.isPencil从哪里来的? 下午要从前面打日志,看看它是怎么来的?...
  • SanBaDao
  • SanBaDao
  • 2017年01月03日 11:57
  • 388

MFC中通过按钮实现选择图片

MFC对话框中通过按钮实现选择图片
  • yongjiankuang
  • yongjiankuang
  • 2017年02月24日 21:53
  • 322

drawRect画矩形框bug:四边线条粗细不一致

下面是一个普通的矩形框的画法,画出来后,会发现,矩形框,四条线有粗有细。这是android的一个bug,我们没办法解决,只能规避。...
  • qq_31852701
  • qq_31852701
  • 2016年11月08日 16:36
  • 1204

table 表格细线条实现方式

第一种方式: 推荐使用这种,兼容性好 .define-table{ border-collapse:collapse; border-spacing:0; ...
  • NFA_YY
  • NFA_YY
  • 2017年07月13日 18:23
  • 595

原 android 涂鸦(清屏,画笔,粗细,保存)以及canvas源码学习

原 android 涂鸦(清屏,画笔,粗细,保存)以及canvas源码学习 发表于2年前(2013-04-16 18:38) 阅读(6070) | 评论(9) 29人收藏此文章, 我要收藏 ...
  • Android_devT
  • Android_devT
  • 2015年04月11日 09:50
  • 1041

设计模式读书笔记-----策略模式

首先我们需要知道策略模式与状态模式是如此的相似,就犹如一对双胞胎一样。只不过状态模式是通过改变对象内部的状态来帮助对象控制自己的行为,而策略模式则是围绕可以互换的算法来创建成功业务的。两者都可用于解决...
  • gao1440156051
  • gao1440156051
  • 2016年09月08日 17:57
  • 227
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第51篇铅笔选择三种粗细(五)之图片实现及定住其它按钮线条 周二
举报原因:
原因补充:

(最多只允许输入30个字)