文档章节

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

魂祭心
 魂祭心
发布于 2015/12/03 22:08
字数 508
阅读 252
收藏 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
博文 49
码字总数 78163
作品 0
浦东
后端工程师
常见的移动端H5页面开发遇到的坑和解决办法

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

webmirror
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
jQuery判断页面元素是否存在

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

Junn
2013/04/11
0
0
关于javaScript的认识

NaN与Infinity和-Infinity不同的是,NaN不会与任何数值变量相等,可以用javaScript专门提供的isNaN()函数来判断某个变量是否为NaN。 Undefined类型的值只有undefined一个,该值用于表示某个变...

杨松坤
2012/05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

多线程

1. 多线程概念。并发和并行的概念。 多线程指的是一段时间内cpu同时执行多个线程。一个程序至少运行>=1个进程,进程就是运行中的程序,而一个进程至少运行>=1个线程,线程是操作系统能调度的...

鱼想吃肉
今天
0
0
HBase 表修复在线方式和离线方式

一、在线修复 1.1 使用检查命令 $ ./bin/hbase hbck 该命令可完整修复 HBase 元数据信息;存在有错误信息会进行输出; 也可以通过如下命令查看详细信息: $ ./bin/hbase hbck -details 1.2 ...

Ryan-瑞恩
今天
3
0
redis 系列二 -- 常用命令

1.基础命令 info ping quit save dbsize select flushdb flushall 2.键命令 2.1 set 直接赋值 set a a 2.2 get 取值 get a 2.3 exists 是否存在 exists a 2.4 expire 设置剩余时间 秒 expire......

imbiao
今天
2
0
php foreach

<?php// 数组的引用$a=array(1,2,3,4,5);foreach($a as $key=>&$value){$value=$value*2;}print_r($a);echo " $key -------------------$value\r\n";/** * ...

小张525
今天
3
0
12-利用思维导图梳理JavaSE-多线程

12-利用思维导图梳理JavaSE-多线程 主要内容 1.线程概念 2.线程开发 3.线程的状态 4.线程的同步和死锁 5.Java5.0并发库类 QQ/知识星球/个人WeChat/公众号二维码 本文为原创文章,如果对你有一...

飞鱼说编程
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部