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 ...

随机推荐

MySQL灾备恢复在线主从复制变成主主复制及多源复制【转】
生产主主复制(A<--->B),和灾备主从复制(B--->C).当生产出现问题时,数据写入切换到灾备数据库,待生产恢复后,将灾备回写到生产.步骤如下: 1.灾备与生产其中一台建立主主 ...
Ansible 插件之【CMDB】【转】
Github地址: https://github.com/fboender/ansible-cmdb 从facts收集信息,生成主机概述安装 wget https://github.com/fboe ...
oracle创建表空间并赋予权限
CREATE TEMPORARY TABLESPACE 表空间 TEMPFILE 数据存储路径('D://oracle//NEW_NAMESPACE.DBF') SIZE 32M AUTOEXTEN ...
linux(centos)安装升级ruby
参考文章:http://www.ruby-lang.org/zh_cn/documentation/installation/ 文章给出了不同平台的多种方法.我的是centos,我选择了一个比较简单的 ...
Netty---相关
http://www.infoq.com/cn/articles/netty-million-level-push-service-design-points/ ChannelOption用到的soc ...
shiro双realm验证
假设现在有这样一种需求:存在两张表user和admin,分别记录普通用户和管理员的信息.并且现在要实现普通用户和管理员的分开登录,即需要两个Realm——UserRealm和AdminRealm,分别 ...
JSONObject 自定义过滤配置
一.自定义过滤器说明 PropertyPreFilter 根据PropertyName判断是否序列化 PropertyFilter 根据PropertyName和PropertyValue来判断是否 ...
使用Synchronized块同步变量
我们可以通过synchronized块来同步特定的静态或非静态方法.要想实现这种需求必须为这些特定的方法定义一个类变量,然后将这些方法的代码用synchronized块括起来,并将这个类变量作为参数传 ...
Android View事件分发-从源码分析
View事件分发-从源码分析学习自 <Android开发艺术探索> https://blog.csdn.net/qian520ao/article/details/78555397?lo ...
洛谷P4141消失之物
题目描述 ftiasch 有 N 个物品, 体积分别是 W1, W2, …, WN. 由于她的疏忽, 第 i 个物品丢失了. “要使用剩下的 N – 1 物品装满容积为 x 的背包,有几种方法呢?” ...

lufylegend:图形变形3

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

随机推荐

热门专题