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

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

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

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

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

代码：

1. //构造画布，使用DOM动态生成表格
2. var_container=document.getElementById("container");
3. varpixs=newArray();
4. varcanvasTbody=document.createElement("tbody");
5. varbgColor="black";
6. varfontColor="green";
7. varpix_size="4px";
8. varpix_numbs=81;
10. vartemp_tr;
11. vartemp_td;
12. vartemp_pixrow;
14. for(vari=pix_numbs;i>=0;i--){
15. temp_tr=document.createElement("tr");
16. temp_tr.style.height=pix_size;
17. temp_pixrow=newArray();
18. for(varj=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. varcanvasTable=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. functionpoint(_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(!_pinstanceofpoint){
53. thrownewError();
54. }
55. if(this.x==_p.x&&this.y==_p.y){
56. returntrue;
57. }else{
58. returnfalse;
59. }
60. }
62. point.prototype.equal=_equal;
65. //简单DDA算法构造直线
66. functionDDA_line(_p1,_p2){
67. varx1;
68. vary1;
69. varx2;
70. vary2;
71. var_x;
72. var_y;
73. var_p;
74. vark;
75. varb;
78. if(_p1instanceofpoint&&_p2instanceofpoint){
79. }else{
80. return;
81. }
83. if(_p1.equal(_p2)){
84. return;
85. }
88. if(_p1.x>_p2.x){
89. x1=_p2.x;
90. y1=_p2.y;
91. x2=_p1.x;
92. y2=_p1.y;
93. }elseif(_p1.x<_p2.x){
94. x1=_p1.x;
95. y1=_p1.y;
96. x2=_p2.x;
97. y2=_p2.y;
98. }elseif(_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. }
113. if(x1==x2){
114. _x=x1;
115. _y=y1;
116. for(;_y!=y2;_y++){
117. _p=newpoint(_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=newpoint(_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=newpoint(_x,_y);
137. _p.draw();
138. if(y2>y1){
139. _y++;
140. }else{
141. _y--;
142. }
143. }
144. }
145. }
146. }
148. //Bresenham算法构造直线
149. functionBresenham_line(_p1,_p2){
150. varx1;
151. vary1;
152. varx2;
153. vary2;
154. var_x;
155. var_y;
156. var_p;
157. vark;
158. vard;
160. if(_p1instanceofpoint&&_p2instanceofpoint){
161. }else{
162. return;
163. }
165. if(_p1.equal(_p2)){
166. return;
167. }
169. if(_p1.x>_p2.x){
170. x1=_p2.x;
171. y1=_p2.y;
172. x2=_p1.x;
173. y2=_p1.y;
174. }elseif(_p1.x<_p2.x){
175. x1=_p1.x;
176. y1=_p1.y;
177. x2=_p2.x;
178. y2=_p2.y;
179. }elseif(_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. }
193. if(x1==x2){
194. _x=x1;
195. _y=y1;
196. for(;_y!=y2;_y++){
197. _p=newpoint(_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=newpoint(_x,_y);
212. _p.draw();
213. _x++;
214. d=d+2*(y2-y1);
215. }
216. }elseif(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=newpoint(_x,_y);
224. _p.draw();
225. _y++;
226. d=d+2*(x2-x1);
227. }
228. }elseif(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=newpoint(_x,_y);
236. _p.draw();
237. _x++;
238. d=d+2*(y2-y1);
239. }
240. }elseif(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=newpoint(_x,_y);
248. _p.draw();
249. _y--;
250. d=d+2*(x2-x1);
251. }
252. }
253. }
255. }
257. //绘制X
258. varx1=newpoint(5,60);
259. x1.draw();
260. varx2=newpoint(77,60);
261. x2.draw();
262. varx3=newpoint(5,25);
263. x3.draw();
264. varx4=newpoint(77,25);
265. x4.draw();
266. Bresenham_line(x1,x4);
267. Bresenham_line(x2,x3);
270. //绘制HELLOWORLD
272. varp1=newpoint(5,20);
273. p1.draw();
274. varp2=newpoint(5,15);
275. p2.draw();
276. varp3=newpoint(5,10);
277. p3.draw();
278. varp4=newpoint(10,20);
279. p4.draw();
280. varp5=newpoint(10,15);
281. p5.draw();
282. varp6=newpoint(10,10);
283. p6.draw();
285. DDA_line(p1,p3);
286. DDA_line(p2,p5);
287. DDA_line(p4,p6);
289. p1=newpoint(12,20);
290. p1.draw();
291. p2=newpoint(12,15);
292. p2.draw();
293. p3=newpoint(12,10);
294. p3.draw();
295. p4=newpoint(17,20);
296. p4.draw();
297. p5=newpoint(17,15);
298. p5.draw();
299. p6=newpoint(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=newpoint(19,20);
309. p1.draw();
310. p2=newpoint(19,10);
311. p2.draw();
312. p3=newpoint(24,10);
313. p3.draw();
315. DDA_line(p1,p2);
316. DDA_line(p2,p3);
318. p1=newpoint(26,20);
319. p1.draw();
320. p2=newpoint(26,10);
321. p2.draw();
322. p3=newpoint(31,10);
323. p3.draw();
325. DDA_line(p1,p2);
326. DDA_line(p2,p3);
329. p1=newpoint(33,20);
330. p1.draw();
331. p2=newpoint(33,10);
332. p2.draw();
333. p3=newpoint(38,20);
334. p3.draw();
335. p4=newpoint(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=newpoint(45,20);
345. p1.draw();
346. p2=newpoint(45,10);
347. p2.draw();
348. p3=newpoint(47,15);
349. p3.draw();
350. p4=newpoint(49,10);
351. p4.draw();
352. p5=newpoint(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=newpoint(51,20);
362. p1.draw();
363. p2=newpoint(51,10);
364. p2.draw();
365. p3=newpoint(56,20);
366. p3.draw();
367. p4=newpoint(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=newpoint(58,20);
377. p1.draw();
378. p2=newpoint(58,16);
379. p2.draw();
380. p3=newpoint(58,10);
381. p3.draw();
382. p4=newpoint(63,20);
383. p4.draw();
384. p5=newpoint(63,16);
385. p5.draw();
386. p6=newpoint(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=newpoint(65,20);
397. p1.draw();
398. p2=newpoint(65,10);
399. p2.draw();
400. p3=newpoint(70,10);
401. p3.draw();
403. DDA_line(p1,p2);
404. DDA_line(p2,p3);
406. p1=newpoint(72,20);
407. p1.draw();
408. p2=newpoint(72,10);
409. p2.draw();
410. p3=newpoint(77,20);
411. p3.draw();
412. p4=newpoint(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标签中的单元格之间的间距如何控制。

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