位置：首页>> 网络编程>> JavaScript>> 一个简单的像素画小工具

一个简单的像素画小工具

作者：y332332　来源：51js　发布时间：2010-01-01 15:33:00　

标签：像数画,工具,画图

一个很简单的画像素画的小工具,有意思的地方在于可以把画的图案保存成数组,以方便之后快速还原出原图..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>像素画 - asp之家 aspxhome.com</title><style>* {margin:0;padding:0;}.wrap { margin:0 auto;width:750px;border:1px solid #000;}.side {width:750px;height:60px;line-height:60px;border-bottom:1px solid #000;}#main {width:750px;height:auto;text-align:center;}#colorBar {margin-left:40px;border:1px solid #000;background-color:#F00;}#iTable,#tb {border-collapse:collapse;margin-bottom:40px;}#iTable { border:1px solid #999; }#tb td {border:1px solid #000;width:8px; height:8px;overflow:hidden;}#iTable td {border:1px solid #999;width:12px; height:12px;overflow:hidden;}#box { margin:42px auto 0; text-align:left; }.input1 {padding:5px;width:68px; height:31px;text-align:center;}#HashInfo {width:60％; height:60px;font-size:12px;}</style></head><body ><div class="wrap"><div class="side"> <input type="text" id="colorBar"/> <input type="button" class="input1" value="隐藏边框" id="done" /> <input type="button" class="input1" value="重新开始" id="clear" /> <input type="button" class="input1" value="放大" id="bigger" /> <input type="button" class="input1" value="缩小" id="smaller" /> <select onchange="iconTable.numChange(this.value)"> <option value="16">16 * 16</option> <option value="22" selected="selected">22 * 22</option> <option value="32">32 * 32</option> <option value="50">50 * 50</option> </select> <input type="button" class="input1" value="颜色信息" id="ColorInfo" /> </div><div id="main"><p style="font-size:12px; text-align:left; width:80％; margin:0 auto;">说明:先点击调色板选取需要的颜色,然后您可点击表格设置颜色,或按CTRL键通过移动鼠标在画板上继续设置颜色.点击"颜色信息"按钮可获取已设置过的颜色值,并可在"还原图案"按钮里进行还原</p> <div id="box"> </div> <textarea id="HashInfo">,,,,,,,,,,,,,,,,,,,,,,,,,,,,,#000000,#000000,#000000,#000000,#000000,#000000,,,,,,,,,,,,,,,#000000,#000000,#000000,#ff9900,#cc0033,#cc0033,#ff9900,#000000,#000000,#000000,,,,,,,,,,,,#000000,#000000,#ff9900,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#ff9900,#000000,#000000,,,,,,,,,,#000000,#000000,#cc0033,#ff9900,#ff9900,#cc0033,#cc0033,#cc0033,#cc0033,#ff9900,#ff9900,#cc0033,#000000,#000000,,,,,,,,,#000000,#ff9900,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#ff9900,#000000,,,,,,,,#000000,#000000,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#000000,#000000,,,,,,,#000000,#ff9900,#ff9900,#ff9900,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#ff9900,#ff9900,#ff9900,#000000,,,,,,,#000000,#ff9900,#ff9900,#ff9900,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#ff9900,#ff9900,#ff9900,#000000,,,,,,,#000000,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#000000,,,,,,,#000000,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#000000,,,,,,,#000000,#cc0033,#cc0033,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#cc0033,#cc0033,#000000,,,,,,,#000000,#000000,#000000,#000000,,,#000000,,,#000000,,,#000000,#000000,#000000,#000000,,,,,,,,#000000,#000000,#ffffff,,,#000000,,,#000000,,,,#000000,#000000,,,,,,,,,,#000000,#ffffff,,,,,,,,,,#000000,,,,,,,,,,,#000000,#000000,,,,,,,,,#000000,#000000,,,,,,,,,,,,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,</textarea><br /><input type="button" class="input1" value="还原图案" id="SubmitColor" /> </div></div></body></html><script type="text/javascript">function $(x){return document.getElementById(x);}function getPagePos(el){ var x=y=0;while(el){ x+=el.offsetLeft; y+=el.offsetTop; el=el.offsetParent;}return {x:x,y:y}}var colorPanel = function(){ var tb, c, s = "" , cp = "ColorPanel";var colors = "00,33,66,99,cc,ff".split(",");return {el : null, setColor : function(el){ var o = $(el);o.onfocus = function(){ colorPanel.el = o; if(!tb){ tb = document.createElement("div");tb.id = "ColorPanel";for(var x=0; x<6; x++){ s += '<tr>';for(var y=0; y<6; y++){ for(var z=0; z<6; z++){ c = colors[x] + colors[y] + colors[z];s += '<td style="background:#'+ c +'" color="#'+ c +'" ></td>'}}s += '</tr>';}tb.innerHTML = "<table id='tb'>" + s + "</table>";document.body.appendChild(tb);tb.style.position = "absolute";colorPanel.setPos(tb,o);var td = tb.getElementsByTagName("td");for(var i=0;i<td.length;i++){ td[i].onclick = function(){colorPanel.hide();iconTable.setColor( this.getAttribute("color") );}td[i].onmouseover = function(){ colorPanel.showColor(this);}}}else{ $(cp).style.display = "block";colorPanel.setPos(tb,o);}}},showColor : function(el){colorPanel.el.style.backgroundColor = el.getAttribute("color");$("colorBar").value = el.getAttribute("color");},hide : function(){ $(cp).style.display = "none"; },setPos : function(tb,el){ //设置调色板位置tb.style.left = getPagePos(el).x + "px";tb.style.top = getPagePos(el).y + el.offsetHeight + 1 + "px";}}}()//画板表格var iconTable = { curColor : "#FF0000",//当前颜色值box : $("box"), //画板表格的容器border : "none",l : 22, //格子数 l * lwh_default : 12,//格子初始宽高度,wh : 12, //格子宽高度,MaxWH : 16,MinWH : 4,ColorHash : null,init : function(l){ //利用数组拼接表格字符this.l = l || 22;var l = this.l;var aT = ["<table id='iTable'>"];for(var x=0,t=this.l; x<t; x++){ aT.push("<tr>");for(var y=0,y1=this.l; y<y1; y++){ aT.push("<td></td>");}aT.push("</tr>");}aT.push("</table>");//将字符写到容器里this.box.innerHTML = aT.join("");this.resetPos();iconTable.border = "none";$("done").value = "隐藏边框";iconTable.wh = iconTable.wh_default ;var td = $("iTable").getElementsByTagName("td");this.ColorHash = new Array(l*l);//遍历第一个表格,并注册事件for(var i=0,l=td.length; i<l; i++){ (function(k){ td[k].onclick = function(){ this.style.backgroundColor = iconTable.curColor;iconTable.ColorHash[k] = iconTable.curColor;}td[k].onmouseover = function(e){var e = e || window.event;if(e.ctrlKey ){ this.style.backgroundColor = iconTable.curColor;iconTable.ColorHash[k] = iconTable.curColor;}} })(i);}},//设置当前颜色setColor : function(x){ this.curColor = x; },removeBorder : function(){ var td = $("iTable").getElementsByTagName("td");var b = iconTable.border;for(var i=0,l=td.length; i<l; i++){ td[i].style.border = b;}iconTable.border = (iconTable.border == "none")?"1px solid #999": "none";$("done").value = (iconTable.border == "none")?"隐藏边框":"显示边框";},clear : function(){ var td = $("iTable").getElementsByTagName("td");for(var i=0,l=td.length; i<l; i++){ td[i].style.backgroundColor = "#fff";}},resetPos : function(){ var w = $("iTable").offsetWidth;var bW = $("main").offsetWidth;var l = (bW-w) / 2;$("box").style.marginLeft = l + "px";},sizeChange : function(pos){ var pos = pos || 1;var td = $("iTable").getElementsByTagName("td");var tmp = this.wh + ( 1 * pos );if( tmp <= this.MaxWH && tmp >= this.MinWH ){ this.wh = tmp; }for(var i=0,l=td.length; i<l; i++){ td[i].style.height = td[i].style.width = this.wh + "px"; }iconTable.resetPos();},numChange : function(l){ $("iTable").parentNode.removeChild( $("iTable") );iconTable.init(l);iconTable.resetPos();},showHash : function(){ $("HashInfo").value = iconTable.ColorHash ;},submitColor : function(v){ var td = $("iTable").getElementsByTagName("td");var arr = iconTable.ColorHash = v.split(",");for(var i=0,l=td.length; i<l; i++){ td[i].style.backgroundColor = arr[i];}}}iconTable.init();colorPanel.setColor("colorBar");$("done").onclick = function(){ iconTable.removeBorder(); }$("clear").onclick = function(){ iconTable.clear(); }$("bigger").onclick = function(){ iconTable.sizeChange(1); }$("smaller").onclick = function(){ iconTable.sizeChange(-1); }$("ColorInfo").onclick = function(){ iconTable.showHash(); }$("SubmitColor").onclick = function(){ iconTable.submitColor($("HashInfo").value);}</script>

我画的两个小图案,数组值如下:

小蘑菇:22*22

,,,,,,,,,,,,,,,,,,,,,,,,,,,,,#000000,#000000,#000000,#000000,#000000,#000000,,,,,,,,,,,,,,,#000000,#000000,#000000,#ff9900,#cc0033,#cc0033,#ff9900,#000000,#000000,#000000,,,,,,,,,,,,#000000,#000000,#ff9900,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#ff9900,#000000,#000000,,,,,,,,,,#000000,#000000,#cc0033,#ff9900,#ff9900,#cc0033,#cc0033,#cc0033,#cc0033,#ff9900,#ff9900,#cc0033,#000000,#000000,,,,,,,,,#000000,#ff9900,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#ff9900,#000000,,,,,,,,#000000,#000000,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#000000,#000000,,,,,,,#000000,#ff9900,#ff9900,#ff9900,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#ff9900,#ff9900,#ff9900,#000000,,,,,,,#000000,#ff9900,#ff9900,#ff9900,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#ff9900,#ff9900,#ff9900,#000000,,,,,,,#000000,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#cc0033,#ff9900,#ff9900,#000000,,,,,,,#000000,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#ff9900,#ff9900,#ff9900,#ff9900,#cc0033,#cc0033,#cc0033,#cc0033,#cc0033,#000000,,,,,,,#000000,#cc0033,#cc0033,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#cc0033,#cc0033,#000000,,,,,,,#000000,#000000,#000000,#000000,,,#000000,,,#000000,,,#000000,#000000,#000000,#000000,,,,,,,,#000000,#000000,#ffffff,,,#000000,,,#000000,,,,#000000,#000000,,,,,,,,,,#000000,#ffffff,,,,,,,,,,#000000,,,,,,,,,,,#000000,#000000,,,,,,,,,#000000,#000000,,,,,,,,,,,,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#000000,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

投稿

一个简单的像素画小工具

猜你喜欢