JS_小工具_自己写了一个画像素画的小工具

时间:2022-02-05 08:34:59

自己抽空做了一个画像素画的小工具,界面比较简单,但也可以画着玩.呵呵.

有意思的地方在于可以把画的内容保存为一个数组,可以很方便地还原成图案...

 

主要的JS代码:

 

 

 全部代码在这里

 

<!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>像素画</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"></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 * l
 wh_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>
 

 

下面是自己使用这个小工具画的图案,哈哈

 

JS_小工具_自己写了一个画像素画的小工具

 

JS_小工具_自己写了一个画像素画的小工具

 

 

数组值在这里,有兴趣的可以贴进去还原一下

 

小蘑菇: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,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,


超级玛丽 16*16
,,,,,,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,,,#ffccff,#ffccff,#ffccff,,,,,,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0033,#cc0000,#cc0000,#cc0000,#ffccff,#ffccff,,,,,,#000000,#000000,#000000,#ffccff,#ffccff,#000000,#ffccff,#ffccff,#000000,#000000,#000000,,,,,#000000,#ffccff,#000000,#ffccff,#ffccff,#ffccff,#000000,#ffccff,#ffccff,#000000,#000000,#000000,,,,,#000000,#ffccff,#000000,#000000,#ffccff,#ffccff,#000000,#ffccff,#ffccff,#000000,#000000,#000000,,,,,#000000,#000000,#ffccff,#ffccff,#ffccff,#ffccff,#ffccff,#000000,#ffccff,#ffccff,#ffccff,#000000,,,,,,,#ffccff,#ffccff,#ffccff,#ffccff,#000000,#000000,#000000,#000000,#000000,,,,,,,,#ffccff,#ffccff,#ffccff,#ffccff,#ffccff,#ffccff,#ffccff,#000000,,,,,#000000,#000000,#000000,#000000,#000000,#cc0000,#000000,#000000,#000000,#cc0000,#000000,,,,,#000000,#000000,#000000,#000000,#000000,#000000,#000000,#cc0000,#000000,#000000,#000000,#cc0000,,,#000000,#ffccff,#ffccff,#000000,#000000,#000000,#000000,#000000,#000000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,,,#000000,#ffccff,#ffccff,#ffccff,,#cc0000,#cc0000,#000000,#cc0000,#cc0000,#ccffff,#cc0000,#cc0000,#ccffff,#cc0000,#000000,#000000,#ffffff,#ffccff,,#330000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#000000,#000000,,,#330000,#330000,#330000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#000000,#000000,,#330000,#330000,#330000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#cc0000,#ffffff,#ffffff,#ffffff,,,,#330000,,,#cc0000,#cc0000,#cc0000,#cc0000,,,,,,,,