文档章节

js判断旋转中的图片里的元素与背景的某个区域是否存在重叠部分,

魂祭心
 魂祭心
发布于 2015/12/03 22:08
字数 508
阅读 258
收藏 2

旋转代码

var ro=0;
$(document).ready(function(){
       setInterval("LoopRotate()",50);
});
function LoopRotate(){
    ro+=5;
	if(ro>360){ro=5;}
    $("#ro").css("transform","rotate("+ro+"deg)");
}

var Point={
     CreatePoint:function(x_ais,y_ais)
	 {
	       var point={};
		   var x=x_ais;
		   var y=y_ais;
		   //获取半径
		   point.GetRadius=function()
		   {
		       return Math.sqrt(Math.pow(x-320,2)+Math.pow(y-936,2));
		   };
		   //获取夹角
		   point.GetAngle=function(){
		     return Math.atan((x-320)/(936-y))*180/Math.PI;
		   };
		   //点相加
		   point.Add=function(value)
		   {
		      x=parseFloat(x)+parseFloat(value.GetX());
			  y=parseFloat(y)+parseFloat(value.GetY());
			  return point;
		   };
		   //试相加
		   point.TryAdd=function(value)
		   {
		     return Point.CreatePoint(parseFloat(x)+parseFloat(value.GetX()),parseFloat(y)+parseFloat(value.GetY()))
		   };
		   //点相减
		   point.Mins=function(value)
		   {
		      x=parseFloat(x)-parseFloat(value.GetX());
			  y=parseFloat(y)-parseFloat(value.GetY());
			  return point;
		   };
		   //判等
		   point.IsEqual=function(value)
		   {
		      if(x==value.GetX()&&y==value.GetY())
			  {return true;}
              else{return false;} 
		   };
			
		   point.GetX=function(){return x;}
		   point.GetY=function(){return y;}
		   return point;
	 }
};

图片

var Img={
        CreateImg:function()
		{
		    var img={};
			var points=new Array();
			img.originPoint=""
			img.SetOriginPoint=function(point)
			{
			   this.originPoint=point; 
			}
			//设置样本
			img.GetSample=function(pointSamples)
			{
			    for(var index=0;index<pointSamples.length;index++)
				{
				  points.push(pointSamples[index].Add(this.originPoint));
				}
			};
			//添加点
			img.AddPoint=function(point)
			{
			   points.push(point.Add(this.originPoint));
			};
			//移除点
			img.RemovePoint=function(point)
			{
			   for(var index=0;index<points.length;index++)
			   {
			      if((point.TryAdd(this.originPoint)).IsEqual(points[index]))
				  {
				     points.pop(points[index]);
				  }
			   }
			};
			//检测位置
			img.CheckImg=function()
			{  
			   for(var index=0;index<points.length;index++)
			   {
			     if(this.CheckPoint(points[index]))
				 {
				   return true;
				 }
			   }
			};
			//检测点
			img.CheckPoint=function(point)
			{
			        var yyy=point.GetY();
			        var xxx=point.GetX();
					
			        //获取旋转角度
			        var degMsg= $("#ro").css("transform")
		            var degCos=degMsg.substring(7,degMsg.indexOf(","));
		            var str=degMsg.substring(degMsg.indexOf(",")+1,degMsg.length);
		            var degSin=str.substr(0,str.indexOf(","));
		            var rotateDeg="";
					//合并旋转角度和夹角
		            if(degCos>0&&degSin>0)
		            {
		                //0-90
		                rotateDeg=Math.acos(degCos)*180/Math.PI;
		            }
		            if(degCos<0&&degSin>0)
		            {
		                //90-180
		                rotateDeg=Math.acos(degCos)*180/Math.PI;
		            }
		            if(degCos<0&&degSin <0)
		            {
		                //180-270
		                rotateDeg=360-Math.acos(degCos)*180/Math.PI;
		            }
		            if(degCos>0&&degSin<0)
		            {
		                //270-360
		                rotateDeg=360-Math.acos(degCos)*180/Math.PI;
		            }
		             //重新计算新的位置
		            var rotate=rotateDeg*Math.PI/180;
		            var currentX=parseFloat(point.GetX())+parseFloat(point.GetRadius()*Math.sin(rotate));
		            var currentY=parseFloat(point.GetY())+point.GetRadius()-parseFloat(point.GetRadius()*Math.cos(rotate));
		
		            if(currentX>120&&currentX<520&&currentY>536&&currentY<936)
		            {
		               return true;
		            }
			};
			return img;
		}
}


测试

var bear=Img.CreateImg();
bear.SetOriginPoint(Point.CreatePoint("240","436"));
var points=new Array(); 
//右脚尖
var point1=Point.CreatePoint("106","265");
//左眼睛
var point2=Point.CreatePoint("63","77");

points.push(point1);
points.push(point2);

bear.GetSample(points);
bear.Display();
if(bear.CheckImg())
{
alert("存在取样点在白色区域内");
}




© 著作权归作者所有

共有 人打赏支持
下一篇: 最大公约数
魂祭心
粉丝 12
博文 51
码字总数 84650
作品 0
浦东
后端工程师
私信 提问
常见的移动端H5页面开发遇到的坑和解决办法

手机共通问题 问题一:用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果...

webmirror
2018/05/02
0
0
HTML和CSS高级指南之一——性能与架构

本文由99根据Shay Howe的《An Adavnced Guide to HTML & CSS》第一课《Performance & Organization》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需...

石佛慈悲
2013/12/05
0
2
js实现网页图片延时加载(加载可见区域)的原理和代码 提高网站打开速度

有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加...

daniel-john
2014/06/21
0
0
Firefox:您可能还不知道的 46 项功能

新闻来源:yeeyan 自 Firefox 3 发布以来,我们一直在努力为 web 开发者提供新的功能。我们认为有必要写一篇博文,来确切列出那些我们知道的但大家可能还不知道的所有特性。这篇博文包含了我们...

红薯
2010/03/12
1K
0
jQuery判断页面元素是否存在

在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在。原因是对一个不存在的元素进行操作是不允许的。 例如:代码如下: document.getElementById("some...

Junn
2013/04/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Django进阶 1.1 ORM基础—ORM 1.2.1 增删改查之查询 1.2.2 删改增 (1) 1.2.3 删改增 (2)

ORM基础 ORM是Django操作数据库的API,Django的作者将sql语句封装在里面供我们使用。 我们前面还提到过Django提供一个模拟数据库的工具,sqlite,供我们学习测试使用。 如果我们想使用mysql...

隐匿的蚂蚁
今天
1
0
Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
今天
3
0
数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
3
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
5
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部