javascript 最简单的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>
测试一下,效果依旧。
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:zja601 来源: Zhang Jiuan' Notes
- 标签: UI实现
- 发布时间:2009-11-10 12:34:11
- [44] 界面设计速成
- [42] Oracle MTS模式下 进程地址与会话信
- [41] android 开发入门
- [40] IOS安全–浅谈关于IOS加固的几种方法
- [40] 图书馆的世界纪录
- [39] 视觉调整-设计师 vs. 逻辑
- [38] 如何拿下简短的域名
- [38] 程序员技术练级攻略
- [37] 【社会化设计】自我(self)部分――欢迎区
- [35] 读书笔记-壹百度:百度十年千倍的29条法则