第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.只...

第51篇一对多实现之学生端去遮罩层及往服务器上传图片(一)

关键词:一对多实现, 去掉学生端遮罩层让其能写, 学生端鼠标圆形变箭头, 学生写的要保存成一张张图片传服务器 一、一对多实现 1.1 运行平台 老师端:https://123.57.206...

android AppCompatEditText 样式(线条粗细等)修改

样式定义com.android.support:appcompat-v7库中,样式主要的定义在$SDK_HOME/extras/android/v7/appcompat/res/values/them...

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

下面是一个普通的矩形框的画法,画出来后,会发现,矩形框,四条线有粗有细。这是android的一个bug,我们没办法解决,只能规避。

关于.NET报表中图表控件线条颜色和粗细设置

在图表控制显示图形为线条时,由于默认样式线条太粗,,修改方法如下: 1,在图表控件右键,选择属性 2,在属性框,选择数据 3,在"值"这一栏点击编辑 4,在编辑框中,选择外观,然后...

MindManager中主题间距/线条粗细的灵活调整

在MindManager中,主题和线条是思维导图的基本元素,只有通过它们才能将要表达的思想呈现、并联系起来。因此,关于它们的属性设置就会多一点,如颜色、宽度、位置等。而调整主题之间的距离及线条的粗细,...

第55篇铅笔三个按钮自动出来处理(一)

关键词:铅笔三个按钮自动出来处理 一、铅笔三个按钮自动出来处理 1. 问题描述   现在铅笔的三个粗细按钮加上去了,但有一个问题是,当选图片时,图片选上之后,那三个按钮自己跳出来了,还有一个问题...

C# WinForm下DataGridView单选按钮列和支持三种选择状态的复选框列的实现

在C# WinForm下做过项目的朋友都知道,其中的DataGridView控件默认只支持DataGridViewButtonColumn、DataGridViewCheckBoxColumn、Dat...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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