计算机图形学中直线连接算法的Javascript实现

之前在想如何使用Javascript实现时钟的时候，被一个问题难到了：如何在像素级别绘制平滑的直线。

在网上查了一下，后来在图书馆里的一本关于计算机图形学的老书里发现了解决方案。针对这个问题，书上提供了三个算法，分别是简单DDA,对称DDA,Bresenham算法。

下面的是我使用简单DDA和Bresenham算法在浏览器上绘制Hello world的代码。

这里的Hello world 分别是定义了字母的一些”节点“，然后使用连线算法绘制出来的。

代码：

1. //构造画布，使用DOM动态生成表格
2. var _container = document.getElementById("container");
3. var pixs = new Array();
4. var canvasTbody = document.createElement("tbody");
5. var bgColor = "black";
6. var fontColor = "green";
7. var pix_size = "4px";
8. var pix_numbs = 81;
10. var temp_tr ;
11. var temp_td ;
12. var temp_pixrow;
14. for(var i = pix_numbs; i >= 0 ; i--){
15.     temp_tr = document.createElement("tr");
16.     temp_tr.style.height = pix_size;
17.     temp_pixrow = new Array();
18.     for(var j = 0; j <= pix_numbs ; j++){
19.         temp_td = document.createElement("td");
20.         temp_td.style.width=pix_size;
21.         temp_td.style.backgroundColor = bgColor;
22.         temp_tr.appendChild(temp_td);
23.         temp_pixrow[j] = temp_td;
24.     }
25.     canvasTbody.appendChild(temp_tr);
26.     pixs[i] = temp_pixrow;
27. }
28. var canvasTable = document.createElement("table");
29. canvasTable.style.backgroundColor = "black";
30. canvasTable.setAttribute("cellspacing","0");
31. canvasTable.setAttribute("cellpadding","0");
32. canvasTable.appendChild(canvasTbody);
33. _container.appendChild(canvasTable);
36. // 点 类，包含坐标信息，有绘制和比较操作
37. function point(_x,_y){
38.     this.x = _x;
39.     this.y = _y;
40. }
42. function _draw(){
43.     if(this.x > pix_numbs || this.y > pix_numbs){
44.         return;
45.     }
46.     pixs[this.y][this.x].style.backgroundColor = fontColor;
47. }
49. point.prototype.draw = _draw;
51. function _equal(_p){
52.     if(! _p instanceof point){
53.         throw new Error();
54.     }
55.     if(this.x == _p.x && this.y == _p.y){
56.         return true;
57.     }else{
58.         return false;
59.     }
60. }
62. point.prototype.equal = _equal;
65. //简单DDA算法构造直线
66. function DDA_line(_p1,_p2){
67.     var x1;
68.     var y1;
69.     var x2;
70.     var y2;
71.     var _x;
72.     var _y;
73.     var _p;
74.     var k;
75.     var b;
76.     
77.     
78.     if(_p1 instanceof point && _p2 instanceof point){
79.     }else{
80.         return ;
81.     }
82.     
83.     if(_p1.equal(_p2)){
84.         return ;
85.     }
86.     
87.     
88.     if(_p1.x > _p2.x){
89.         x1 = _p2.x;
90.         y1 = _p2.y;
91.         x2 = _p1.x;
92.         y2 = _p1.y;
93.     }else if(_p1.x < _p2.x){
94.         x1 = _p1.x;
95.         y1 = _p1.y;
96.         x2 = _p2.x;
97.         y2 = _p2.y;
98.     }else if(_p1.x == _p2.x){
99.         if(_p1.y > _p2.y){
100.             x1 = _p2.x;
101.             y1 = _p2.y;
102.             x2 = _p1.x;
103.             y2 = _p1.y;
104.         }else{
105.             x1 = _p1.x;
106.             y1 = _p1.y;
107.             x2 = _p2.x;
108.             y2 = _p2.y;
109.         }
110.     }
111.     
112.     
113.     if(x1 == x2){
114.         _x = x1;
115.         _y = y1;
116.         for(;_y != y2;_y++){
117.             _p = new point(_x,_y);
118.             _p.draw();
119.         }
120.     }else{
121.         k = (y2 - y1)/(x2 - x1);
122.         b = y1-(k*x1);
123.         if(Math.abs(k) <= 1){
124.         _x = x1;
125.             for(;_x != x2;_x++){
126.                 _y = (k*_x) +b;
127.                 _y = Math.round(_y);
128.                 _p = new point(_x,_y);
129.                 _p.draw();
130.             }
131.         }else{
132.             _y = y1;
133.             while(_y != y2){
134.                 _x = (_y-b)/k;
135.                 _x = Math.round(_x);
136.                 _p = new point(_x,_y);
137.                 _p.draw();
138.                 if(y2 > y1){
139.                     _y++;
140.                 }else{
141.                     _y--;
142.                 }
143.             }
144.         }
145.     }
146. }
148. //Bresenham算法构造直线
149. function Bresenham_line(_p1,_p2){
150.     var x1;
151.     var y1;
152.     var x2;
153.     var y2;
154.     var _x;
155.     var _y;
156.     var _p;
157.     var k;
158.     var d;
160.     if(_p1 instanceof point && _p2 instanceof point){
161.     }else{
162.         return ;
163.     }
164.     
165.     if(_p1.equal(_p2)){
166.         return ;
167.     }
168.     
169.         if(_p1.x > _p2.x){
170.         x1 = _p2.x;
171.         y1 = _p2.y;
172.         x2 = _p1.x;
173.         y2 = _p1.y;
174.     }else if(_p1.x < _p2.x){
175.         x1 = _p1.x;
176.         y1 = _p1.y;
177.         x2 = _p2.x;
178.         y2 = _p2.y;
179.     }else if(_p1.x == _p2.x){
180.         if(_p1.y > _p2.y){
181.             x1 = _p2.x;
182.             y1 = _p2.y;
183.             x2 = _p1.x;
184.             y2 = _p1.y;
185.         }else{
186.             x1 = _p1.x;
187.             y1 = _p1.y;
188.             x2 = _p2.x;
189.             y2 = _p2.y;
190.         }
191.     }
192.     
193.     if(x1 == x2){
194.         _x = x1;
195.         _y = y1;
196.         for(;_y != y2;_y++){
197.             _p = new point(_x,_y);
198.             _p.draw();
199.         }
200.     }else{
201.         k = (y2 - y1)/(x2 - x1);
202.         _x = x1;
203.         _y = y1;
204.         if(k >= 0 && k <= 1){
205.             d = 2*(y2 - y1) - (x2 - x1);
206.             while(_x != x2){
207.                 if(d >= 0){
208.                     _y++;
209.                     d = d - 2*(x2 - x1);
210.                 }
211.                 _p = new point(_x,_y);
212.                 _p.draw();
213.                 _x++;
214.                 d = d + 2*(y2 - y1);
215.             }
216.         }else if(k > 1){
217.             d = 2*(x2 - x1) - (y2 - y1);
218.             while(_y != y2){
219.                 if(d >= 0){
220.                     _x++;
221.                     d = d - 2*(y2 - y1); 
222.                 }
223.                 _p = new point(_x,_y);
224.                 _p.draw();
225.                 _y++;
226.                 d = d + 2*(x2 - x1);
227.             }
228.         }else if(k < 0 && k >= -1){
229.             d = 2*(y2 - y1) +(x2 - x1);
230.             while(_x != x2){
231.                 if(d <= 0){
232.                     _y--;
233.                     d = d + 2*(x2 - x1);
234.                 }
235.                 _p = new point(_x,_y);
236.                 _p.draw();
237.                 _x++;
238.                 d = d + 2*(y2 - y1);
239.             }
240.         }else if(k < -1){
241.             d = 2*(x2 - x1) + (y2 - y1);
242.             while(_y != y2){
243.                 if(d >= 0){
244.                     _x++;
245.                     d = d - 2*(y1 - y2);
246.                 }
247.                 _p = new point(_x,_y);
248.                 _p.draw();
249.                 _y--;
250.                 d = d + 2*(x2 - x1);
251.             }
252.         }
253.     }
254.     
255. }
257. //绘制X
258. var x1 = new point(5,60);
259. x1.draw();
260. var x2 = new point(77,60);
261. x2.draw();
262. var x3 = new point(5,25);
263. x3.draw();
264. var x4 = new point(77,25);
265. x4.draw();
266. Bresenham_line(x1,x4);
267. Bresenham_line(x2,x3);
270. //绘制HELLO WORLD
272. var p1 = new point(5,20);
273. p1.draw();
274. var p2 = new point(5,15);
275. p2.draw();
276. var p3 = new point(5,10);
277. p3.draw();
278. var p4 = new point(10,20);
279. p4.draw();
280. var p5 = new point(10,15);
281. p5.draw();
282. var p6 = new point(10,10);
283. p6.draw();
285. DDA_line(p1,p3);
286. DDA_line(p2,p5);
287. DDA_line(p4,p6);
289. p1 = new point(12,20);
290. p1.draw();
291. p2 = new point(12,15);
292. p2.draw();
293. p3 = new point(12,10);
294. p3.draw();
295. p4 = new point(17,20);
296. p4.draw();
297. p5 = new point(17,15);
298. p5.draw();
299. p6 = new point(17,10);
300. p6.draw();
302. DDA_line(p1,p3);
303. DDA_line(p1,p4);
304. DDA_line(p2,p5);
305. DDA_line(p3,p6);
308. p1 = new point(19,20);
309. p1.draw();
310. p2 = new point(19,10);
311. p2.draw();
312. p3 = new point(24,10);
313. p3.draw();
315. DDA_line(p1,p2);
316. DDA_line(p2,p3);
318. p1 = new point(26,20);
319. p1.draw();
320. p2 = new point(26,10);
321. p2.draw();
322. p3 = new point(31,10);
323. p3.draw();
325. DDA_line(p1,p2);
326. DDA_line(p2,p3);
329. p1 = new point(33,20);
330. p1.draw();
331. p2 = new point(33,10);
332. p2.draw();
333. p3 = new point(38,20);
334. p3.draw();
335. p4 = new point(38,10);
336. p4.draw();
338. DDA_line(p1,p2);
339. DDA_line(p3,p4);
340. DDA_line(p1,p3);
341. DDA_line(p2,p4);
344. p1 = new point(45,20);
345. p1.draw();
346. p2 = new point(45,10);
347. p2.draw();
348. p3 = new point(47,15);
349. p3.draw();
350. p4 = new point(49,10);
351. p4.draw();
352. p5 = new point(49,20);
353. p5.draw();
355. DDA_line(p1,p2);
356. DDA_line(p2,p3);
357. DDA_line(p3,p4);
358. DDA_line(p4,p5);
361. p1 = new point(51,20);
362. p1.draw();
363. p2 = new point(51,10);
364. p2.draw();
365. p3 = new point(56,20);
366. p3.draw();
367. p4 = new point(56,10);
368. p4.draw();
370. DDA_line(p1,p2);
371. DDA_line(p3,p4);
372. DDA_line(p1,p3);
373. DDA_line(p2,p4);
376. p1 = new point(58,20);
377. p1.draw();
378. p2 = new point(58,16);
379. p2.draw();
380. p3 = new point(58,10);
381. p3.draw();
382. p4 = new point(63,20);
383. p4.draw();
384. p5 = new point(63,16);
385. p5.draw();
386. p6 = new point(63,10);
387. p6.draw();
389. DDA_line(p1,p3);
390. DDA_line(p1,p4);
391. DDA_line(p4,p5);
392. DDA_line(p2,p5);
393. DDA_line(p2,p6);
396. p1 = new point(65,20);
397. p1.draw();
398. p2 = new point(65,10);
399. p2.draw();
400. p3 = new point(70,10);
401. p3.draw();
403. DDA_line(p1,p2);
404. DDA_line(p2,p3);
406. p1 = new point(72,20);
407. p1.draw();
408. p2 = new point(72,10);
409. p2.draw();
410. p3 = new point(77,20);
411. p3.draw();
412. p4 = new point(77,14);
413. p4.draw();
415. DDA_line(p1,p2);
416. DDA_line(p3,p4);
417. DDA_line(p1,p3);
418. DDA_line(p2,p4);

使用方法是在网页中建一个id为”container“的容器，可以是”div“标签

然后把Javascript文件链接进来。即可。

说明：在IE中测试时，有点丑陋。是因为我不知道在IE中使用Javascript动态生成的tbody标签中的单元格之间的间距如何控制。

其他浏览器均可以正常显示。