lufylegend:图形变形3

面来看看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);
}
}

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);

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);

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);
}
}

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;

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);
}
}

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);
}
}

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"]);

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());
}

for (i = 0; i <= rows; i++) {

	uvtData.push(uvtData.shift());

	uvtData.push(uvtData.shift());

}

如果要改变这个地球的大小的话，就更简单了，改变LSprite对象的scaleX和scaleY属性就可以改变它的大小了

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>3D</title>

        <script type="text/javascript" src="../lufylegend-1.7.6.min.js">

        </script>

        <script type="text/javascript">

            LSystem.screen(0.5);

        </script>

    </head>

    <body>

        <div id="legend">

        </div>

        <script>

            //初始化引擎

            init(50, "legend", 600, 500, main);

            var leftspeed = 0;

            var leftindex = 1;

            var upspeed = 10;

            var upindex = 1;

            //定义每个顶点的坐标

            var vertices;

            //定义三角形，数组vertices中每三个顶点可以组成一个三角形

            var indices;

            //定义上面的每个顶点相对于整张图片的比例

            var uvtData;

            var backLayer;

            var bitmapData, earthBitmapData;

            //分割行数和列数

            var rows = 24, cols = 24;

            var mi = 0;

            var imgData = [{

                name: "earth",

                path: "earth.jpg"

            }];

            var imglist;

            function main() {

                //加载图片

                LLoadManage.load(imgData, null, gameInit);

                //var angle = (90 - 180 * 1 / 24) * Math.PI / 180;

                //var a = Math.sin(angle);

                //alert(a);

            }

            function gameInit(result){

                imglist = result;

                //获取图片数据

                earthBitmapData = new LBitmapData(imglist["earth"]);

                //earthBitmapData = new LBitmapData("#ffffff", 0, 0, 500, 300);

                var i, j;

                //地球半径

                var r = 100;

                //计算定点坐标

                vertices = new Array();

                for (i = 0; i <= cols; i++) {

                    for (j = 0; j <= rows; j++) {

                        //计算弧度

                        var angle = (90 - 180 * j / rows) * Math.PI / 180;

                        //计算定点Y坐标

                        var a = Math.sin(angle);

                        //if (j = 0) { alert(a); }

                        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;

                        //计算顶点X坐标

                        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);

                    }

                }

                //计算定点三角形位置

                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);

                    }

                }

                //创建一个Layer层

                backLayer = new LSprite();

                backLayer.x = 110;

                backLayer.y = 110;

                //添加对象

                addChild(backLayer);

                //使用Sprite的graphic绘图

                backLayer.graphics.clear();

                //填充背景

                backLayer.graphics.beginBitmapFill(earthBitmapData);

                //LGraphics类添加drawTriangles方法,用于呈现一组三角形

                backLayer.graphics.drawTriangles(vertices, indices, uvtData);

                //进入图之后，按帧速率调用onframe函数

                backLayer.addEventListener(LEvent.ENTER_FRAME, onframe);

            }

            function onframe() {

                //变换绘制图片的开始位置，造成旋转动画

                if (leftspeed < 10 && leftindex++ > leftspeed) {

                    leftindex = 0;

                    for (i = 0; i <= rows; i++) {

                        uvtData.push(uvtData.shift());

                        uvtData.push(uvtData.shift());

                    }

                }

                if (upspeed < 10 && upindex++ > upspeed) {

                    upindex = 0;

                    for (var i = 1; i < uvtData.length; i += 2) {

                        uvtData[i] += 1 / rows;

                        if (uvtData[i] > 1)

                            uvtData[i] -= 1;

                    }

                }

            }

            //调整旋转速度

            function runspeed(value){

                leftspeed = 10 - value;

            }

            //改变地球大小

            function runmax(value){

                backLayer.scaleX = value / 50;

                backLayer.scaleY = backLayer.scaleX;

            }

        </script>

        <div id="mylegend1" style="position:absolute;top:400px;width:400px;z-index:1;color: #ffffff;background-color:#000000;">

            旋转速度:<input type="number" max="10" min="0" value="10" onchange="runspeed(this.value);"/>

            <br/>

            伸缩:<input type="number" max="100" min="0" value="50" onchange="runmax(this.value);"/>%

        </div>

    </body>

</html>

lufylegend:图形变形3的更多相关文章

lufylegend:图形变形2
下面来详细讲解一下drawtriangles函数的使用方法.并且使用drawtriangles函数实现下面这种处理效果因为这个方法是从AS3移植而来,所以它的使用方法和AS3基本一致,这里是AS3的 ...
lufylegend:图形变形1
HTML5中的几种变形 HTML5中的变形,共有以下几种方法 scale() 缩放 rotate() 旋转 translate() 平移 transform() 矩阵变形 setTransform() ...
[html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形
在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...
WPF学习05：2D绘图使用Transform进行控件变形
在WPF学习04:2D绘图使用Shape绘基本图形中,我们了解了如何绘制基本的图形. 这一次,我们进一步,研究如何将图形变形. 例子一个三角形,经Transform形成组合图形: XAML代码: ...
OpenGL编程（四）改变窗口大小时保持图形的原形
前面的例子,当我们通过拖拉的方法改变窗口的长宽比例时,窗口里的图形的长宽也相应地伸缩,导致图形变形.如下图: 正如上图所示,当我们把窗口宽度拉长后,图形就会显得比较胖.同样,当我们把窗口的高度拉长后, ...
iOS总结_UI层自我复习总结
UI层复习笔记在main文件中,UIApplicationMain函数一共做了三件事根据第三个参数创建了一个应用程序对象默认写nil,即创建的是UIApplication类型的对象,此对象看成是 ...
用H5中的Canvas等技术制作海报
在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...
html5 canvas 详细使用教程
转载自 http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 前言基本知识绘制矩形清除矩形区域圆弧路径绘制线段绘制贝 ...
CSS3 Transitions, Transforms和Animation的使用
一.前言 CSS3动画相关的几个属性是:transition, transform, animation:分别理解为过渡,变换,动画.虽意义相近,但具体的功能和在CSS3中承担的工作有一定的差异. t ...

随机推荐

linux下简单的备份的脚本 2 【转】
转自:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=26807463&id=4577034 之前写过linux下简单的 ...
shell脚本练习【转】
1.写一个脚本,判断当前系统上所有用户的shell是否为可登录shell(即用户的shell不是/sbin/nologin):分别这两类用户的个数:通过字符串比较来实现: #脚本内容 [root@ce ...
.NET C#错误：所生成项目的处理器框架“MSIL”与引用“wdapi_dotnet1021”的处理器架构“AMD64”不匹配
.NET C#错误:所生成项目的处理器框架“MSIL”与引用“wdapi_dotnet1021”的处理器架构“AMD64”不匹配. 直接在项目右键属性->生成->x64. 即可解决
为什么要使用断路器Hystrix？
为什么需要 Hystrix? 在微服务架构中,我们将业务拆分成一个个的服务,服务与服务之间可以相互调用(RPC).为了保证其高可用,单个服务又必须集群部署.由于网络原因或者自身的原因,服务并不能保证服 ...
014_mac下的端口查看
一. 使用netstat去过滤listen效果不怎么理想. $ netstat -an|grep -i --color "listen" tcp6 0 0 ::1.5601 *.* ...
linux-who
在终端输入who查看当前登录服务器的ip.登录时间.登录用户查看登录用户的pid who -aH 杀掉登录用户PID kill -9 PID
vuejs、eggjs、mqtt
vuejs.eggjs.mqtt全栈式开发设备管理系统 vuejs.eggjs.mqtt全栈式开发简单设备管理系统业余时间用eggjs.vuejs开发了一个设备管理系统,通过mqtt协议上传设备数据 ...
NET Core中使用Angular2的Token base身份认证
下载本文提到的完整代码示例请访问:How to authorization Angular 2 app with asp.net core web api 在ASP.NET Core中使用Angula ...
【LeetCode】170. Two Sum III – Data structure design
Difficulty:easy More:[目录]LeetCode Java实现 Description Design and implement a TwoSum class. It should ...
H5视频播放器属性与API控件，以及对程序的解释
一:理论 1.视频播放器的格式介绍视频主要有三部分组成:视频.音频.编码格式视频格式:avi.rmb.wmv.mpeg4.ogg.webm 2.H5的标签video的简单使用 <video ...

lufylegend:图形变形3

lufylegend:图形变形3的更多相关文章

随机推荐

热门专题