原生JS搭配canvas模式开发的调色盘代码实现
之前做了一版纯p版的，有同学反应加载速度太慢。无可否认，1w多个p能不慢么。做那个版本的用意在于好玩...
好了，同样废话不多说，这次先上图吧！
风格是学习的谷歌的，一眼就看得出来，由于ie不兼容input color，而且兼容input color的弹出框实在不敢恭维，所以才开始自己着手做。我想总有人问，为啥不用现成的控件！为了站的更高！好了，上代码。
#有同学会问为啥不放附件，要贴代码。没办法公司卡的比较死，附件下不下来。。。快哭了
[javascript] view plain copy
/**
* 调色盘
* create by j.y.du
*/
var du = this.du || {};
du.yue = this.du.yue || {};
du.yue.palettetop = function()
{
// vo
var _palettetop = this;
var _paletteutil = du.yue.paletteutil;
var _palettedom = new du.yue.palettedom();
var _paletteevent = new du.yue.paletteevent();
// datavo
var _start = false,_mode = 0,_classname = "my-palette";// mode:0-p模式 1-canvas模式
var _currentvo = {};// target:当前点击的input，rgb:当前颜色，hsv，hex
var _typelabel = "hex";
var _palettectx,_midshowctx,_huectx,_transparentctx,_bottomchangectx,_bottomdefineplusctx;
// dom
var _outp,_paletteoutp,_palettecirclep,_paletteinnp,_palettecanvas;
var _midoutp,_midshowcanvas;
var _midbaroutp,_midbarhueoutp,_midbarhuecirclep,_midbarhueeventp,_huecanvas;
var _midbartransoutp,_midbartranscirclep,_midbartranseventp,_transparentcanvas;
var _bottomoutp,_bottomlabelp,_bottomlabelspan,_bottomchangep,_bottomchangecanvas,_bottominputp,_bottomhexinput,_bottomrinput,_bottomginput,_bottombinput,_bottomainput;
var _bottomquickoutp,_bottomquickmodeloutp,_bottomdefineoutp,_bottomdefinepluscanvas;
// 三个球的移动对象
var _palettevo = {},_huevo = {},_transparentvo = {};
/**
* 初始化方法
*/
_init();
/**
* 对外方法
*/
object.defineproperties(this, {
debugdata : { writable : false, value : function(dataname) { return eval(dataname); } },
start : { writable : false, value : function(classname) { _start = true; classname && (_classname = classname); eval("_startmode_" + _mode).call(); } },
finish : { writable : false, value : function() { _start = false; } }
});
/**
* 内部方法
*/
// 初始化
function _init()
{
// 给doc绑定鼠标按下事件
document.addeventlistener("mousedown", function(){ _paletteevent.docmousedownevent.apply(this, [_start, _classname, _outp, _setcolor]); });
}
// 执行事件绑定方法
function _fire()
{
if(_currentvo.target)
{
_currentvo.target.setattribute("readonly", "readonly");
_currentvo.target.style["background-color"] = _currentvo.target.value;
_currentvo.target.style["text-indent"] = "-999px";
_paletteutil.event.fire(_currentvo.target, "change");
}
}
// 启动0模式
function _startmode_0()
{
// 组装弹框
eval("_packagedialogp_"+_mode).call();
// 初始化canvas
eval("_initcanvas_"+_mode).call();
// 绑定事件
eval("_bindevent_"+_mode).call();
}
// 组装弹框
function _packagedialogp_0()
{
_outp = _palettedom.getoutp();
// 顶部
_paletteoutp = _palettedom.getpaletteoutp();
_outp.appendchild(_paletteoutp);
// 色盘选择圆圈
_palettecirclep = _palettedom.getpalettecirclep();
_paletteoutp.appendchild(_palettecirclep);
// 色盘内框
_paletteinnp = _palettedom.getpaletteinnp();
_paletteoutp.appendchild(_paletteinnp);
// 色盘
_palettecanvas = _palettedom.getpalettecanvas();
_paletteinnp.appendchild(_palettecanvas);
// 中部
_midoutp = _palettedom.getmidoutp();
_outp.appendchild(_midoutp);
// 色卡
_midshowcanvas = _palettedom.getmidshowcanvas();
_midoutp.appendchild(_midshowcanvas);
// hue外框
_midbaroutp = _palettedom.getmidbaroutp();
_midoutp.appendchild(_midbaroutp);
// 彩虹外框
_midbarhueoutp = _palettedom.getmidbarhueoutp();
_midbaroutp.appendchild(_midbarhueoutp);
// 彩虹圆圈
_midbarhuecirclep = _palettedom.getmidbarcirclep();
_midbarhueoutp.appendchild(_midbarhuecirclep);
// 彩虹条外框包围
_midbarhueeventp = _palettedom.getmidbarhuep();
_midbarhueoutp.appendchild(_midbarhueeventp);
// 彩虹条
_huecanvas = _palettedom.getmidbarhuecanvas();
_midbarhueeventp.appendchild(_huecanvas);
// 透明度外框
_midbartransoutp = _palettedom.getmidbarhueoutp();
_midbaroutp.appendchild(_midbartransoutp);
// 透明度圆圈
_midbartranscirclep = _palettedom.getmidbarcirclep();
_midbartransoutp.appendchild(_midbartranscirclep);
// 透明条外框包围
_midbartranseventp = _palettedom.getmidbarhuep();
_midbartransoutp.appendchild(_midbartranseventp);
// 透明度条
_transparentcanvas = _palettedom.getmidbarhuecanvas();
_midbartranseventp.appendchild(_transparentcanvas);
// 底部
_bottomoutp = _palettedom.getbottomoutp();
_outp.appendchild(_bottomoutp);
// 输入信息外框
_bottominputp = _palettedom.getbottominputp();
_bottomoutp.appendchild(_bottominputp);
// hex框
_bottomhexinput = _palettedom.getbottomhexinput();
_bottominputp.appendchild(_bottomhexinput);
// rgb框
_bottomrinput = _palettedom.getbottomrgbinput();
_bottomginput = _palettedom.getbottomrgbinput();
_bottombinput = _palettedom.getbottomrgbinput();
_bottomainput = _palettedom.getbottomrgbinput();
// 单控
_bottomainput.setattribute("maxlength", "4");
// 切换标签
_bottomchangep = _palettedom.getbottomchangep();
_bottomoutp.appendchild(_bottomchangep);
// 切换canvas
_bottomchangecanvas = _palettedom.getbottomchangecanvas();
_bottomchangep.appendchild(_bottomchangecanvas);
// 文字显示和切换框
_bottomlabelp = _palettedom.getbottomlabelp();
_bottomoutp.appendchild(_bottomlabelp);
// 具体文字显示
_bottomlabelspan = _palettedom.getbottomlabelspan();
_bottomlabelp.appendchild(_bottomlabelspan);
// 快速颜色选择包裹
_bottomquickoutp = _palettedom.getbottomquickoutp();
_outp.appendchild(_bottomquickoutp);
// 模板色块包裹
_bottomquickmodeloutp = _palettedom.getbottomquickmodeloutp();
_bottomquickoutp.appendchild(_bottomquickmodeloutp);
// 模板色块
_createmodelps();
// 自定义色块包裹
_bottomdefineoutp = _palettedom.getbottomdefineoutp();
_bottomquickoutp.appendchild(_bottomdefineoutp);
// 加号
_bottomdefinepluscanvas = _palettedom.getbottomdefinepluscanvas();
_bottomdefineoutp.appendchild(_bottomdefinepluscanvas);
}
function _createmodelps()
{
var colors = ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#00bcd4","#009688","#4caf50",
"#8bc34a", "#cddc39","#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#9e9e9e","#607d8b"];
for(var a = 0;a<colors.length;a++)
{
var modelp = _palettedom.getbottomquickmodelp(colors[a]);
_bottomquickmodeloutp.appendchild(modelp);
// 绑定色块单击事件
modelp.addeventlistener("click", function(){ _paletteevent.modelpclickevent.apply(this, [_changebymodel]); });
}
}
// 初始化canvas
function _initcanvas_0()
{
if(!_palettecanvas.getcontext)
{
throw "your browser don't support canvas! so la-ji!";
return;
}
_palettectx = _palettecanvas.getcontext("2d");
_midshowctx = _midshowcanvas.getcontext("2d");
_huectx = _huecanvas.getcontext("2d");
_drawhue();
_transparentctx = _transparentcanvas.getcontext("2d");
_bottomchangectx = _bottomchangecanvas.getcontext("2d");
_drawchangenoback();
_bottomdefineplusctx = _bottomdefinepluscanvas.getcontext("2d");
_drawdefineplus();
}
// 绑定事件
function _bindevent_0()
{
_palettevo = {
eventdom : _paletteoutp,
callback : _selectbypalette
};
_huevo = {
eventdom : _midbarhueoutp,
callback : _selectbyhue
};
_transparentvo = {
eventdom : _midbartransoutp,
callback : _selectbytrans
};
// 最外框阻止冒泡
_outp.addeventlistener("mousedown", function(){ _paletteevent.outpmousedownevent.apply(this, [_palettevo, _huevo, _transparentvo]); });
// 阻止右键默认事件 需要直接绑定
_outp.oncontextmenu = function(){ return _paletteevent.outpcontextmenuevent.apply(this); };
// 色盘区域 单击，移动事件
_paletteoutp.addeventlistener("mousedown", function(){ _paletteevent.paletteoutpmousedownevent.apply(this, [_selectbypalette]); });
_midbarhueoutp.addeventlistener("mousedown", function(){ _paletteevent.midbarhueoutpmousedownevent.apply(this, [_selectbyhue]); });
_midbartransoutp.addeventlistener("mousedown", function(){ _paletteevent.midbartransoutpmousedownevent.apply(this, [_selectbytrans]); });
document.addeventlistener("mousemove", function(){ _paletteevent.docmousemoveevent.apply(this, [_palettevo, _huevo, _transparentvo]); });
document.addeventlistener("mouseup", function(){ _paletteevent.docmouseupevent.apply(this); });
// >> 切换事件
_bottomchangecanvas.addeventlistener("click", function(){ _paletteevent.bottomchangecanvasclickevent.apply(this, [_changebottomtype]); });
_bottomchangecanvas.addeventlistener("mouseenter", function(){ _paletteevent.bottomchangecanvasmouseenterevent.apply(this, [_drawchangehasback]); });
_bottomchangecanvas.addeventlistener("mouseleave", function(){ _paletteevent.bottomchangecanvasmouseleaveevent.apply(this, [_drawchangenoback]); });
// hex oninput事件
_bottomhexinput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });
_bottomrinput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });
_bottomginput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });
_bottombinput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });
_bottomainput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });
// 加号单击，添加自定义颜色
_bottomdefinepluscanvas.addeventlistener("click", function(){ _paletteevent.bottomdefinepluscanvasclickevent.apply(this, [_adduserdefinedcolor]); });
}
// 设置颜色
function _setcolor()
{
_currentvo["target"] = this;
_setcolordetail(this.value);
_setbottominfo();
}
// 设置颜色详细
function _setcolordetail(value)
{
_getcurrentvo(value);
_setpalette();
_setpaletteposition();
_setmidshowcolor();
_setmidhueposition();
_setmidtransposition();
}
// 获取当前颜色rgb,hex,hsv和活动dom
function _getcurrentvo(value)
{
var rgb = [];
if(value && value.touppercase().substring(0,1) == "#")
{
rgb = _paletteutil.color.hextorgb(value);
}else if(value && value.touppercase().substring(0,3) == "rgb")
{
var _rgbarray = _paletteutil.color.rgbtoarray(value);
var hex = _paletteutil.color.rgbtohex(_rgbarray);
rgb = _paletteutil.color.hextorgb("#"+hex);
}else
{
rgb = [255, 255, 255, 1];
}
var hex = _paletteutil.color.rgbtohex(rgb);
var hsv = _paletteutil.color.rgbtohsv(rgb.slice(0,3));
_currentvo["rgb"] = rgb;
_currentvo["hex"] = hex;
_currentvo["hsv"] = hsv;
var left = hsv[1] / 100 * _palettecanvas.width;
var top = (100 - hsv[2]) / 100 * _palettecanvas.height;
_currentvo["pos"] = [left, top];
}
// 绘制彩虹条
function _drawhue()
{
_huectx.save();
var huegradient = _huectx.createlineargradient(0, 0, _huecanvas.width, 0);
huegradient.addcolorstop(0, "rgb(255, 0, 0)");
huegradient.addcolorstop(0.17, "rgb(255, 255, 0)");
huegradient.addcolorstop(0.34, "rgb(0, 255, 0)");
huegradient.addcolorstop(0.51, "rgb(0, 255, 255)");
huegradient.addcolorstop(0.68, "rgb(0, 0, 255)");
huegradient.addcolorstop(0.85, "rgb(255, 0, 255)");
huegradient.addcolorstop(1, "rgb(255, 0, 0)");
_huectx.fillstyle = huegradient;
_huectx.beginpath();
_huectx.rect(0, 0, _huecanvas.width, _huecanvas.height);
_huectx.fill();
_huectx.closepath();
_huectx.restore();
}
// 绘制切换按钮
function _drawchangetriangle()
{
_bottomchangectx.save();
_bottomchangectx.fillstyle = "#000";
_bottomchangectx.beginpath();
_bottomchangectx.moveto(9, 4);
_bottomchangectx.lineto(12, 9);
_bottomchangectx.lineto(6, 9);
_bottomchangectx.fill();
_bottomchangectx.closepath();
_bottomchangectx.beginpath();
_bottomchangectx.moveto(6, 12);
_bottomchangectx.lineto(12, 12);
_bottomchangectx.lineto(9, 17);
_bottomchangectx.fill();
_bottomchangectx.closepath();
_bottomchangectx.restore();
}
// 绘制切换按钮
function _drawchangenoback()
{
_bottomchangectx.clearrect(0, 0, _bottomchangecanvas.width, _bottomchangecanvas.height);
_drawchangetriangle();
}
// 绘制切换按钮
function _drawchangehasback()
{
_bottomchangectx.clearrect(0, 0, _bottomchangecanvas.width, _bottomchangecanvas.height);
_bottomchangectx.save();
_bottomchangectx.fillstyle = "#ddd";
_bottomchangectx.beginpath();
_bottomchangectx.rect(0, 0, _bottomchangecanvas.width, _bottomchangecanvas.height);
_bottomchangectx.fill();
_bottomchangectx.closepath();
_bottomchangectx.restore();
_drawchangetriangle();
}
// 自定义加号
function _drawdefineplus()
{
_bottomdefineplusctx.linewidth = 2;
_bottomdefineplusctx.strokestyle = "gray";
_bottomdefineplusctx.beginpath();
_bottomdefineplusctx.moveto(_bottomdefinepluscanvas.width / 2, 0);
_bottomdefineplusctx.lineto(_bottomdefinepluscanvas.width / 2, _bottomdefinepluscanvas.height);
_bottomdefineplusctx.stroke();
_bottomdefineplusctx.closepath();
_bottomdefineplusctx.beginpath();
_bottomdefineplusctx.moveto(0, _bottomdefinepluscanvas.height / 2);
_bottomdefineplusctx.lineto(_bottomdefinepluscanvas.width, _bottomdefinepluscanvas.height / 2);
_bottomdefineplusctx.stroke();
_bottomdefineplusctx.closepath();
}
// 设置色盘
function _setpalette()
{
_palettectx.clearrect(0, 0, _palettecanvas.width, _palettecanvas.height);
var hsv = _currentvo["hsv"];
var h = math.round(hsv[0]);
var height = 1.1;
_palettectx.linewidth = height * 3;
for(var x = 0;x<=100;x++)
{
var leftrgb = _paletteutil.color.hsvtorgb([h, 1, 100 - x]);
var rightrgb = _paletteutil.color.hsvtorgb([h, 100, 100 - x]);
_palettectx.save();
var linegradient = _palettectx.createlineargradient(0, x * height, _palettecanvas.width, x * height);
linegradient.addcolorstop(0, "#" + _paletteutil.color.rgbtohex(leftrgb));
linegradient.addcolorstop(1, "#" + _paletteutil.color.rgbtohex(rightrgb));
_palettectx.strokestyle = linegradient;
_palettectx.beginpath();
_palettectx.moveto(0, x * height);
_palettectx.lineto(_palettecanvas.width, x * height);
_palettectx.stroke();
_palettectx.closepath();
_palettectx.restore();
}
_settransparent();
}
// 设置透明度条
function _settransparent()
{
_transparentctx.clearrect(0, 0, _transparentcanvas.width, _transparentcanvas.height);
_transparentctx.save();
var cellwidth = _transparentcanvas.height / 2;
var size = math.ceil(_transparentcanvas.width / cellwidth);
_transparentctx.save();
for(var a = 0;a<2;a++)
{
for(var b = 0;b<size;b++)
{
var ab = a + b;
_transparentctx.fillstyle = (ab % 2 == 0 ? "#fff" : "#ddd");
_transparentctx.beginpath();
_transparentctx.rect(b * cellwidth, a * cellwidth, cellwidth, cellwidth);
_transparentctx.fill();
_transparentctx.closepath();
}
}
_transparentctx.restore();
var rgb = _currentvo["rgb"];
var transgradient = _transparentctx.createlineargradient(0, 0, _transparentcanvas.width, 0);
try
{
// ie 不识别透明度 会报 syntaxerror，捕获不处理
transgradient.addcolorstop(0, "rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+", 0)");
transgradient.addcolorstop(1, "rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+", 1)");
}catch(e){}
_transparentctx.fillstyle = transgradient;
_transparentctx.beginpath();
_transparentctx.rect(0, 0, _transparentcanvas.width, _transparentcanvas.height);
_transparentctx.fill();
_transparentctx.closepath();
_transparentctx.restore();
}
// 设置色盘选择器位置
function _setpaletteposition()
{
_palettecirclep.style["left"] = (number(_currentvo["pos"][0]) - 6) + "px";
_palettecirclep.style["top"] = (number(_currentvo["pos"][1]) - 6) + "px";
}
// 设置显示区域颜色
function _setmidshowcolor()
{
var cellwidth = 5;
var sizex = _midshowcanvas.width / cellwidth;
var sizey = _midshowcanvas.height / cellwidth;
_midshowctx.clearrect(0, 0, _midshowcanvas.width, _midshowcanvas.height);
_midshowctx.save();
for(var a = 0;a<sizex;a++)
{
for(var b = 0;b<sizey;b++)
{
var ab = a + b;
_midshowctx.fillstyle = (ab % 2 == 0 ? "#fff" : "#ddd");
_midshowctx.beginpath();
_midshowctx.rect(b * cellwidth, a * cellwidth, cellwidth, cellwidth);
_midshowctx.fill();
_midshowctx.closepath();
}
}
_midshowctx.restore();
_midshowctx.save();
_midshowctx.fillstyle = "#" + _currentvo["hex"];
_midshowctx.beginpath();
_midshowctx.rect(0, 0, _midshowcanvas.width, _midshowcanvas.height);
_midshowctx.fill();
_midshowctx.closepath();
_midshowctx.restore();
}
// 设置彩虹条的位置
function _setmidhueposition()
{
var hsv = _currentvo["hsv"];
var left = hsv[0] / 360 * _huecanvas.width;
// 获取彩虹条的doms
_midbarhuecirclep.style["left"] = (left - 7) + "px";
}
// 设置透明度条的位置
function _setmidtransposition()
{
var a = _currentvo["rgb"][3];
a == undefined && (a = 1);
var left = math.round(a * _transparentcanvas.width);
// 获取透明度dom ,
_midbartranscirclep.style["left"] = (left - 7) + "px";
}
// 设置底部信息
function _setbottominfo()
{
_bottominputp.innerhtml = "";
_bottomlabelspan.innerhtml = _typelabel;
if(_typelabel == "hex")
{
_bottomhexinput.value = "#" + _currentvo["hex"];
_bottominputp.appendchild(_bottomhexinput);
}else
{
_bottomrinput.value = _currentvo["rgb"][0];
_bottomginput.value = _currentvo["rgb"][1];
_bottombinput.value = _currentvo["rgb"][2];
_bottomainput.value = _currentvo["rgb"][3];
_bottominputp.appendchild(_bottomrinput);
_bottominputp.appendchild(document.createtextnode(" - "));
_bottominputp.appendchild(_bottomginput);
_bottominputp.appendchild(document.createtextnode(" - "));
_bottominputp.appendchild(_bottombinput);
_bottominputp.appendchild(document.createtextnode(" - "));
_bottominputp.appendchild(_bottomainput);
}
}
// 色盘选择
function _selectbypalette(left, top)
{
// 取色 h不变，s v变化，不通过getimagedata，不准确
var s = left / _palettecanvas.width * 100;
var v = 100 - top / _palettecanvas.height * 100;
_currentvo.hsv[1] = s;
_currentvo.hsv[2] = v;
var rgb = _paletteutil.color.hsvtorgb(_currentvo.hsv);
// 设置活动dom
_currentvo.rgb[0] = rgb[0];
_currentvo.rgb[1] = rgb[1];
_currentvo.rgb[2] = rgb[2];
// 设置圆圈位置
_currentvo["pos"] = [left, top];
_setpaletteposition();
// 设置底部信息
_currentvo.hex = _paletteutil.color.rgbtohex(_currentvo.rgb);
_setbottominfo();
// 设置色卡颜色
_setmidshowcolor();
// 设置透明度条颜色
_settransparent()
// 设置原始input值
_currentvo.target.value = "#" + _currentvo.hex;
// 执行方法
_fire();
}
// 彩虹条选择
function _selectbyhue(left)
{
var h = left / _huecanvas.width * 360;
_currentvo.hsv[0] = h;
// 保留透明度
var a = _currentvo.rgb[3];
// 生成新的rgb,hex
_currentvo.rgb = _paletteutil.color.hsvtorgb(_currentvo.hsv);
_currentvo.rgb.push(a);
_currentvo.hex = _paletteutil.color.rgbtohex(_currentvo.rgb);
// 色盘 透明度重置
_setpalette();
// 彩虹条位置调整
_setmidhueposition();
// 设置色卡颜色和底部信息
_setmidshowcolor();
_setbottominfo();
// 设置原始input值
_currentvo.target.value = "#" + _currentvo.hex;
// 执行方法
_fire();
}
// 透明度选择
function _selectbytrans(left)
{
var a = left / _transparentcanvas.width;
_currentvo.rgb[3] = number(a).tofixed(2);
_currentvo.hex = _paletteutil.color.rgbtohex(_currentvo.rgb);
// 设置透明度条
_setmidtransposition();
// 设置色卡颜色和底部信息
_setmidshowcolor();
_setbottominfo();
// 设置原始input值
_currentvo.target.value = "#" + _currentvo.hex;
// 执行方法
_fire();
}
// hex输入
function _bottominput()
{
var value = "";
if(_typelabel == "hex")
{
value = _bottomhexinput.value;
}else
{
value = "rgb("+_bottomrinput.value+","+_bottomginput.value+","+_bottombinput.value+","+_bottomainput.value+")";
}
_setcolordetail(value);
// 设置原始input值
_currentvo.target.value = "#" + _currentvo.hex;
// 执行方法
_fire();
}
// 切换显示类型
function _changebottomtype()
{
_typelabel = (_typelabel == "hex") ? "rgba" : "hex";
_setbottominfo();
}
// 色块单击改变
function _changebymodel(color)
{
_setcolordetail(color);
_setbottominfo();
// 设置原始input值
_currentvo.target.value = "#" + _currentvo.hex;
// 执行方法
_fire();
}
// 添加自定义色块 一共9个child，不算加号，最多8个自定义颜色
function _adduserdefinedcolor()
{
var childcount = _bottomdefineoutp.childelementcount;
if(childcount == 9)
{
return;
}
var modelp = _palettedom.getbottomquickmodelp("#" + _currentvo.hex);
_bottomdefineoutp.insertbefore(modelp, _bottomdefinepluscanvas);
// 绑定色块单击事件
modelp.addeventlistener("click", function(){ _paletteevent.modelpclickevent.apply(this, [_changebymodel]); });
// 绑定右键删除事件
modelp.addeventlistener("contextmenu", function(){ _paletteevent.modelpcontextmenuevent.apply(this); });
}
}
/**
* 事件类
*/
du.yue.paletteevent = function()
{
var _paletteutil = du.yue.paletteutil;
var _palettedragvo = {};// 色盘drag对象
var _huedragvo = {};// 彩虹条drag对象
var _transdragvo = {};// 透明条drag对象
// 对外暴露接口
object.defineproperties(this, {
docmousedownevent : { writable : false, value : _docmousedownevent },
outpmousedownevent : { writable : false, value : _outpmousedownevent },
outpcontextmenuevent : { writable : false, value : _outpcontextmenuevent },
paletteoutpmousedownevent : { writable : false, value : _paletteoutpmousedownevent },
midbarhueoutpmousedownevent : { writable : false, value : _midbarhueoutpmousedownevent },
midbartransoutpmousedownevent : { writable : false, value : _midbartransoutpmousedownevent },
docmouseupevent : { writable : false, value : _docmouseupevent },
docmousemoveevent : { writable : false, value : _docmousemoveevent },
bottominputevent : { writable : false, value : _bottominputevent },
bottomchangecanvasclickevent : { writable : false, value : _bottomchangecanvasclickevent },
bottomchangecanvasmouseenterevent : { writable : false, value : _bottomchangecanvasmouseenterevent },
bottomchangecanvasmouseleaveevent : { writable : false, value : _bottomchangecanvasmouseleaveevent },
modelpclickevent : { writable : false, value : _modelpclickevent },
modelpcontextmenuevent : { writable : false, value : _modelpcontextmenuevent },
bottomdefinepluscanvasclickevent : { writable : false, value : _bottomdefinepluscanvasclickevent }
});
// 加号单击
function _bottomdefinepluscanvasclickevent()
{
arguments[0].call();
}
// 色块单击
function _modelpclickevent()
{
var color = this.style["background-color"];
arguments[0].call(null, color);
}
// 自定义色块右键
function _modelpcontextmenuevent()
{
this.parentelement.removechild(this);
}
// 切换显示类型
function _bottomchangecanvasclickevent()
{
var e = _paletteutil.event.getevent(event);
// 禁止默认事件
_paletteutil.event.preventdefault(e);
arguments[0].call();
}
function _bottomchangecanvasmouseenterevent()
{
arguments[0].call();
}
function _bottomchangecanvasmouseleaveevent()
{
arguments[0].call();
}
// hex改变事件
function _bottominputevent()
{
arguments[0].call();
}
// 色盘鼠标按下
function _paletteoutpmousedownevent()
{
var e = _paletteutil.event.getevent(event);
// 禁止默认事件
_paletteutil.event.preventdefault(e);
var clientx = e.clientx;
var clienty = e.clienty;
var thisleft = this.getboundingclientrect().left;
var thistop = this.getboundingclientrect().top;
var left = clientx - thisleft;
var top = clienty - thistop;
arguments[0].call(null, left, top);
// 开启drag
_palettedragvo.flag = true;
}
// 彩虹条鼠标按下
function _midbarhueoutpmousedownevent()
{
var e = _paletteutil.event.getevent(event);
// 禁止默认事件
_paletteutil.event.preventdefault(e);
var clientx = e.clientx;
var bbox = this.getboundingclientrect();
var x = clientx < bbox.left ? 0 : clientx > bbox.right ? bbox.width : (clientx - bbox.left);
arguments[0].call(null, x);
// 开启drag
_huedragvo.flag = true;
}
// 透明度条鼠标按下
function _midbartransoutpmousedownevent()
{
var e = _paletteutil.event.getevent(event);
// 禁止默认事件
_paletteutil.event.preventdefault(e);
var clientx = e.clientx;
var bbox = this.getboundingclientrect();
var x = clientx < bbox.left ? 0 : clientx > bbox.right ? bbox.width : (clientx - bbox.left);
arguments[0].call(null, x);
// 开启drag
_transdragvo.flag = true;
}
// doc鼠标按下事件 [_start, _classname, _outp, _setcolor]
function _docmousedownevent()
{
var _start = arguments[0];
if(!_start)
{
return;
}
var _outp = arguments[2];
var e = _paletteutil.event.getevent(event);
var target = _paletteutil.event.gettarget(e);
// 判断input type='text'
var tagname = target.tagname;
var type = target.type;
if(!tagname || tagname.tolowercase() != "input" || !type || type.tolowercase() != "text")
{
// 隐藏弹框
document.body.contains(_outp) && document.body.removechild(_outp);
return;
}
// 判断class
var classlist = target.classname.split(" ");
var _classname = arguments[1];
var index = classlist.indexof(_classname);
if(index < 0)
{
// 隐藏弹框
document.body.contains(_outp) && document.body.removechild(_outp);
return;
}
document.body.appendchild(_outp);
// 确定弹框位置
var top = target.offsettop + target.offsetheight;
_outp.style["top"] = top + "px";
var winwidth = document.body.scrollwidth;
var targetleft = target.offsetleft;
var targetwidth = target.offsetwidth;
var outpwidth = parseint(_outp.style["width"].replace("px", ""));
if((targetleft + outpwidth) <= winwidth)
{
_outp.style["left"] = targetleft + "px";
}else
{
_outp.style["left"] = (winwidth - outpwidth - 10) + "px";
}
arguments[3].call(target);
}
// doc鼠标移动事件
function _docmousemoveevent()
{
var e = _paletteutil.event.getevent(event);
_palettedragvo.flag && _palettemousemoveevent.call(this, e, arguments[0]);
_huedragvo.flag && _huemousemoveevent.call(this, e, arguments[1]);
_transdragvo.flag && _transmousemoveevent.call(this, e, arguments[2]);
}
// 色盘鼠标移动事件
function _palettemousemoveevent(e, _palettevo)
{
// 禁止默认事件
_paletteutil.event.preventdefault(e);
var eventdom = _palettevo.eventdom;
var bbox = eventdom.getboundingclientrect();
var clientx = e.clientx;
var clienty = e.clienty;
var x = clientx < bbox.left ? 0 : clientx > bbox.right ? bbox.width : (clientx - bbox.left);
var y = clienty < bbox.top ? 0 : clienty > bbox.bottom ? bbox.height : (clienty - bbox.top);
_palettevo.callback.call(null, x, y);
}
// 彩虹条鼠标移动事件
function _huemousemoveevent(e, _huevo)
{
// 禁止默认事件
_paletteutil.event.preventdefault(e);
var eventdom = _huevo.eventdom;
var bbox = eventdom.getboundingclientrect();
var clientx = e.clientx;
var x = clientx < bbox.left ? 0 : clientx > bbox.right ? bbox.width : (clientx - bbox.left);
_huevo.callback.call(null, x);
}
// 透明度条鼠标移动事件
function _transmousemoveevent(e, _transparentvo)
{
// 禁止默认事件
_paletteutil.event.preventdefault(e);
var eventdom = _transparentvo.eventdom;
var bbox = eventdom.getboundingclientrect();
var clientx = e.clientx;
var x = clientx < bbox.left ? 0 : clientx > bbox.right ? bbox.width : (clientx - bbox.left);
_transparentvo.callback.call(null, x);
}
// doc鼠标弹起
function _docmouseupevent()
{
// 停止drag
_palettedragvo.flag && (_palettedragvo.flag = false);
_huedragvo.flag && (_huedragvo.flag = false);
_transdragvo.flag && (_transdragvo.flag = false);
}
// 最外框阻止冒泡
function _outpmousedownevent()
{
var e = _paletteutil.event.getevent(event);
_paletteutil.event.stoppropagation(e);
}
// 最外框阻止右键默认事件
function _outpcontextmenuevent()
{
return false;
}
}
/**
* dom类
*/
du.yue.palettedom = function()
{
var _paletteutil = du.yue.paletteutil;
object.defineproperties(this, { &