javascript 最简单的UI实现（学习）
前些天看到世界javascript程序员有所增加，因此想着也凑凑热闹。看了一些基本的语法，写了些简单的小程序，还挺好使。但是后来也遇到一些问题，比如想写个简单的五子棋的游戏，想画一些数学公式的曲线，并没有找到现呈的东西可使。找了一些javascript的UI设计的东东，自已封装了了个最简单的画线的UI，下面介绍一下。
//zjaUI.js
/**************************************************************
* this is write by zhangjiuan
*************************************************************/
var zjaUI = {
//ui line color
color: ‘#000′,
/**
* set color
**/
setColor: function(color)
{
this.color = color;
},
/**
* draw line dot
* but we may not need draw line dot and dot,
* becourse if x = 0, and y …, so we can draw it as
**/
printDot: function(startX, startY, endX, endY)
{
document.write((’<span style=”position: absolute; left:’ + startX + ‘;top:’ + startY + ‘;width:’ + (endX - startX) + ‘;height:’ +
(endY - startY) + ‘;font-size: 1px; background-color: ‘ + this.color + ‘;”></span>’));
},
/**
* drawLine
**/
drawLine: function(startX, startY, endX, endY)
{
if (startX > endX) {
var temp = endX;
endX = startX;
startX = temp;
temp = endY;
endY = startY;
startY = temp;
}
if (startX == endX) {
this.printDot(startX, startY, (endX + 1), endY);
}
else if (startY == endY) {
this.printDot(startX, startY, endX, (endY + 1));
}
else {
var e = (endY - startY) / (endX - startX);
var tempX = startX;
var widthY;
while (startX < endX) {
tempX++;
widthY = Math.round((tempX - startX) * e);
if (widthY == 0) {
continue;
}
this.printDot(startX, startY, tempX, startY + widthY);
startX = tempX;
startY = startY + widthY;
}
}
}
}
下面写个最简单的页面测试一下：
//test.html
<html>
<head>
<title>zja ui test</title>
<script language=’javascript’ src=’zjaUI.js’></script>
</head>
<body>
<script language=’javascript’>
var oX = 250;
var oY = 200;
function drawXAxis(len)
{
zjaUI.drawLine(oX - len, oY, oX + len, oY);
zjaUI.drawLine(oX + len - 5, oY - 5, oX + len, oY);
zjaUI.drawLine(oX + len - 5, oY + 5, oX + len, oY);
}
function drawYAxis(len)
{
zjaUI.drawLine(oX, oY - len, oX, oY + len);
zjaUI.drawLine(oX - 5, oY - len + 5, oX, oY - len);
zjaUI.drawLine(oX, oY - len, oX + 5, oY - len + 5);
}
function drawSin(axis_len, radius)
{
var eal = ((2 * Math.PI) / axis_len);
var pos = (oX - Math.round(axis_len / 2));
var dig;
var oldX = Math.round(oX - axis_len / 2);
var oldY = oY;
while(pos < (oX + Math.round(axis_len / 2))) {
dig = ((pos - oX) * eal);
cy = (oY + Math.round(Math.sin(dig) * radius / 2));
zjaUI.drawLine(oldX, oldY, pos, cy);
oldX = pos;
oldY = cy;
pos++;
}
}
var AXIS_LEN = 150;
drawXAxis(AXIS_LEN);
drawYAxis(AXIS_LEN);
drawSin(100, 100);
</script>
</body>
</html>
好了，现在运行一下，看下效果吧：）
怎么样，效果不错吧。其实javascript对类还有另外一种写法：
//zjaUI.js
var zjaUI = function() {
//ui line color
color = ‘#000′;
/**
* init color
**/
this.setColor = function(color)
{
this.color = color;
}
/**
* draw line dot
* but we may not need draw line dot and dot,
* becourse if x = 0, and y …, so we can draw it as
**/
function printDot(startX, startY, endX, endY)
{
document.write((’<span style=”position: absolute; left:’ + startX + ‘;top:’ + startY + ‘;width:’ + (endX - startX) + ‘;height:’ +
(endY - startY) + ‘;font-size: 1px; background-color: ‘ + this.color + ‘;”></span>’));
}
/**
* drawLine
**/
this.drawLine = function(startX, startY, endX, endY)
{
if (startX > endX) {
var temp = endX;
endX = startX;
startX = temp;
temp = endY;
endY = startY;
startY = temp;
}
if (startX == endX) {
printDot(startX, startY, (endX + 1), endY);
}
else if (startY == endY) {
printDot(startX, startY, endX, (endY + 1));
}
else {
var e = (endY - startY) / (endX - startX);
var tempX = startX;
var widthY;
while (startX < endX) {
tempX++;
widthY = Math.round((tempX - startX) * e);
if (widthY == 0) {
continue;
}
printDot(startX, startY, tempX, startY + widthY);
startX = tempX;
startY = startY + widthY;
}
}
}
}
//test.html
<html>
<head>
<title>zja ui test</title>
<script language=’javascript’ src=’zjaUI.js’></script>
</head>
<body>
<script language=’javascript’>
zjaUIo = new zjaUI();
var oX = 250;
var oY = 200;
function drawXAxis(len)
{
zjaUIo.drawLine(oX - len, oY, oX + len, oY);
zjaUIo.drawLine(oX + len - 5, oY - 5, oX + len, oY);
zjaUIo.drawLine(oX + len - 5, oY + 5, oX + len, oY);
}
function drawYAxis(len)
{
zjaUIo.drawLine(oX, oY - len, oX, oY + len);
zjaUIo.drawLine(oX - 5, oY - len + 5, oX, oY - len);
zjaUIo.drawLine(oX, oY - len, oX + 5, oY - len + 5);
}
function drawSin(axis_len, radius)
{
var eal = ((2 * Math.PI) / axis_len);
var pos = (oX - Math.round(axis_len / 2));
var dig;
var oldX = Math.round(oX - axis_len / 2);
var oldY = oY;
while(pos < (oX + Math.round(axis_len / 2))) {
dig = ((pos - oX) * eal);
cy = (oY + Math.round(Math.sin(dig) * radius / 2));
zjaUIo.drawLine(oldX, oldY, pos, cy);
oldX = pos;
oldY = cy;
pos++;
}
}
var AXIS_LEN = 150;
drawXAxis(AXIS_LEN);
drawYAxis(AXIS_LEN);
drawSin(100, 100);
</script>
</body>
</html>
测试一下，效果依旧。
thx
张久安
If you enjoyed this post, make sure you subscribe to my RSS feed!
10 Comments, Comment or Ping
Zhou Renjian
JavaScript类的另外一种写法是，先写好Java类，再用Java2Script ( http://j2s.sourceforge.net/ ) 或 GWT ( http://code.google.com/webtoolkit/ ) 将标准Java类转成JavaScript。
友情提醒一下，你应该把wordpress系统升级到wordpress 2.8.4+；旧版本有漏洞，可以清空整个wordpress数据库。
Sep 8th, 2009
houkai
javascript +chrome 看来前景很好
Sep 16th, 2009
snow
html5支持canvas，基本除了ie其他浏览器都支持
Nov 27th, 2009
淘宝网女装
还可以
Jan 6th, 2010
广州服装批发市场
写得还可以
Jan 6th, 2010
淘宝网网上购物女装
你这里比我那里热闹啊。
[url=http://www.xinkai.net]广州服装批发市场[/url]
Jan 12th, 2010
人性本色
呵呵。还行
Jan 12th, 2010
网上购物最新女冬装
你这里比我那里热闹啊。哈哈哈
Jan 13th, 2010
vmware
还可以
Jan 16th, 2010
logo素材
写得不错
Jan 19th, 2010
Reply to “javascript 最简单的UI实现（学习）”
You must be logged in to post a comment.