Landrover 路虎

在整理硬盘时,发现有一个项目用到数组集点阵位计算量,跑的是canvas舞台,想想最近是在整理作品,看了下之前做的,还是有点价值,打算再拿出来分析一下,以便又被放在角落里

记得这个项目最初是flash版本,与新浪微博有互动,做完后,当时正全面转html5阶段,看版本时间也是2014年9月,那应该是的了,微信h5刚火的时候

与此同时就顺带在js版本,做一个test,想在html页面尝试做项目,但由于当时一看canvas对于密集点阵好卡,就打消这个念头

拿到一堆layout时,看了一下主要功能页面实现的优先顺序,一般如果1天到2天内未能解决问题,那么就要跟设计师沟通用其他方式,不过还好,这个地球,还不是特别难的,就花了点时间,描地球点轮廓坐标

进入角色

这个数据,最初是在flash里面画点的，想不到,还在,呵呵

看到没,密密麻麻,在获取点位xy坐标,基本用手工去布置在layout上,获取数据,咱们累点没关系,设计师更累,设计的东西,一次又一次的成了飞机稿,这个我做过设计师深有体会,所以,大家在与设计师配合成,千万别说人家是美工(美丽的民工),呵呵
在这点,还是尽量迎合设计师的口胃及交流

接下来就是走layout设计稿 ,回头来看看还是蛮好的界面

使用方法

我当初没想明白,这玩意应该怎么做,一次一次的与设计师沟通后,才大致理解人家的意思,让球转动,还图片不倒着看,要不然,你觉得人家客户能答应吗?
也是,我是甲方,我也不答应啊,哈哈哈…

对了,就是两点距离公式

至于让图顺着走,知道xy坐标,套着两点距离公式,也能出来,看下图

1 2	x=中心点-两点坐标距离Math.sin(增量) y=中心点-两点坐标距离Math.cos(增量)

那么增量怎么来,这个在flash中,在html中，是一样的,坐标(0,0)都是从左上角开始,所以,与咱们数学中学到的坐标就不一样了这个可以换算,年龄大了,都已经忘记怎么换,呵
大致意思是旋转度数大于180度时,cos,sin值成了负数

//两点之间的距离
var vx=x,vy=y,centery=100,centerx=100;
var _r=Math.sqrt(Math.pow(centery - vy, 2) + Math.pow(centerx - vx, 2));
//从两点之间的距离公式,换算x,y弧度
var _anglex=Math.asin((centerx - vx) / _r), _angley = Math.acos((centery - vy) / _r);
//换好后,还待去判断中心点,一个物体总有中心点,那距离也总有相减成负的吧,因为他是绕圈,
vx>中心点,vy<中心点,第一象限,angle=_anglex;
vx>中心点,vy>中心点,第四象限,angle=Math.PI-_anglex;
vx<中心点,vy>中心点,第三象限,angle=_angley;
vx<中心点,vy<中心点,第二象限,angle=_anglex;
//这个是转的方向,当前是按时钟转圈,递减
Math.abs(angle) >= 360 ? angle = 0 : angle -= Drawbox.speeds;
//x,y坐标绕中心点转
x = centerx - _r * Math.sin(angle);
y = centery - _r * Math.cos(angle);

分析导向

对于canvas渲染,设置当alpha=0时,就过滤渲染
与此同时,在上面互动效果中,做了三层

第一层是线
第二层是线构成面
第三层就是点信息层

这样的话分层处理,三个数组,最重要的是,所有物体不是直接碰撞,而是由数组数据互相碰撞,计算
对于数据这里稍微提一下,尽量用

1
2
3

for(var i=0;i<obj;i++){
obj[i].x=33;
}

这个在测试过程中,计算量的快慢有所差异,现在有很多人对for in ,for each特别热衷,这是外面封装了一层哇,所以,你觉得方便,性能方面有些损失
有不同意见的可以去试试