【第22期】观点:IT 行业加班,到底有没有价值?

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

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

相关文章推荐

Highcharts制作图片表设置线条颜色和粗细

http://www.ihome027.com/shtml201208/blog_root_134449882368.html Chart:图表区选项 Ch...

Highcharts制作图片表设置线条颜色和粗细

http://www.ihome027.com/shtml201208/blog_root_134449882368.html <h4 style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margi...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

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

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

JFreeChart 线条粗细设置

一、实现前效果          二、实现后效果  <img src="http://dl2.iteye.com/uploa

如何实现点击回车自动提交(当按钮为图片的时候)

&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt; &lt;%@taglib prefix="c"...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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