|
HTML5中的几种变形 HTML5中的变形，共有以下几种方法 scale() 缩放
rotate() 旋转
translate() 平移
transform() 矩阵变形
setTransform() 重设矩阵
这几个方法，对图片一共能完成下面几种处理
但是，如果要实现下面这种不规则的变形，就不行了 那咱们一步步，先来看HTML5的这几个方法。
1，缩放方法如下 - <!DOCTYPE html>
- <html>
- <body>
- <canvas id="myCanvas" width="800" height="280"></canvas>
- <script type="text/javascript">
- var c=document.getElementById('myCanvas');
- var ctx=c.getContext('2d');
- var img = new Image();
- img.src="face.jpg";
- img.onload = function(){
- ctx.drawImage(img,0,0);
- ctx.scale(0.5,0.5);
- ctx.drawImage(img,500,0);
- };
- </script>
- </body>
- </html>
效果 2，旋转代码
- <!DOCTYPE html>
- <html>
- <body>
- <canvas id="myCanvas" width="800" height="400"></canvas>
- <script type="text/javascript">
- var c=document.getElementById('myCanvas');
- var ctx=c.getContext('2d');
- var img = new Image();
- img.src="face.jpg";
- img.onload = function(){
- ctx.rotate(20*Math.PI/180);
- ctx.drawImage(img,200,0);
- };
- </script>
- </body>
- </html>
效果
3，平移代码- <!DOCTYPE html>
- <html>
- <body>
- <canvas id="myCanvas" width="800" height="400"></canvas>
- <script type="text/javascript">
- var c=document.getElementById('myCanvas');
- var ctx=c.getContext('2d');
- var img = new Image();
- img.src="face.jpg";
- img.onload = function(){
- ctx.drawImage(img,0,0);
- ctx.translate(100,100);
- ctx.drawImage(img,0,0);
- };
- </script>
- </body>
- </html>
效果 4，倾斜代码 - <!DOCTYPE html>
- <html>
- <body>
- <canvas id="myCanvas" width="800" height="400"></canvas>
- <script type="text/javascript">
- var c=document.getElementById('myCanvas');
- var ctx=c.getContext('2d');
- var img = new Image();
- img.src="face.jpg";
- img.onload = function(){
- ctx.setTransform(1.3,0.1,-0.2,1,80,40);
- ctx.drawImage(img,0,0);
- };
- </script>
- </body>
- </html>
效果 不规则变形前面提到，HTML5没办法直接实现不规则变形，但是，可以通过一系列组合来实现不规则变形，比如将下面的这个变形做一下分解 分解后变成 那继续看，它其实可以看做是两个变形的组合，如下图 其实就是将多个变形组合到了一起，这样讲几个变形的其中的一部分拿出来，再拼凑成新的图形，就变成了刚才的特殊图形了 顺着这个思路，我仿照AS3，将一张图分解成多个小的三角形，效果如下 就这样，很轻松的实现了drawtriangles函数，用来扭曲图形，它与AS3的drawtriangles函数功能基本一致，区别就是，第4个之后的参数的含义不同，在这里它第4个参数表示分割线的线粗，第5个参数则表示分割线的颜色，如果不设定，则不显示分割线，这个函数效果如下，你可以实现任何变形，甚至3D变形也可以 这面是测试连接，你可以拖动图中的红点，来让图片发生任意的扭曲变形
使用这个drawtriangles函数，你需要下载HTML5开源引擎lufylegend的1.5版或以上版本，lufylegend1.5版发布地址如下
下面来详细讲解一下drawtriangles函数的使用方法。并且使用drawtriangles函数实现下面这种处理效果 因为这个方法是从AS3移植而来，所以它的使用方法和AS3基本一致，这里是AS3的drawtriangles函数API，大家可以参照一下 上次也说明过，移植后的drawtriangles函数，第4个之后的参数的含义不同，在这里它第4个参数表示分割线的线粗，第5个参数则表示分割线的颜色，如果不设定，则不显示分割线
drawTriangles函数的定义 - drawTriangles(vertices, indices, uvtData,thickness,color)
- vertices:由数字构成的矢量，其中的每一对数字将被视为一个坐标位置（一个 x, y 对）。vertices 参数是必需的。
- indices:一个由整数或索引构成的矢量，其中每三个索引定义一个三角形。如果 indexes 参数为 null，则每三个顶点（vertices 矢量中的 6 对 x,y）定义一个三角形。否则，每个索引将引用一个顶点，即 vertices 矢量中的一对数字。例如，indexes[1] 引用 (vertices[2], vertices[3])。
- uvtData:由用于应用纹理映射的标准坐标构成的矢量。每个坐标引用用于填充的位图上的一个点。每个顶点必须具有一个 UV 或一个 UVT 坐标。对于 UV 坐标，(0,0) 是位图的左上角，(1,1) 是位图的右下角。
- thickness:分割三角形的边框的线粗
- color:分割三角形的边框的颜色
可以看到，上图中显示了三角形的边框。 好了，接下来说说其他三个参数的用法， 1，第一个参数vertices，其实就是定义每个顶点的坐标，这几个顶点的顺序依次为下图
vertices参数中储存的就是上面的9个顶点的坐标，代码如下 - vertices = new Array();
- vertices.push(0, 0);
- vertices.push(0, 120);
- vertices.push(0, 240);
- vertices.push(120, 0);
- vertices.push(120, 120);
- vertices.push(120, 240);
- vertices.push(240, 0);
- vertices.push(240, 120);
- vertices.push(240, 240);
对应图中的三角形，代码如下 - indices = new Array();
- indices.push(0, 3, 1);
- indices.push(3, 1, 4);
- indices.push(1, 4, 2);
- indices.push(4, 2, 5);
- indices.push(3, 6, 4);
- indices.push(6, 4, 7);
- indices.push(4, 7, 5);
- indices.push(7, 5, 8);
换算成代码如下 - uvtData = new Array();
- uvtData.push(0, 0);
- uvtData.push(0, 0.5);
- uvtData.push(0, 1);
- uvtData.push(0.5, 0);
- uvtData.push(0.5, 0.5);
- uvtData.push(0.5, 1);
- uvtData.push(1, 0);
- uvtData.push(1, 0.5);
- uvtData.push(1, 1);
有了上面这些参数的定义，然后通过LSprite对象的graphics属性的beginBitmapFill和drawTriangles两个函数，就可以绘制多样化的图形了 beginBitmapFill是用位图图像填充绘图区，参数是LBitmapData对象
如果，在vertices参数中定义的坐标位置就是原图片中所对应的位置，那么图片是没有什么变化的，但是，如果改变这些坐标的位置，比如下面的代码 - vertices = new Array();
- vertices.push(0, 0);
- vertices.push(0-50, 120);//这里将原坐标的x坐标左移50
- vertices.push(0, 240);
- vertices.push(120, 0);
- vertices.push(120, 120);
- vertices.push(120, 240);
- vertices.push(240, 0);
- vertices.push(240+50, 120);//这里将原坐标的x坐标右移50
- vertices.push(240, 240);
- indices = new Array();
- indices.push(0, 3, 1);
- indices.push(3, 1, 4);
- indices.push(1, 4, 2);
- indices.push(4, 2, 5);
- indices.push(3, 6, 4);
- indices.push(6, 4, 7);
- indices.push(4, 7, 5);
- indices.push(7, 5, 8);
- uvtData = new Array();
- uvtData.push(0, 0);
- uvtData.push(0, 0.5);
- uvtData.push(0, 1);
- uvtData.push(0.5, 0);
- uvtData.push(0.5, 0.5);
- uvtData.push(0.5, 1);
- uvtData.push(1, 0);
- uvtData.push(1, 0.5);
- uvtData.push(1, 1);
- backLayer.graphics.beginBitmapFill(bitmapData);
- backLayer.graphics.drawTriangles(vertices, indices, uvtData);
效果如图 上面的变形是将图片分割成了8个三角形，要实现更多种变形，那只需要将图片分割成更多的小三角形就可以了 比如我利用这个函数，制作了一个简陋的图片修饰工具，效果如下 大家可以点击下面的连接，来测试一下它的效果 备注： 使用drawtriangles函数，你需要下载HTML5开源引擎lufylegend的1.5版或以上版本，lufylegend1.5版发布地址如下
下面来看看drawtriangles函数的扩展。利用drawtriangles函数来实现一个旋转的3D地球，效果如下 因为lufylegend1.5.0版的drawtriangles函数有个bug，所以我悄悄的更新了lufylegend1.5.1版，大家可以到官网下载，地址如下 其实绘制3d球体效果的话，首先就是绘制一个平面，然后将这个平面分成一个一个的小三角形，然后再用这些小三角形拼凑成一个圆球就可以了 现在，我先创建一个空白的LBitmapData对象，然后将这个对象分割成N个小三角形，具体做法看下面代码 - earthBitmapData = new LBitmapData("#ffffff", 0, 0, 500, 300);
- var i, j;
- vertices = new Array();
- for(i=0;i<=cols;i++){
- for(j=0;j<=rows;j++){
- vertices.push(i*15,j*15);
- }
- }
- indices = new Array();
- for (i = 0; i < cols; i++) {
- for (j = 0; j < rows; j++) {
- indices.push(i * (rows + 1) + j, (i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1);
- indices.push((i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1, (i + 1) * (rows + 1) + j + 1);
- }
- }
- uvtData = new Array();
- for (i = 0; i <= cols; i++) {
- for (j = 0; j <= rows; j++) {
- uvtData.push(i / cols, j / rows);
- }
- }
接着，利用drawtriangles函数将LBitmapData对象绘制到画面上 - backLayer = new LSprite();
- addChild(backLayer);
- backLayer.graphics.clear();
- backLayer.graphics.beginBitmapFill(earthBitmapData);
- backLayer.graphics.drawTriangles(vertices, indices, uvtData, 2);
得到效果如下图。 要想将这个平面编程一个圆，就需要计算图中每个小三角形的坐标，先来看看y坐标应该如何计算，看下面一张图，是一个球的垂直切面 利用三角函数，计算图中的y坐标，和y坐标所在位置的球的水平切面圆的半径r1 - var a = Math.sin(angle);
- if((90-180*j/rows)%90==0 && (90-180*j/rows)%180!=0)a=(90-180*j/rows)>0?1:-1;
- var y = -r*a;
- var sa = Math.cos(angle);
- var r1 = Math.abs(r*sa);
于是，首先将计算好的y坐标带入到vertices数组中 - for(i=0;i<=cols;i++){
- for(j=0;j<=rows;j++){
- var angle = (90-180*j/rows)*Math.PI/180;
- var a = Math.sin(angle);
- if((90-180*j/rows)%90==0 && (90-180*j/rows)%180!=0)a=(90-180*j/rows)>0?1:-1;
- if((90-180*j/rows)%180==0)a=0;
- var sy = -r*a;
- vertices.push(i*15,sy);
- }
- }
因为还没有计算x的坐标，所以得到一个特殊图形，如下 接着，看看x的坐标如何计算，首先将半径为r1的平面切面拿出来，如下图 利用三角函数，计算图中的x坐标 - var b = Math.cos(angle*Math.PI/180);
- var x = r1*b;
这时，如果只将计算好的x坐标带入到vertices数组中的话 - for(i=0;i<=cols;i++){
- for(j=0;j<=rows;j++){
- var sa = Math.cos(angle);
- if((90-180*j/rows)%180==0)sa=1;
- var sr = Math.abs(r*sa);
- var angle2 = 360*(i+1)/cols;
- var b = Math.cos(angle2*Math.PI/180);
- if(angle2%360==0)b=1;
- else if(angle2%180==0)b=-1;
- var sx = sr*b;
- vertices.push(sx,j*15);
- }
- }
因为没有计算y的坐标，所以得到一个很有意思的图形，如下 如果将计算好的x坐标和y坐标，同时带入到vertices数组中的话 - for(i=0;i<=cols;i++){
- for(j=0;j<=rows;j++){
- var angle = (90-180*j/rows)*Math.PI/180;
- var a = Math.sin(angle);
- if((90-180*j/rows)%90==0 && (90-180*j/rows)%180!=0)a=(90-180*j/rows)>0?1:-1;
- if((90-180*j/rows)%180==0)a=0;
- var sy = -r*a;
- var sa = Math.cos(angle);
- if((90-180*j/rows)%180==0)sa=1;
- var sr = Math.abs(r*sa);
- var angle2 = 360*(i+1)/cols;
- var b = Math.cos(angle2*Math.PI/180);
- if(angle2%360==0)b=1;
- else if(angle2%180==0)b=-1;
- var sx = sr*b;
- vertices.push(sx, sy);
- }
- }
得到一个完整的球体图形，如下 接下来就简单了，将空白图片换成地球的平面图，代码如下 - earthBitmapData = new LBitmapData(imglist["earth"]);
再次运行代码，就可以得到下面的3D图形了 下面，该让这个地球转动起来了，根据上一篇介绍的内容，传入drawtriangles函数的uvtData数组中的元素是每个小三角形在原图片中的相对位置，它们决定了绘制图片的开始位置，如果将一组位置比如0123，变换其中的位置成为1230，再继续变换成2301，这样不断的进行位置变换，那么从视觉上，其实就已经实现了旋转了，那么在代码中，只需要将分割完的数组的按照每一列进行移动，每次都将第一列的两组三角形移到最后一列，这样第二列的两组三角形就变为了第一列，这样不停的变换就能让一个地球转动起来 - for (i = 0; i <= rows; i++) {
- uvtData.push(uvtData.shift());
- uvtData.push(uvtData.shift());
- }
如果要改变这个地球的大小的话，就更简单了，改变LSprite对象的scaleX和scaleY属性就可以改变它的大小了，大家可以点击下面的连接，来测试一下它的效果
备注： 再次说明一下，本篇所介绍的内容需要HTML5开源引擎lufylegend的1.5.1版或以上版本的支持，lufylegend1.5.1版发布地址如下
|
发表于 2013-2-25 22:56:14
发表于 2013-3-12 22:01:25
