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

随机推荐

python3 操作appium
# -*- coding: utf-8 -*- # @Time : 2018/10/8 11:00 # @Author : cxa # @File : test.py # @Software: PyC ...
springcloud搭建服务注册中心与服务发现
1.创建服务注册中心创建一个普通的Spring Boot工程首先我们需要创建一个普通的Spring Boot工程,命名为eureka-server,普通到什么程度呢?就是一个starter都不需要 ...
08 Go 1.8 Release Notes
Go 1.8 Release Notes Introduction to Go 1.8 Changes to the language Ports Known Issues Tools Assembl ...
tensorflow-作用域
变量名字由两部分组成:scope/变量name. name 参数才是对象的唯一标识. 1.tf.name_scope() Graph中保存着一个属性_name_stack(string类型),_nam ...
SCU 4444: Travel(最短路)
Travel The country frog lives in has n towns which are conveniently numbered by 1,2,…,n . Among n(n− ...
redis实现分布式锁服务
译自Redis官方文档在多线程共享临界资源的场景下,分布式锁是一种非常重要的组件.许多库使用不同的方式使用redis实现一个分布式锁管理.其中有一部分简单的实现方式可靠性不足,可以通过一些简单的修改 ...
Java第三阶段学习（八：网络通信协议、UDP与TCP协议）
一.网络通信协议 1.概念: 通过计算机网络可以使多台计算机实现连接,位于同一个网络中的计算机在进行连接和通信时需要遵守一定的规则,在计算机网络中,这些连接和通信的规则被称为网络通信协议,它对数据的传 ...
【LOJ】#2550. 「JSOI2018」机器人
题解我不会打表找规律啊QAQ 规律就是对于\(n = m\)我们每一条左下到右上的对角线上的点的走法都是一样的且每n步一个轮重复对于\(n != m\)我们找到最大公约数\(d\),在每个\(d ...
Codeforces 623B Array GCD
Array GCD 最后的序列里肯定有a[1], a[1]-1, a[1]+1, a[n], a[n]-1, a[n]+1中的一个,枚举质因子, dp去check #include<bits/s ...
SpringBoot属性配置
一:url的配置 1.配置默认配置文件是application.properties 2.配置配置端口配置context path 3.启动效果 4.第二种配置方式要先删除applicatio ...

lufylegend:图形变形3

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

随机推荐

热门专题