1
/*
2
**
3
** Drawing.js
4
**
5
** created by luoluo
6
**
7
** 2005-08-05
8
**
9
** 基础画图类库
10
**
11
*/
12![](/Images/OutliningIndicators/None.gif)
13
//
14
// 点类
15
//
16
function Point(_x, _y) {
17
this.x = _x;
18
this.y = _y;
19
}
20![](/Images/OutliningIndicators/None.gif)
21
//
22
// 画板类
23
//
24
function DrawingPannel(_parent, _width, _height, _backgroundColor) {
25
this.parent = _parent;
26
this.width = _width;
27
this.height = _height;
28
this.backgroundColor = _backgroundColor;
29
this.foreColor = "#000000";
30
this.curPoint = new Point(0, 0);
31
32
//
33
// 创建画板
34
this.rootNode = document.createElement("TABLE");
35
this.rootNode.border = 0;
36
this.rootNode.cellSpacing = 0;
37
this.rootNode.cellPadding = 0;
38
this.rootNode.style.backgroundColor = this.backgroundColor;
39
40
//
41
// 初始化画板上的点阵
42
var oNewTBODY = document.createElement("TBODY");
43
var oNewTR;
44
var oNewTD;
45
46
for (var i = 0; i < this.height; i ++) {
47
oNewTR = document.createElement("TR");
48
49
for (var j = 0; j < this.width; j ++) {
50
oNewTD = document.createElement("TD");
51
oNewTD.height = 1;
52
oNewTD.width = 1;
53
oNewTR.appendChild(oNewTD);
54
}
55
56
oNewTBODY.appendChild(oNewTR);
57
}
58
59
this.rootNode.appendChild(oNewTBODY);
60
this.parent.appendChild(this.rootNode);
61
62
//
63
// 设置起始点
64
this.setPoint = function _setPoint(_x, _y) {
65
if (_x > this.width || _y > this.height)
66
throw this.constructor + "类的setPoint方法传入的坐标参数越界";
67
68
this.curPoint.x = _x;
69
this.curPoint.y = _y;
70
}
71
72
//
73
// 设置前景色
74
this.setForeColor = function _setForeColor(_color) {
75
this.foreColor = _color;
76
}
77
78
//
79
// 绘制直线
80
this.lineTo = function _lineTo(_x, _y) {
81
if (_x > this.width || _y > this.height)
82
throw this.constructor + "类的lineTo方法传入的坐标参数越界";
83
84
var x, y;
85
var mi, ma;
86
87
if (_x == this.curPoint.x) {
88
//
89
// 处理直线点斜公式的特殊情况:两点x坐标相同
90
x = _x;
91
92
mi = Math.min(this.curPoint.y, _y);
93
ma = Math.max(this.curPoint.y, _y);
94
95
for (y = mi; y < ma; y ++) {
96
this.rootNode.tBodies[0].rows[y].cells[x].style.backgroundColor = this.foreColor;
97
}
98
} else if (_y == this.curPoint.y) {
99
//
100
// 处理两点y坐标相同的情况
101
y = _y;
102
103
mi = Math.min(this.curPoint.x, _x);
104
ma = Math.max(this.curPoint.x, _x);
105
106
for (x = mi; x < ma; x ++) {
107
this.rootNode.tBodies[0].rows[y].cells[x].style.backgroundColor = this.foreColor;
108
}
109
110
} else {
111
//
112
// 普通情况
113
if (this.curPoint.x < _x) {
114
for (x = this.curPoint.x; x < _x; x ++) {
115
//
116
// 根据直线的点斜公式计算y坐标
117
y = (parseFloat((_y - this.curPoint.y).toString()) / (_x - this.curPoint.x)) * (x - this.curPoint.x) + this.curPoint.y;
118![](/Images/OutliningIndicators/InBlock.gif)
119
//
120
// 根据y坐标的小数部分大小取整
121
y = (y - Math.floor(y)) < (Math.ceil(y) - y) ? Math.floor(y) : Math.ceil(y);
122
123
this.rootNode.tBodies[0].rows[y].cells[x].style.backgroundColor = this.foreColor;
124
}
125
} else {
126
for (x = this.curPoint.x; x > _x; x --) {
127
//
128
// 根据直线的点斜公式计算y坐标
129
y = (parseFloat((_y - this.curPoint.y).toString()) / (_x - this.curPoint.x)) * (x - this.curPoint.x) + this.curPoint.y;
130![](/Images/OutliningIndicators/InBlock.gif)
131
//
132
// 根据y坐标的小数部分大小取整
133
y = (y - Math.floor(y)) < (Math.ceil(y) - y) ? Math.floor(y) : Math.ceil(y);
134
135
this.rootNode.tBodies[0].rows[y].cells[x].style.backgroundColor = this.foreColor;
136
}
137
}
138
}
139
}
140
141
//
142
// 绘制方形
143
function drawRect(_x, _y, _backgroundColor) {
144
145
}
146
147
//
148
// 绘制圆形
149
function drawCircle(_r, _backgroundColor) {
150
151
}
152
}
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](/Images/OutliningIndicators/InBlock.gif)
3
![](/Images/OutliningIndicators/InBlock.gif)
4
![](/Images/OutliningIndicators/InBlock.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
15
![](/Images/OutliningIndicators/None.gif)
16
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
20
![](/Images/OutliningIndicators/None.gif)
21
![](/Images/OutliningIndicators/None.gif)
22
![](/Images/OutliningIndicators/None.gif)
23
![](/Images/OutliningIndicators/None.gif)
24
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/InBlock.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/InBlock.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/InBlock.gif)
46
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/InBlock.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/InBlock.gif)
54
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/InBlock.gif)
57
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
58
![](/Images/OutliningIndicators/InBlock.gif)
59
![](/Images/OutliningIndicators/InBlock.gif)
60
![](/Images/OutliningIndicators/InBlock.gif)
61
![](/Images/OutliningIndicators/InBlock.gif)
62
![](/Images/OutliningIndicators/InBlock.gif)
63
![](/Images/OutliningIndicators/InBlock.gif)
64
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
65
![](/Images/OutliningIndicators/InBlock.gif)
66
![](/Images/OutliningIndicators/InBlock.gif)
67
![](/Images/OutliningIndicators/InBlock.gif)
68
![](/Images/OutliningIndicators/InBlock.gif)
69
![](/Images/OutliningIndicators/InBlock.gif)
70
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
71
![](/Images/OutliningIndicators/InBlock.gif)
72
![](/Images/OutliningIndicators/InBlock.gif)
73
![](/Images/OutliningIndicators/InBlock.gif)
74
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
75
![](/Images/OutliningIndicators/InBlock.gif)
76
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
77
![](/Images/OutliningIndicators/InBlock.gif)
78
![](/Images/OutliningIndicators/InBlock.gif)
79
![](/Images/OutliningIndicators/InBlock.gif)
80
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
81
![](/Images/OutliningIndicators/InBlock.gif)
82
![](/Images/OutliningIndicators/InBlock.gif)
83
![](/Images/OutliningIndicators/InBlock.gif)
84
![](/Images/OutliningIndicators/InBlock.gif)
85
![](/Images/OutliningIndicators/InBlock.gif)
86
![](/Images/OutliningIndicators/InBlock.gif)
87
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
88
![](/Images/OutliningIndicators/InBlock.gif)
89
![](/Images/OutliningIndicators/InBlock.gif)
90
![](/Images/OutliningIndicators/InBlock.gif)
91
![](/Images/OutliningIndicators/InBlock.gif)
92
![](/Images/OutliningIndicators/InBlock.gif)
93
![](/Images/OutliningIndicators/InBlock.gif)
94
![](/Images/OutliningIndicators/InBlock.gif)
95
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
96
![](/Images/OutliningIndicators/InBlock.gif)
97
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
98
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
99
![](/Images/OutliningIndicators/InBlock.gif)
100
![](/Images/OutliningIndicators/InBlock.gif)
101
![](/Images/OutliningIndicators/InBlock.gif)
102
![](/Images/OutliningIndicators/InBlock.gif)
103
![](/Images/OutliningIndicators/InBlock.gif)
104
![](/Images/OutliningIndicators/InBlock.gif)
105
![](/Images/OutliningIndicators/InBlock.gif)
106
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
107
![](/Images/OutliningIndicators/InBlock.gif)
108
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
109
![](/Images/OutliningIndicators/InBlock.gif)
110
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
111
![](/Images/OutliningIndicators/InBlock.gif)
112
![](/Images/OutliningIndicators/InBlock.gif)
113
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
114
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
115
![](/Images/OutliningIndicators/InBlock.gif)
116
![](/Images/OutliningIndicators/InBlock.gif)
117
![](/Images/OutliningIndicators/InBlock.gif)
118
![](/Images/OutliningIndicators/InBlock.gif)
119
![](/Images/OutliningIndicators/InBlock.gif)
120
![](/Images/OutliningIndicators/InBlock.gif)
121
![](/Images/OutliningIndicators/InBlock.gif)
122
![](/Images/OutliningIndicators/InBlock.gif)
123
![](/Images/OutliningIndicators/InBlock.gif)
124
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
125
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
126
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
127
![](/Images/OutliningIndicators/InBlock.gif)
128
![](/Images/OutliningIndicators/InBlock.gif)
129
![](/Images/OutliningIndicators/InBlock.gif)
130
![](/Images/OutliningIndicators/InBlock.gif)
131
![](/Images/OutliningIndicators/InBlock.gif)
132
![](/Images/OutliningIndicators/InBlock.gif)
133
![](/Images/OutliningIndicators/InBlock.gif)
134
![](/Images/OutliningIndicators/InBlock.gif)
135
![](/Images/OutliningIndicators/InBlock.gif)
136
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
137
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
138
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
139
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
140
![](/Images/OutliningIndicators/InBlock.gif)
141
![](/Images/OutliningIndicators/InBlock.gif)
142
![](/Images/OutliningIndicators/InBlock.gif)
143
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
144
![](/Images/OutliningIndicators/InBlock.gif)
145
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
146
![](/Images/OutliningIndicators/InBlock.gif)
147
![](/Images/OutliningIndicators/InBlock.gif)
148
![](/Images/OutliningIndicators/InBlock.gif)
149
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
150
![](/Images/OutliningIndicators/InBlock.gif)
151
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
152
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
1
<html>
2
<head>
3
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4
<title>画图例子</title>
5
<script language="javascript" src="Drawing.js"></script>
6
</head>
7![](/Images/OutliningIndicators/None.gif)
8
<body>
9
<div id="pannel"></div>
10
<script language="javascript">
11
<!--
12
var dp = new DrawingPannel(document.getElementById("pannel"), 300, 200, "#CCCCCC");
13
try {
14
dp.setPoint(150, 100);
15
dp.setForeColor("red");
16
dp.lineTo(150, 190);
17
dp.setForeColor("yellow");
18
dp.lineTo(20, 100);
19
dp.setForeColor("blue");
20
dp.lineTo(1, 1);
21
} catch (ex) {
22
alert(ex);
23
}
24
-->
25
</script>
26
</body>
27
</html>
28![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
24
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
25
![](/Images/OutliningIndicators/None.gif)
26
![](/Images/OutliningIndicators/None.gif)
27
![](/Images/OutliningIndicators/None.gif)
28
![](/Images/OutliningIndicators/None.gif)