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

来源：互联网发布：软件使用合同印花税编辑：程序博客网时间：2024/04/29 04:08

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

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

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>

拿掉后，如下：

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

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

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

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日星期四

1 0