您的位置：首页 > 其它

纵横直方字体设计器

2017-11-28 21:45 218 查看

最近在尝试研发一款虚拟现实游戏，用一千个不同汉字字形作为建筑平面造型，构建一千座不同的别墅，一般字体由于存在比较复杂的曲线不便设计，于是准备寻找一款全部是直方笔划的字体，但是找遍全世界都没有一款这样的字体，怎么办，自己造！但是一般的字体设计软件操作繁琐，而我需要的字体关键信息只需要笔画所在坐标即可，为了便于笔画形态和数据互相转换，我开发了一下这款字体设计器。

最终游戏中字体呈现的效果大体是这样的：

<!DOCTYPE html>
<HTML>

<HEAD>

<META CHARSET="utf-8">

<TITLE>字体设计器</TITLE>

<STYLE>
body{
background-color:#999999;
margin:0px;
padding:0px;
}
</STYLE>

<SCRIPT>
var keyCodeValue=0;
var columnCount=32;
var rowCount=32;

function init(){

//创建背板
var board=document.createElement("div");
board.setAttribute("id","board");
board.style.cssText="position:relative;margin:20px;";

//创建信息栏显示当前坐标
var output=document.createElement("div");
output.setAttribute("id","output");
output.style.margin="10px";
output.innerHTML="字体设计器";
document.body.appendChild(output);

//字形数组输入栏
var dataInput=document.createElement("input");
dataInput.setAttribute("id","dataInput")
dataInput.style.cssText="width:300px;margin:10px;padding:10px;border-radius:10px;";
document.body.appendChild(dataInput);

//显示字形按钮
var OKbutton=document.createElement("button");
OKbutton.setAttribute("id","OKbutton");
OKbutton.innerHTML="数组 -> 字形";
OKbutton.style.cssText="margin:10px;padding:10px;border-radius:10px;";
OKbutton.onclick=function(){
var inputText=document.getElementById("dataInput").value;
var inputArray=eval(inputText);

//清空写字面板
for(var i=0;i<columnCount;i++){
for(var j=0;j<rowCount;j++){
var currentCell=document.getElementById("cell_"+i+"_"+j);
currentCell.style.backgroundColor="#AAAAAA";
currentCell.setAttribute("picked",0);
}
}

//清空结果数组
document.getElementById("result").innerHTML=inputText;

//读取字形数组并显示到面板上
for(var i=0;i<inputArray.length;i++){
var pointPosition=inputArray[i];
var pickedCell=document.getElementById("cell_"+pointPosition[0]+"_"+pointPosition[1]);
pickedCell.style.backgroundColor="#666666";
pickedCell.setAttribute("picked",1);
}

}
document.body.appendChild(OKbutton);

//清除数据按钮
var clearButton=document.createElement("button");
clearButton.setAttribute("id","clearButton");
clearButton.innerHTML="清除数组";
clearButton.style.cssText="margin:10px;padding:10px;border-radius:10px;";
clearButton.onclick=function(){
document.getElementById("dataInput").value="";
}
document.body.appendChild(clearButton);

//用于显示字形数组
var result=document.createElement("div");
result.setAttribute("id","result");
result.style.cssText="width:640px;height:200px;margin:20px;overflow:auto;background-color:rgba(255,255,255,0.1);";
document.body.appendChild(result);

//显示单元格
for(var i=0;i<columnCount;i++){
for(var j=0;j<rowCount;j++){
var idName="cell"+"_"+i+"_"+j;
var newCell=document.createElement("div");
newCell.setAttribute("id",idName);
newCell.style.cssText="position:absolute;margin:0px;padding:0px;width:18px;height:18px;background-color:#AAAAAA;border-style:dotted;border-width:1px;border-color:#666666;";
newCell.setAttribute("x",i);
newCell.setAttribute("y",j);
newCell.setAttribute("picked",0);
newCell.style.left=i*20+"px";
newCell.style.top=j*20+"px";
newCell.onmouseover=function(){
this.style.borderColor="#ff6666";
output.innerHTML="x: "+this.getAttribute("x")+" y: "+this.getAttribute("y");
}
newCell.onmouseout=function(){
this.style.borderColor="#666666";
}
newCell.onclick=function(){
var info="x: "+this.getAttribute("x")+" y: "+this.getAttribute("y");
output.innerHTML=info;
if(this.getAttribute("picked")==0){
this.setAttribute("picked",1);
this.style.backgroundColor="#666666";
}else{
this.setAttribute("picked",0);
this.style.backgroundColor="#AAAAAA";
}
update();
}
//鼠标移动事件
newCell.onmousemove=function(){
console.log("mouseover:"+this.getAttribute("x")+":"+this.getAttribute("y")+"_______"+keyCodeValue);
//如果W键被按住则绘制
if(keyCodeValue==87){
var info="x: "+this.getAttribute("x")+" y: "+this.getAttribute("y");
output.innerHTML=info;
this.setAttribute("picked",1);
this.style.backgroundColor="#666666";
update();
}
//如果E键被按住则擦除
if(keyCodeValue==69){
var info="x: "+this.getAttribute("x")+" y: "+this.getAttribute("y");
output.innerHTML=info;
this.setAttribute("picked",0);
this.style.backgroundColor="#AAAAAA";
update();
}

}
board.appendChild(newCell);

}
}

document.body.appendChild(board);

}

//每次点选单元格后更新字形数据
function update(){
var characterMatrix=new Array();
for(var i=0;i<columnCount;i++){
for(var j=0;j<rowCount;j++){
var point=document.getElementById("cell"+"_"+i+"_"+j);
if(point.getAttribute("picked")==1){
var position=new Array();
position[0]=point.getAttribute("x");
position[1]=point.getAttribute("y");
characterMatrix.push(position);
}
}
}

document.getElementById("result").innerHTML="[["+characterMatrix.join("],[")+"]]";

}

//窗口加载后初始化程序
window.onload=function(){

document.addEventListener("keydown",keydown);
function keydown(event){
keyCodeValue=event.keyCode;
}

document.addEventListener("keyup",keyup);
function keyup(event){
keyCodeValue=0;
}

init();

}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

所生成的字形数组存入json对象中：

thousandCharacterForm={
"香":[[0,1],[0,3],[0,6],[0,8],[0,9],[0,10],[0,11],[0,12],[1,1],[1,3],[1,5],[1,6],[1,8],[1,10],[1,12],[2,1],[2,3],[2,8],[2,10],[2,12],[3,1],[3,2],[3,3],[3,4],[3,5],[3,6],[3,7],[3,8],[3,10],[3,12],[4,1],[4,3],[4,8],[4,10],[4,12],[5,1],[5,3],[5,5],[5,6],[5,8],[5,10],[5,12],[6,0],[6,1],[6,3],[6,6],[6,8],[6,9],[6,10],[6,11],[6,12]],
"草":[[0,1],[0,3],[0,4],[0,5],[0,6],[0,7],[0,9],[1,0],[1,1],[1,2],[1,3],[1,5],[1,7],[1,9],[2,1],[2,3],[2,5],[2,7],[2,8],[2,9],[2,10],[3,0],[3,1],[3,2],[3,3],[3,5],[3,7],[3,9],[4,1],[4,3],[4,4],[4,5],[4,6],[4,7],[4,9]],
"薰":[[0,1],[0,4],[0,6],[0,8],[0,9],[0,10],[0,11],[0,12],[0,14],[0,16],[0,18],[1,1],[1,4],[1,6],[1,8],[1,12],[1,14],[1,16],[2,0],[2,1],[2,2],[2,4],[2,6],[2,8],[2,10],[2,12],[2,14],[2,16],[3,1],[3,4],[3,6],[3,8],[3,12],[3,14],[3,16],[3,18],[4,1],[4,4],[4,5],[4,6],[4,7],[4,8],[4,9],[4,10],[4,11],[4,12],[4,13],[4,14],[4,15],[4,16],[5,1],[5,4],[5,6],[5,8],[5,12],[5,14],[5,16],[5,18],[6,0],[6,1],[6,2],[6,4],[6,6],[6,8],[6,10],[6,12],[6,14],[6,16],[7,1],[7,4],[7,6],[7,8],[7,12],[7,14],[7,16],[8,1],[8,3],[8,4],[8,6],[8,8],[8,9],[8,10],[8,11],[8,12],[8,14],[8,16],[8,18]],
"氤":[[0,0],[0,1],[0,5],[0,7],[0,8],[0,9],[0,10],[0,11],[0,12],[0,13],[0,14],[0,15],[1,1],[1,3],[1,5],[1,7],[1,15],[2,1],[2,3],[2,5],[2,7],[2,10],[2,12],[2,13],[2,15],[3,1],[3,3],[3,5],[3,7],[3,9],[3,10],[3,11],[3,12],[3,15],[4,1],[4,3],[4,5],[4,7],[4,10],[4,12],[4,13],[4,15],[5,1],[5,3],[5,5],[5,7],[5,15],[6,1],[6,3],[6,5],[6,7],[6,8],[6,9],[6,10],[6,11],[6,12],[6,13],[6,14],[6,15],[7,1],[7,3],[7,5],[8,1],[8,3],[8,5],[8,6],[8,7],[8,8],[8,9],[8,10],[8,11],[8,12],[8,13],[8,14],[8,15],[9,15]],
"氲":[[0,0],[0,1],[0,3],[0,5],[0,16],[1,1],[1,3],[1,5],[1,7],[1,8],[1,9],[1,10],[1,11],[1,13],[1,14],[1,15],[1,16],[2,1],[2,3],[2,5],[2,7],[2,9],[2,11],[2,13],[2,16],[3,1],[3,3],[3,5],[3,7],[3,9],[3,11],[3,13],[3,14],[3,15],[3,16],[4,1],[4,3],[4,5],[4,7],[4,9],[4,11],[4,13],[4,16],[5,1],[5,3],[5,5],[5,7],[5,9],[5,11],[5,13],[5,14],[5,15],[5,16],[6,1],[6,3],[6,5],[6,7],[6,9],[6,11],[6,13],[6,16],[7,1],[7,3],[7,5],[7,7],[7,8],[7,9],[7,10],[7,11],[7,13],[7,14],[7,15],[7,16],[8,1],[8,3],[8,5],[8,16],[9,1],[9,3],[9,5],[10,1],[10,3],[10,5],[10,6],[10,7],[10,8],[10,9],[10,10],[10,11],[10,12],[10,13],[10,14],[10,15],[10,16],[11,16]],
"芬":[[0,1],[0,5],[0,6],[0,7],[0,10],[1,0],[1,1],[1,2],[1,5],[1,10],[2,1],[2,4],[2,5],[2,7],[2,10],[3,1],[3,7],[3,8],[3,9],[3,10],[4,1],[4,7],[5,1],[5,7],[5,10],[6,1],[6,7],[6,10],[7,1],[7,4],[7,5],[7,7],[7,8],[7,9],[7,10],[8,0],[8,1],[8,2],[8,5],[9,1],[9,5],[9,6],[9,7]],
"芳":
[[0,1],[0,6],[0,10],[1,0],[1,1],[1,2],[1,6],[1,10],[2,1],[2,6],[2,7],[2,8],[2,9],[2,10],[3,1],[3,4],[3,6],[3,8],[4,1],[4,6],[4,8],[5,0],[5,1],[5,2],[5,6],[5,8],[5,10],[6,1],[6,6],[6,8],[6,9],[6,10]],
"护":[[0,2],[0,5],[0,7],[1,0],[1,1],[1,2],[1,3],[1,4],[1,5],[1,6],[1,7],[2,2],[2,4],[4,7],[5,2],[5,3],[5,4],[5,5],[5,6],[5,7],[6,2],[6,4],[7,0],[7,2],[7,4],[8,2],[8,4],[9,2],[9,3],[9,4]],
"籍":[[0,0],[0,1],[0,2],[0,5],[0,7],[0,9],[0,13],[1,1],[1,5],[1,7],[1,9],[1,11],[1,12],[1,13],[2,1],[2,5],[2,7],[2,9],[3,1],[3,2],[3,4],[3,5],[3,6],[3,7],[3,8],[3,9],[3,10],[3,11],[3,12],[3,13],[4,1],[4,5],[4,7],[4,9],[5,1],[5,5],[5,7],[5,9],[5,11],[5,12],[5,13],[6,5],[6,7],[6,9],[6,13],[8,5],[8,7],[8,9],[8,10],[8,11],[8,12],[8,13],[9,0],[9,1],[9,2],[9,4],[9,5],[9,6],[9,7],[9,9],[9,11],[9,13],[10,1],[10,5],[10,7],[10,9],[10,11],[10,13],[11,1],[11,5],[11,7],[11,9],[11,11],[11,13],[12,1],[12,2],[12,5],[12,7],[12,9],[12,11],[12,13],[13,1],[13,4],[13,5],[13,6],[13,7],[13,9],[13,11],[13,13],[14,1],[14,5],[14,7],[14,9],[14,10],[14,11],[14,12],[14,13]],
"典":[[0,6],[1,2],[1,3],[1,4],[1,5],[1,6],[1,8],[2,2],[2,4],[2,6],[3,0],[3,1],[3,2],[3,3],[3,4],[3,5],[3,6],[4,2],[4,4],[4,6],[5,0],[5,1],[5,2],[5,3],[5,4],[5,5],[5,6],[6,2],[6,4],[6,6],[7,2],[7,3],[7,4],[7,5],[7,6],[7,8],[8,6]],
"芝":[[0,1],[0,5],[0,9],[0,10],[0,11],[1,0],[1,1],[1,2],[1,5],[1,9],[1,11],[2,1],[2,5],[2,9],[2,11],[3,1],[3,3],[3,5],[3,7],[3,8],[3,9],[3,11],[4,1],[4,5],[4,7],[4,11],[5,0],[5,1],[5,2],[5,5],[5,7],[5,11],[6,1],[6,5],[6,6],[6,7],[6,11]],
"菌":[[0,1],[0,4],[0,5],[0,6],[0,7],[0,8],[0,9],[0,10],[0,11],[0,12],[0,13],[0,14],[1,0],[1,1],[1,2],[1,4],[1,14],[2,1],[2,4],[2,7],[2,9],[2,12],[2,14],[3,1],[3,4],[3,7],[3,9],[3,11],[3,12],[3,14],[4,1],[4,4],[4,7],[4,9],[4,14],[5,1],[5,4],[5,7],[5,8],[5,9],[5,10],[5,11],[5,12],[5,14],[6,1],[6,4],[6,7],[6,9],[6,14],[7,1],[7,4],[7,7],[7,9],[7,11],[7,12],[7,14],[8,1],[8,4],[8,6],[8,7],[8,9],[8,12],[8,14],[9,0],[9,1],[9,2],[9,4],[9,14],[10,1],[10,4],[10,5],[10,6],[10,7],[10,8],[10,9],[10,10],[10,11],[10,12],[10,13],[10,14]],
"萌":[[0,1],[0,4],[0,5],[0,6],[0,7],[0,8],[0,10],[1,0],[1,1],[1,2],[1,4],[1,6],[1,8],[1,10],[2,1],[2,4],[2,5],[2,6],[2,7],[2,8],[2,10],[3,1],[3,10],[4,1],[4,4],[4,5],[4,6],[4,7],[4,8],[4,9],[4,10],[5,0],[5,1],[5,2],[5,4],[5,6],[5,8],[6,1],[6,4],[6,5],[6,6],[6,7],[6,8],[6,9],[6,10]],
"温":[[0,0],[0,1],[0,4],[0,5],[0,8],[0,9],[2,9],[3,0],[3,1],[3,2],[3,3],[3,4],[3,6],[3,7],[3,8],[3,9],[4,0],[4,2],[4,4],[4,6],[4,9],[5,0],[5,2],[5,4],[5,6],[5,7],[5,8],[5,9],[6,0],[6,2],[6,4],[6,6],[6,9],[7,0],[7,2],[7,4],[7,6],[7,7],[7,8],[7,9],[8,0],[8,2],[8,4],[8,6],[8,9],[9,0],[9,1],[9,2],[9,3],[9,4],[9,6],[9,7],[9,8],[9,9],[10,9]],
"润":[[0,0],[0,3],[0,7],[0,8],[2,0],[2,1],[2,2],[2,3],[2,4],[2,5],[2,6],[2,7],[2,8],[4,0],[4,2],[4,4],[4,8],[5,2],[5,4],[5,8],[6,0],[6,2],[6,3],[6,4],[6,5],[6,6],[6,7],[6,8],[7,0],[7,2],[7,4],[7,8],[8,0],[8,2],[8,4],[8,6],[8,8],[9,0],[10,0],[10,1],[10,2],[10,3],[10,4],[10,5],[10,6],[10,7],[10,8]],
"娉":[[0,1],[0,11],[1,0],[1,1],[1,2],[1,3],[1,4],[1,5],[1,6],[1,7],[1,11],[2,1],[2,7],[2,8],[2,9],[2,10],[2,11],[3,0],[3,1],[3,2],[3,3],[3,4],[3,5],[3,6],[3,7],[4,1],[4,7],[4,8],[4,9],[4,10],[4,11],[6,1],[6,2],[6,3],[6,4],[6,5],[6,7],[6,11],[7,1],[7,3],[7,5],[7,7],[7,11],[8,0],[8,1],[8,2],[8,3],[8,4],[8,5],[8,7],[8,8],[8,9],[8,11],[9,1],[9,3],[9,5],[9,7],[9,9],[9,11],[10,1],[10,2],[10,3],[10,4],[10,5],[10,7],[10,9],[10,10],[10,11]],
"婷":
[[0,2],[0,12],[1,0],[1,1],[1,2],[1,3],[1,4],[1,5],[1,6],[1,7],[1,8],[1,12],[2,2],[2,8],[2,9],[2,10],[2,11],[2,12],[3,0],[3,1],[3,2],[3,3],[3,4],[3,5],[3,6],[3,7],[3,8],[4,2],[4,8],[4,9],[4,10],[4,11],[4,12],[7,2],[7,4],[7,5],[7,6],[7,8],[7,9],[7,10],[8,2],[8,4],[8,6],[8,8],[8,12],[9,2],[9,4],[9,6],[9,8],[9,10],[9,12],[10,0],[10,2],[10,4],[10,6],[10,8],[10,10],[10,11],[10,12],[11,2],[11,4],[11,6],[11,8],[11,10],[12,2],[12,4],[12,6],[12,8],[13,2],[13,4],[13,5],[13,6],[13,8],[13,9],[13,10]],
"撑":[[0,1],[0,9],[0,15],[1,0],[1,1],[1,2],[1,3],[1,4],[1,5],[1,6],[1,7],[1,8],[1,9],[1,10],[1,11],[1,12],[1,13],[1,14],[1,15],[2,1],[2,8],[4,1],[4,3],[4,4],[4,5],[4,9],[4,11],[4,13],[4,15],[5,3],[5,9],[5,11],[5,13],[5,15],[6,3],[6,5],[6,6],[6,7],[6,9],[6,11],[6,13],[6,15],[7,0],[7,1],[7,2],[7,3],[7,5],[7,7],[7,9],[7,10],[7,11],[7,12],[7,13],[7,14],[7,15],[8,3],[8,5],[8,6],[8,7],[8,9],[8,11],[8,13],[9,3],[9,9],[9,11],[9,13],[10,1],[10,3],[10,4],[10,5],[10,8],[10,9],[10,11],[10,13]],
"纸":
[[0,0],[0,1],[0,3],[0,4],[0,5],[0,7],[1,1],[1,3],[1,5],[1,7],[2,1],[2,2],[2,3],[2,5],[2,7],[4,1],[4,2],[4,3],[4,4],[4,5],[4,6],[4,7],[5,1],[5,3],[5,7],[6,1],[6,3],[7,1],[7,2],[7,3],[7,4],[7,5],[7,6],[7,7],[8,1],[8,3],[8,7],[9,0],[9,1],[9,3],[9,7]],
"伞":[[0,2],[0,3],[0,4],[1,2],[1,7],[2,2],[2,5],[2,7],[3,0],[3,1],[3,2],[3,7],[4,0],[4,4],[4,5],[4,6],[4,7],[4,8],[4,9],[5,0],[5,1],[5,2],[5,7],[6,2],[6,5],[6,7],[7,2],[7,7],[8,2],[8,3],[8,4]],
"铃":[[0,0],[0,1],[0,3],[0,6],[1,1],[1,3],[1,4],[1,5],[1,6],[1,7],[1,8],[1,9],[1,10],[2,1],[2,3],[2,6],[2,10],[4,2],[4,3],[4,4],[4,6],[5,2],[5,6],[5,10],[6,0],[6,1],[6,2],[6,6],[6,10],[7,0],[7,4],[7,6],[7,8],[7,9],[7,10],[8,0],[8,1],[8,2],[8,6],[8,8],[8,10],[9,2],[9,6],[9,8],[9,10],[10,2],[10,3],[10,4],[10,6],[10,7],[10,8]],
"铛":[[0,0],[0,1],[0,3],[0,5],[1,1],[1,3],[1,4],[1,5],[1,6],[1,7],[2,1],[2,3],[2,5],[2,7],[4,1],[4,3],[4,5],[4,7],[5,3],[5,5],[5,7],[6,0],[6,1],[6,2],[6,3],[6,5],[6,7],[7,3],[7,5],[7,7],[8,1],[8,3],[8,4],[8,5],[8,6],[8,7]],
"响":[[0,0],[0,1],[0,2],[0,3],[0,4],[0,5],[0,6],[0,7],[0,8],[1,0],[1,8],[2,0],[2,1],[2,2],[2,3],[2,4],[2,5],[2,6],[2,7],[2,8],[4,3],[4,4],[4,5],[4,6],[4,7],[4,8],[5,1],[5,2],[5,3],[6,0],[6,1],[6,3],[6,5],[6,6],[6,7],[6,8],[7,3],[7,5],[7,8],[8,3],[8,5],[8,6],[8,7],[8,8],[9,3],[10,3],[10,4],[10,5],[10,6],[10,7],[10,8]],
"清":
[[0,1],[0,5],[0,6],[0,11],[0,12],[0,13],[2,1],[2,3],[2,5],[2,7],[2,8],[2,9],[2,10],[2,11],[2,12],[2,13],[3,1],[3,3],[3,5],[3,7],[3,9],[3,11],[4,0],[4,1],[4,2],[4,3],[4,4],[4,5],[4,7],[4,9],[4,11],[5,1],[5,3],[5,5],[5,7],[5,9],[5,11],[6,1],[6,3],[6,5],[6,7],[6,8],[6,9],[6,10],[6,11],[6,12],[6,13]],
"脆":[[0,0],[0,1],[0,2],[0,3],[0,4],[0,5],[0,6],[0,7],[0,8],[0,9],[0,10],[1,0],[1,3],[1,6],[2,0],[2,1],[2,2],[2,3],[2,4],[2,5],[2,6],[2,7],[2,8],[2,9],[2,10],[4,10],[5,2],[5,4],[5,5],[5,6],[5,7],[5,8],[5,9],[5,10],[6,0],[6,1],[6,2],[6,4],[7,1],[7,4],[7,6],[8,1],[8,4],[8,6],[8,7],[8,8],[8,9],[8,10],[9,1],[9,4],[9,6],[9,10],[10,1],[10,2],[10,3],[10,4],[10,6],[10,8],[10,10],[11,4],[11,6],[11,7],[11,8],[11,10],[12,4],[12,10],[13,4],[13,9],[13,10]],
"刹":
[[0,0],[0,3],[0,4],[0,5],[0,6],[0,9],[0,14],[1,0],[1,3],[1,9],[1,11],[1,12],[1,13],[1,14],[2,0],[2,3],[2,9],[3,0],[3,1],[3,2],[3,3],[3,4],[3,5],[3,6],[3,8],[3,9],[3,10],[3,11],[3,12],[3,13],[3,14],[4,3],[4,6],[4,9],[5,3],[5,6],[5,9],[5,11],[5,12],[5,13],[5,14],[6,0],[6,1],[6,2],[6,3],[6,6],[6,9],[6,14],[8,3],[8,4],[8,5],[8,6],[8,7],[8,8],[8,9],[8,14],[9,14],[10,0],[10,1],[10,2],[10,3],[10,4],[10,5],[10,6],[10,7],[10,8],[10,9],[10,10],[10,11],[10,12],[10,13],[10,14]],
"那":[[0,0],[0,3],[0,5],[0,7],[1,0],[1,2],[1,3],[1,4],[1,5],[1,6],[1,7],[2,0],[2,3],[2,5],[3,0],[3,7],[4,0],[4,1],[4,2],[4,3],[4,4],[4,5],[4,6],[4,7],[6,0],[6,1],[6,2],[6,3],[6,4],[6,5],[6,6],[6,7],[7,0],[7,2],[7,4],[8,0],[8,1],[8,2],[8,3],[8,4]],
"醒":[[0,0],[0,2],[0,3],[0,4],[0,5],[0,6],[0,7],[0,8],[0,9],[0,10],[0,11],[1,0],[1,2],[1,11],[2,0],[2,1],[2,2],[2,3],[2,4],[2,5],[2,6],[2,7],[2,9],[2,11],[3,0],[3,2],[3,9],[3,11],[4,0],[4,1],[4,2],[4,3],[4,4],[4,5],[4,6],[4,7],[4,9],[4,11],[5,0],[5,2],[5,11],[6,0],[6,2],[6,3],[6,4],[6,5],[6,6],[6,7],[6,8],[6,9],[6,10],[6,11],[8,0],[8,1],[8,2],[8,3],[8,4],[8,6],[8,7],[8,9],[8,11],[9,0],[9,2],[9,4],[9,7],[9,9],[9,11],[10,0],[10,2],[10,4],[10,7],[10,9],[10,11],[11,0],[11,2],[11,4],[11,6],[11,7],[11,8],[11,9],[11,10],[11,11],[12,0],[12,2],[12,4],[12,7],[12,9],[12,11],[13,0],[13,2],[13,4],[13,7],[13,9],[13,11],[14,0],[14,1],[14,2],[14,3],[14,4],[14,7],[14,9],[14,11]],
"梦":[[0,1],[0,4],[0,11],[1,1],[1,3],[1,4],[1,11],[2,1],[2,8],[2,11],[3,0],[3,1],[3,2],[3,3],[3,4],[3,6],[3,7],[3,8],[3,11],[4,1],[4,7],[4,11],[5,1],[5,3],[5,4],[5,7],[5,11],[6,7],[6,11],[7,1],[7,4],[7,7],[7,9],[7,11],[8,1],[8,3],[8,4],[8,7],[8,11],[9,1],[9,7],[9,11],[10,0],[10,1],[10,2],[10,3],[10,4],[10,7],[10,11],[11,1],[11,7],[11,8],[11,9],[11,10],[11,11],[12,1],[12,3],[12,4],[13,1],[13,4]],
"魇":[[0,21],[0,23],[1,0],[1,1],[1,2],[1,3],[1,4],[1,5],[1,6],[1,7],[1,8],[1,9],[1,10],[1,11],[1,12],[1,13],[1,14],[1,15],[1,16],[1,17],[1,18],[1,19],[1,20],[1,21],[1,23],[2,0],[2,23],[3,0],[3,4],[3,6],[3,7],[3,10],[3,11],[3,12],[3,13],[3,14],[3,15],[3,16],[3,18],[3,19],[3,20],[3,21],[3,22],[3,23],[4,0],[4,4],[4,6],[4,9],[4,10],[4,12],[4,14],[4,16],[4,18],[5,0],[5,4],[5,6],[5,12],[5,14],[5,16],[5,18],[6,0],[6,4],[6,6],[6,12],[6,14],[6,16],[6,18],[7,0],[7,2],[7,3],[7,4],[7,5],[7,6],[7,12],[7,13],[7,14],[7,15],[7,16],[7,17],[7,18],[7,19],[7,20],[7,21],[7,22],[7,23],[8,0],[8,4],[8,6],[8,12],[8,14],[8,16],[8,23],[9,0],[9,4],[9,6],[9,12],[9,14],[9,16],[9,18],[9,19],[9,20],[9,21],[9,23],[10,0],[10,2],[10,4],[10,6],[10,12],[10,14],[10,16],[10,21],[10,23],[11,0],[11,4],[11,6],[11,7],[11,12],[11,13],[11,14],[11,15],[11,16],[11,19],[11,20],[11,21],[11,23]],
/*
"鲸":,
"鲨":,
"潜":,
"深":,
"海":,
"摆":,
"鳍":,
"动":,
"波":,
"澜":,
"零":,
"乱":,
"色":,
"斑":,
"斓":,
"滋":,
"味":,
"怡":,
"口":,
"甜":,
"莲":,
"雾":,
"果":,
"淡":,
"爽":,
"凉":,
"冽":,
"犹":,
"醴":,
"泉":,
"羚":,
"牛":,
"拱":,
"尖":,
"角":,
"双":,
"目":,
"亮":,
"似":,
"电":,
"令":,
"旗":,
"传":,
"上":,
"谕":,
"飘":,
"荡":,
"摇":,
"招":,
"展":,
"林":,
"中":,
"栖":,
"跳":,
"蛙":,
"腿":,
"健":,
"善":,
"蹦":,
"弹":,
"菱":,
"漂":,
"湖":,
"泊":,
"里":,
"美":,
"甘":,
"胜":,
"麦":,
"饭":,
"翼":,
"龙":,
"白":,
"垩":,
"纪":,
"灭":,
"绝":,
"因":,
"天":,
"演":,
"薏":,
"苡":,
"念":,
"珠":,
"籽":,
"仁":,
"粉":,
"种":,
"壳":,
"坚":,
"银":,
"耳":,
"明":,
"透":,
"光":,
"食":,
"之":,
"可":,
"驻":,
"颜":,
"医":,
"者":,
"慈":,
"悲":,
"心":,
"德":,
"才":,
"近":,
"佛":,
"仙":,
"钥":,
"匙":,
"开":,
"门":,
"锁":,
"不":,
"配":,
"莫":,
"霸":,
"蛮":,
"鹦":,
"鹉":,
"学":,
"人":,
"舌":,
"聪":,
"慧":,
"习":,
"语":,
"言":,
"衣":,
"篓":,
"盛":,
"裤":,
"衫":,
"层":,
"叠":,
"堆":,
"塞":,
"满":,
"瑶":,
"琴":,
"奏":,
"高":,
"调":,
"知":,
"音":,
"共":,
"赏":,
"玩":,
"贻":,
"贝":,
"肌":,
"滑":,
"嫩":,
"饕":,
"餮":,
"朵":,
"颐":,
"餐":,
"野":,
"韭":,
"花":,
"若":,
"雪":,
"腌":,
"酱":,
"增":,
"鲜":,
"咸":,
"鳄":,
"梨":,
"媲":,
"奶":,
"昔":,
"膏":,
"醇":,
"趁":,
"熟":,
"软":,
"恶":,
"兽":,
"牙":,
"锐":,
"利":,
"遭":,
"逢":,
"恐":,
"丧":,
"胆":,
"窝":,
"头":,
"粗":,
"糙":,
"粮":,
"掺":,
"拌":,
"玉":,
"米":,
"面":,
"万":,
"籁":,
"俱":,
"寂":,
"静":,
"聒":,
"噪":,
"无":,
"闹":,
"喧":,
"额":,
"饰":,
"金":,
"宝":,
"钻":,
"耀":,
"眼":,
"闪":,
"璀":,
"璨":,
"二":,
"胡":,
"声":,
"幽":,
"惨":,
"六":,
"月":,
"降":,
"霜":,
"寒":,
"饿":,
"驴":,
"久":,
"未":,
"饲":,
"见":,
"槽":,
"流":,
"唾":,
"涎":,
"沉":,
"浸":,
"听":,
"歌":,
"乐":,
"忧":,
"愁":,
"全":,
"消":,
"散":,
"案":,
"板":,
"刀":,
"俎":,
"切":,
"鱼":,
"肉":,
"砍":,
"剁":,
"烂":,
"阿":,
"胶":,
"皮":,
"炼":,
"制":,
"熬":,
"煮":,
"汤":,
"液":,
"黏":,
"三":,
"棱":,
"折":,
"射":,
"镜":,
"霓":,
"虹":,
"蔚":,
"壮":,
"观":,
"山":,
"药":,
"铁":,
"棍":,
"根":,
"掰":,
"断":,
"细":,
"丝":,
"连":,
"扇":,
"儿":,
"扑":,
"几":,
"下":,
"倏":,
"忽":,
"冷":,
"风":,
"旋":,
"沙":,
"僧":,
"西":,
"游":,
"苦":,
"两":,
"肩":,
"挑":,
"重":,
"担":,
"松":,
"石":,
"绿":,
"泛":,
"蓝":,
"成":,
"分":,
"磷":,
"酸":,
"盐":,
"珊":,
"瑚":,
"枝":,
"虬":,
"曲":,
"瑰":,
"丽":,
"幻":,
"彩":,
"艳":,
"漏":,
"刻":,
"韶":,
"华":,
"逝":,
"难":,
"买":,
"瞬":,
"时":,
"间":,
"云":,
"南":,
"产":,
"田":,
"七":,
"研":,
"末":,
"捏":,
"丹":,
"丸":,
"舢":,
"舨":,
"船":,
"虽":,
"小":,
"远":,
"航":,
"保":,
"平":,
"安":,
"勾":,
"股":,
"规":,
"律":,
"定":,
"真":,
"理":,
"岂":,
"弄":,
"玄":,
"碎":,
"骨":,
"仍":,
"还":,
"阳":,
"叶":,
"厚":,
"簇":,
"锦":,
"团":,
"印":,
"章":,
"篆":,
"字":,
"反":,
"压":,
"拓":,
"版":,
"样":,
"翻":,
"肥":,
"鹅":,
"羽":,
"脯":,
"丰":,
"驯":,
"雉":,
"鸿":,
"鹄":,
"雁":,
"沥":,
"溪":,
"苏":,
"曼":,
"殊":,
"诗":,
"情":,
"悟":,
"参":,
"禅":,
"雄":,
"猛":,
"狻":,
"猊":,
"狮":,
"怒":,
"吼":,
"逞":,
"威":,
"严":,
"师":,
"傅":,
"取":,
"梵":,
"经":,
"译":,
"著":,
"千":,
"卷":,
"返":,
"榴":,
"红":,
"玛":,
"瑙":,
"逊":,
"鞣":,
"质":,
"涩":,
"收":,
"敛":,
"紫":,
"蜐":,
"蚌":,
"蛤":,
"属":,
"身":,
"藏":,
"缝":,
"隙":,
"岩":,
"绵":,
"柔":,
"碧":,
"绦":,
"绸":,
"葫":,
"芦":,
"藤":,
"蔓":,
"攀":,
"砸":,
"谷":,
"舂":,
"稻":,
"粒":,
"擂":,
"钵":,
"捣":,
"簸":,
"颠":,
"壶":,
"铸":,
"铜":,
"钢":,
"铅":,
"提":,
"拉":,
"强":,
"臂":,
"腕":,
"座":,
"椅":,
"垫":,
"舒":,
"适":,
"歇":,
"憩":,
"免":,
"疲":,
"倦":,
"寄":,
"命":,
"枯":,
"朽":,
"木":,
"素":,
"荤":,
"解":,
"饥":,
"馋":,
"武":,
"艺":,
"崇":,
"嵩":,
"寺":,
"勤":,
"练":,
"罗":,
"汉":,
"拳":,
"巫":,
"蛊":,
"惑":,
"愚":,
"民":,
"妖":,
"魔":,
"术":,
"阴":,
"暗":,
"屋":,
"室":,
"嵌":,
"榫":,
"卯":,
"工":,
"匠":,
"尊":,
"鲁":,
"班":,
"驼":,
"包":,
"蜒":,
"蚰":,
"虫":,
"蜗":,
"居":,
"畏":,
"缩":,
"蜷":,
"母":,
"鸡":,
"鸣":,
"咯":,
"哒":,
"欣":,
"喜":,
"获":,
"蛋":,
"卵":,
"棚":,
"挂":,
"癞":,
"葡":,
"萄":,
"氨":,
"基":,
"皂":,
"苷":,
"含":,
"五":,
"星":,
"维":,
"纳":,
"斯":,
"神":,
"话":,
"探":,
"渊":,
"源":,
"留":,
"恋":,
"已":,
"忘":,
"归":,
"愿":,
"舍":,
"家":,
"当":,
"换":,
"茶":,
"圣":,
"封":,
"御":,
"史":,
"品":,
"茗":,
"撰":,
"文":,
"献":,
"轭":,
"挽":,
"牵":,
"犁":,
"铧":,
"耕":,
"作":,
"倍":,
"简":,
"便":,
"腐":,
"蚀":,
"巨":,
"危":,
"险":,
"稀":,
"释":,
"冒":,
"轻":,
"烟":,
"螺":,
"杆":,
"镦":,
"滚":,
"搓":,
"痕":,
"纹":,
"绕":,
"柱":,
"栓":,
"锣":,
"鼓":,
"嘭":,
"咚":,
"敲":,
"仪":,
"仗":,
"队":,
"列":,
"编":,
"轮":,
"转":,
"竞":,
"技":,
"巧":,
"抛":,
"掷":,
"系":,
"绳":,
"弦":,
"楼":,
"梯":,
"辅":,
"登":,
"峰":,
"巅":,
"顶":,
"视":,
"域":,
"宽":,
"喇":,
"叭":,
"嘀":,
"嗒":,
"吹":,
"宾":,
"客":,
"笑":,
"容":,
"欢":,
"辣":,
"椒":,
"颇":,
"刺":,
"激":,
"唇":,
"吻":,
"燃":,
"烈":,
"焰":,
"麒":,
"麟":,
"兆":,
"祥":,
"瑞":,
"卓":,
"越":,
"异":,
"庸":,
"凡":,
"蜥":,
"蜴":,
"尾":,
"截":,
"续":,
"随":,
"境":,
"肤":,
"鳞":,
"染":,
"禽":,
"鸟":,
"礼":,
"服":,
"披":,
"划":,
"桨":,
"翅":,
"膀":,
"兼":,
"蟠":,
"蛟":,
"攒":,
"针":,
"茂":,
"脂":,
"滴":,
"琥":,
"珀":,
"衍":,
"骑":,
"士":,
"纵":,
"横":,
"驰":,
"剑":,
"影":,
"血":,
"泪":,
"涟":,
"积":,
"块":,
"磊":,
"城":,
"墙":,
"惟":,
"妙":,
"拟":,
"坤":,
"乾":,
"脑":,
"前":,
"凸":,
"奇":,
"物":,
"治":,
"谵":,
"缓":,
"痉":,
"挛":,
"机":,
"械":,
"智":,
"运":,
"行":,
"创":,
"想":,
"付":,
"实":,
"践":,
"溜":,
"圆":,
"咔":,
"嚓":,
"裂":,
"赤":,
"瓤":,
"祛":,
"暑":,
"炎":,
"何":,
"能":,
"凌":,
"九":,
"霄":,
"志":,
"昂":,
"内":,
"虚":,
"谦":,
"灵":,
"喙":,
"唱":,
"如":,
"簧":,
"叽":,
"喳":,
"频":,
"顾":,
"盼":,
"蠹":,
"蚁":,
"结":,
"社":,
"群":,
"王":,
"臣":,
"别":,
"职":,
"衔":,
"挥":,
"舞":,
"钉":,
"齿":,
"耙":,
"农":,
"忙":,
"筑":,
"泥":,
"坎":,
"苗":,
"底":,
"绽":,
"黄":,
"蕊":,
"扎":,
"土":,
"孕":,
"荚":,
"瓣":,
"公":,
"交":,
"飞":,
"梭":,
"巡":,
"众":,
"忌":,
"迟":,
"到":,
"晚":,
"巴":,
"乌":,
"凿":,
"孔":,
"洞":,
"量":,
"径":,
"裁":,
"竹":,
"管":,
"鹭":,
"鸶":,
"枕":,
"垂":,
"翎":,
"绒":,
"洁":,
"姿":,
"瘦":,
"纤":,
"败":,
"北":,
"示":,
"投":,
"诚":,
"卧":,
"薪":,
"思":,
"鸠":,
"浅":,
"糍":,
"粑":,
"糕":,
"饼":,
"糯":,
"姜":,
"葱":,
"蒜":,
"油":,
"煎":,
"蒴":,
"鞘":,
"卦":,
"象":,
"呈":,
"八":,
"舟":,
"聚":,
"合":,
"联":,
"警":,
"觉":,
"戒":,
"糊":,
"涂":,
"备":,
"周":,
"察":,
"隐":,
"患":,
"潭":,
"鳖":,
"负":,
"盾":,
"甲":,
"悠":,
"闲":,
"延":,
"寿":,
"年":,
"球":,
"赛":,
"争":,
"炽":,
"热":,
"虎":,
"狼":,
"攻":,
"守":,
"战":,
"充":,
"气":,
"浮":,
"浪":,
"涛":,
"救":,
"溺":,
"橡":,
"塑":,
"圈":,
"叛":,
"逆":,
"黜":,
"父":,
"祖":,
"雷":,
"霆":,
"镇":,
"庙":,
"殿":,
"酒":,
"器":,
"琼":,
"浆":,
"贮":,
"迷":,
"魂":,
"醍":,
"醐":,
"灌":,
"猪":,
"猡":,
"任":,
"宰":,
"割":,
"懒":,
"惰":,
"痴":,
"贪":,
"婪":,
"枸":,
"杞":,
"璎":,
"珞":,
"茄":,
"晾":,
"晒":,
"燥":,
"烘":,
"干":,
"杯":,
"碗":,
"玻":,
"璃":,
"瓶":,
"畅":,
"饮":,
"淋":,
"漓":,
"酣":,
"菊":,
"苣":,
"翡":,
"翠":,
"芽":,
"最":,
"宜":,
"乳":,
"酪":,
"沾":,
*/
"●":[]
};

从字形数组数据到页面内显示文字：

<!DOCTYPE html>
<HTML>

<HEAD>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<TITLE></TITLE>

<STYLE TYPE="TEXT/CSS">

</STYLE>

<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="thousandCharacterForm.js">

<SCRIPT TYPE="TEXT/JAVASCRIPT">

</SCRIPT>

</HEAD>

<BODY>

<SCRIPT TYPE="TEXT/JAVASCRIPT">
for(var character in thousandCharacterForm){

//var cellCaption=document.createElement("div");
//cellCaption.style.cssText="display:inline-block;";
//cellCaption.innerHTML=character;
//document.body.appendChild(cellCaption);

var cell=document.createElement("div");
cell.style.cssText="position:relative;background-color:#ff6666;display:inline-block;margin:5px;";

var formArray=thousandCharacterForm[character];

var cellWidth=0;
var cellHeight=0;

for(var i=0;i<formArray.length;i++){
var x=formArray[i][0];
var y=formArray[i][1];

var cellWidthTo=x*10;
var cellHeightTo=y*10;

if(cellWidthTo>cellWidth){
cellWidth=cellWidthTo;
cell.style.width=cellWidth+30+"px";
}

if(cellHeightTo>cellHeight){
cellHeight=cellHeightTo;
cell.style.height=cellHeight+30+"px";
}

var point=document.createElement("div");
point.style.cssText="position:absolute;background-color:#ffffff;width:10px;height:10px;margin:0px;padding:0px;"
point.style.left=x*10+10+"px";
point.style.top=y*10+10+"px";
cell.appendChild(point);
}

document.body.appendChild(cell);

//var br=document.createElement("br");
//document.body.appendChild(br);

}

</SCRIPT>

</BODY>

</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 字体 font fontCreator font design tools 字体设计工具

相关文章推荐

新的分享

章节导航