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

随机推荐

ARM linux内核启动时几个关键地址【转】
转自:http://www.cnblogs.com/armlinux/archive/2011/11/06/2396787.html 1. 内核启动地址1.1. 名词解释ZTEXTAD ...
CentOS下配置MySQL允许root用户远程登录
1.常用命令: 安装上传下载文件命令yum install lrzsz安装webget工具yum -y install wget ----------------------------------- ...
python基础-装饰器，生成器和迭代器
学习内容 1.装饰器 2.生成器 3.迭代器 4.软件目录结构规范一:装饰器(decorator) 1.装饰器定义:本质就是函数,用来装饰其他函数,即为其他函数添加附加功能. 2.装饰器原则:1)不 ...
Java基础88 数据库设计的三大范式
数据库的设计原则:建议设计的表尽量遵守三大范式 1.第一范式要求表的每个字段必须是不可分割的独立单元 Student表: name -- 违反了第一范式张 ...
Oracle ORA-12541：TNS：无监听程序
Oracle ORA-12541:TNS:无监听程序标签: Oracle DataBase 今天使用Oracle数据库,使用可视化连接工具连接测试环境的数据库时提示无监听程序,最后在老师帮助下终于搞 ...
activeMQ安全配置及常见问题解决
https://blog.csdn.net/dandan2zhuzhu/article/details/78461872
sql 多表查询结果验证
1.笛卡尔积定义: 设A,B为集合,用A中元素为第一元素,B中元素为第二元素构成的有序对,所有这样的有序对组成的集合 ,叫做A与B的笛卡尔积,记作AxB. 上面有一个很关键的词为“有序”,因此,我们 ...
webpack4.x配置详情
webpack打包工具现在非常流行,熟悉并且能够进行配置也变得非常重要.在学习和使用的过程中遇到过很多的问题,希望能够让自己记录下来,巩固自己的学习. 1.创建文件目录先在自己的常用盘中(我自己的项 ...
View初探
View初探学习自 <Android开发艺术探索> View漫谈 Activity构成了我们的界面但是知识一个空壳子,Activity与View相结合才构成了我们丰富多彩的界面,并且为了 ...
使用Metasploit工作区
使用Metasploit工作区 Metasploit将所有数据都存储在PostgeSQL服务器中的msf数据库.渗透测试人员经常要使用Metasploit同时执行多个任务.为了避免数据混杂,Met ...

lufylegend:图形变形3

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

随机推荐

热门专题