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

随机推荐

Mycat 配置及优化【转】
前言 Mycat 是一个数据库分库分表中间件 MyCAT 是作为通用代理设计的,后端是以 Mysql协议和 JDBC 的方式连接数据库,可以支持 Oracle.DB2.SQL Server . mo ...
ckeditor：新增时会得到上次编辑的内容
参考网址:http://blog.sina.com.cn/s/blog_6961ba9b0102wwye.html 第一次新增时没有问题,编辑器里面内容为空,编辑数据时,也是正常,但是第二次点击新增时 ...
thymeleaf ： EL1050E The arguments (...) for the constructor call are missing
<a href="list.html" th:href="${#strings.replace(new.href,'{page}',1)}" >MO ...
什么是Jupyter Notebook?
Jupyter Notebook, 以前又称为IPython notebook,是一个交互式笔记本, 支持运行40+种编程语言. 可以用来编写漂亮的交互式文档. Linux下, Jupyter Not ...
day25作业
1.阻塞 2.就绪 3.阻塞 4.Runnable 5.join() 6.synchronized 7.notify()和notifyAll() 8.Object 1.A 2.D ...
snmp信息的查询命令snmpwalk
在日常监控中,经常会用到 snmp 服务,而 snmpwalk 命令则是测试系统各种信息最有效的方法,现总结一些常用的方法如下: 获取所有信息snmpwalk -v 2c -c public 52.0 ...
ERP渠道文档管理（二十四）
基本需求: 用例图: 存储过程: CREATE PROCEDURE [dbo].[BioErpCrmChannelDocument_ADD] @DocumentID int, @ChannelID i ...
LOJ 10127 -「一本通 4.3 练习 1」最大数
题面题目描述给定一个正整数数列 $a_1, a_2, a_3, \dots , a_n$,每一个数都在 0~p-1之间.可以对这列数进行两种操作: 添加操作:向序列后添加一个数,序列长度变成 n+ ...
linux上jenkins连接windows并执行exe文件
1.如果要通过ssh的方式来连接windows的话,首先需要在windows上安装freesshd来配置启动.配置ssh(win10上自带了openssh可以进行安装使用,但我机器装不上) 1.1.下 ...
Java 分布式系统实现session共享
当然业界已经有很多成熟的解决方案,我罗列如下: 1.服务器实现的session复制或session共享,这类型的共享session是和服务器紧密相关的,比如webSphere或JBOSS在搭建集群时候 ...

lufylegend:图形变形3

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

随机推荐

热门专题