JavaScript与Java生成N*N阶方格图的四种方式

最新推荐文章于 2022-09-21 18:48:53 发布

weixin_33898876

最新推荐文章于 2022-09-21 18:48:53 发布

阅读量381

点赞数

文章标签： javascript java 前端 ViewUI

原文链接：https://yq.aliyun.com/articles/412959

版权

想要生成N*N7方格图在浏览器页面显示，解决策略是浏览器端之间生成和服务器端生成后返回到前端。

具体效果图如下图canvas：

说明：格子图有红色格子和黑色格子组成，红色默认颜色，黑色是对要特殊显示个格子做出标记。

生成九宫格的图案，想了四种方式，JavaScript实现了三种，Java实现一种。

1.JavaScript生成Table的方式产生方格子。

生成效果图table:

源代码：

 
         //表格生成 
        
         function  
         drawTable(edge, n) { 
        
         var  
         size = edge / n; 
        
         var  
         sb =  
         new  
         StringBuffer(); 
        
         sb.append( 
         "<table border='1' height='"  
         + edge +  
         "' width='"  
         + edge +  
         "' bgcolor='red'>" 
         ); 
        
         for  
         ( 
         var  
         i = 0; i < n; i++) { 
        
         sb.append( 
         "<tr>" 
         ); 
        
         for  
         ( 
         var  
         j = 0; j < n; j++) { 
        
         var  
         p = i +  
         ''  
         + j; 
        
         sb.append( 
         "<td width='"  
         + size +  
         "' height='"  
         + size +  
         "' " 
         ); 
        
         if  
         (point.contains(p)) { 
        
         sb.append( 
         " bgcolor='#000000' >" 
         ); 
        
         }  
         else  
         { 
        
         sb.append( 
         " bgcolor='#FFFFFF' >" 
         ); 
        
         } 
        
         sb.append( 
         "</td>" 
         ); 
        
         } 
        
         sb.append( 
         "</tr>" 
         ); 
        
         } 
        
         sb.append( 
         "</table>" 
         ); 
        
         document.getElementById( 
         "div" 
         ).innerHTML = sb.toString(); 
        
         }

说明:参数edge:表示Table的width和height的像素，n表示正方形Table中一行的小格子数目。

2.JavaScript通过span标签组合和纯色图片生成方格。

生成效果图span:

源代码：

 
         function  
         drawImage(edge, n) { 
        
         var  
         size = edge / n; 
        
         var  
         flag = n >= 100 ? 100 : 100 > n >= 75 ? 75 : 75 > n >= 50 ? 50 : 25; 
        
         var  
         imgetrue =  
         "cell/" 
         +flag+ 
         "/1.png" 
         ; 
        
         var  
         imgefalse =  
         "cell/" 
         +flag+ 
         "/0.png" 
         ; 
        
         var  
         sb =  
         new  
         StringBuffer(); 
        
         for  
         ( 
         var  
         i = 0; i < n; i++) { 
        
         sb.append( 
         "<span>" 
         ); 
        
         for  
         ( 
         var  
         j = 0; j < n; j++) { 
        
         var  
         p = i +  
         ''  
         + j; 
        
         if  
         (point.contains(p)) { 
        
         sb.append( 
         "<img src='" 
         +imgetrue+ 
         "' " 
         ); 
        
         }  
         else  
         { 
        
         sb.append( 
         "<img src='" 
         +imgefalse+ 
         "' " 
         ); 
        
         } 
        
         sb.append( 
         "width='"  
         + size +  
         "' height='"  
         + size +  
         "'/>" 
         ); 
        
         } 
        
         sb.append( 
         "</span><br/>" 
         ) 
        
         } 
        
         document.getElementById( 
         "div" 
         ).innerHTML = sb.toString(); 
        
         }

说明：参数同上。

使用两种纯色width==height的图片，并且有不同的像素，生成策略将根据一行的小格子数量来决定使用不同像素的图片。

3.使用HTML的Canvas功能绘制。

效果图参见本文第一幅图canvas.

源代码：

 
         //HTML5Canvas绘制 
        
         function  
         drawCanvas(edge, n) { 
        
         document.getElementById( 
         "div" 
         ).innerHTML= 
         "" 
         ; 
        
         var  
         size = edge / n; 
        
         canvas=document.getElementById( 
         "canvas" 
         ); 
        
         canvas.setAttribute( 
         "height" 
         , edge); 
        
         canvas.setAttribute( 
         "width" 
         , edge); 
        
         cxt=canvas.getContext( 
         '2d' 
         ); 
        
         cxt.strokeStyle= 
         "rgb(255, 255, 255)" 
         ; 
        
         for 
         ( 
         var  
         i=0; i<n; i++){ 
        
         for 
         ( 
         var  
         j=0; j<n; j++){ 
        
         var  
         p=i+ 
         "" 
         +j; 
        
         if 
         (point.contains(p)){ 
        
         cxt.fillStyle= 
         "rgb(0, 0, 0)" 
         ; 
        
         } 
         else 
         { 
        
         cxt.fillStyle= 
         "rgb(255, 0, 0)" 
         ; 
        
         } 
        
         cxt.fillRect(size*j,size*i,size,size); 
        
         cxt.strokeRect(size*j,size*i,size,size); 
        
         } 
        
         } 
        
         }

说明：参数同上。

fillRect(x,y,w,h);绘制填充的矩形

strokeRect(x,y,w,h);绘制线条的矩形

上面两次反复绘制矩形，通过fillRect和strokeRect方法使的绘制的方格具有填充色和边框。

使用HTML5的Canvas绘制则需要支持HTML5的浏览器支持。

4.使用Java的生成N*N阶的方格图片

效果图:

关键代码：

 
         BufferedImage bimage =  
         new  
         BufferedImage(edgePixel * n, edgePixel * n, 
        
         BufferedImage.TYPE_INT_RGB); 
        
         Graphics2D g2d = bimage.createGraphics(); 
        
         g2d.getDeviceConfiguration().createCompatibleImage(edgePixel * n, edgePixel * n, 
        
         Transparency.TRANSLUCENT); 
        
         g2d.dispose(); 
        
         g2d = bimage.createGraphics();

第一步：图片缓冲区对象创建，BufferedImage.

第二步：二维绘图画笔，获取Graphics接口的实现类Graphics2D对象

第三步：设置画笔的线条颜色，背景颜色等属性

第四步：绘制图形，API中提供的相应的绘制方法

第五步：将将图片缓存去中的内容通过图像文件输出流写入到文件。

如下代码所示：

 
         FileImageOutputStream   fios =  
         new  
         FileImageOutputStream( 
         new  
         File(imageName)); 
        
         ImageIO.write(bimage, IMAGE_TYPE.substring( 
         1 
         ), fios);

说明：IMAGE_TYPE字符串表示的是输出图像的文件类型，如:png,jpeg,gif,bmp

上述JavaScript和Canvas生成图形过程中使用了StringBuffer这个对象和Array对象的contains方法源代码参见附件：CellTable生成图像演示文件CellTable.html.txt使用时去掉后缀[.txt].

说起生成N*N阶方格，并且突出显示其中指定的格子源于以前的两篇文章中提到的寻找图案单位问题。

文章：拉登游戏开发--分布式计算服务机客户机程序设计

拉登游戏开发--在时间的积累中寻求美丽图案

今天有点成果了，计算到了N=26。

挑几张能看出图案的效果图：

这个问题的提出者来自新浪博主大力水手。2013年8月19日特殊的日子，给自己放了个假，晚上没有加班，放松了一下，回到家一下子就睡的稀里糊涂。22点左右起来，看了会书，时间过的很快，一会就过了24点，于是就睡了下了，可是怎么也睡不着，这个问题突然就在我脑海里打转个不停，大脑一直就没有停歇下来，早上起来都被折腾的很累，于是今天就把这个问题给解决了，算是一个了结吧。

难道真的就这么苦逼，程序员的生活啊！