文档章节

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

魂祭心
 魂祭心
发布于 2015/12/03 22:08
字数 508
阅读 247
收藏 2
点赞 0
评论 0

旋转代码

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("存在取样点在白色区域内");
}




© 著作权归作者所有

共有 人打赏支持
魂祭心
粉丝 9
博文 48
码字总数 70991
作品 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
网页性能优化,缓存优化、加载时优化、动画优化

本文提供一个优化网页性能的大概思路,具体操作网上资料很多。 缓存优化 性能优化第一步,便是管理好页面的缓存,避免重复下载资源。否则,即增加服务器压力,又折磨用户的钱包。 浏览器缓存...

lunaqi
05/16
0
0
JavaScript 编程精解 中文第三版 十七、在画布上绘图

十七、在画布上绘图 原文:Drawing on Canvas 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 绘图就是欺骗。 M.C. Escher,由 Bruno ...

ApacheCN_飞龙
05/12
0
0
关于javaScript的认识

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

杨松坤
2012/05/09
0
0
JavaScript 工作原理之十一-渲染引擎及性能优化小技巧

原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland。 本系列持续更新中,Github 地址请查阅这里。 这是 JavaScript 工作原理的第十一章。 迄今为止,之前的...

tristan
06/17
0
0
JavaScript常用函数大全

新打开窗口 利用form标签 如利用以下的HTML 当要打开新的窗口,把以上的HTML插入到里,然后赋值好input[type=hidden]的参数,再触发form.submit()方法。(不能直接在action赋值为一个带参数的...

前端届的科比
2014/08/13
0
0
快速实现一个简单的canvas迷宫游戏

前言 (最近设计模式看的有点头大,一直面对纯js实在是有些枯燥-_-。所以写一点有趣的东西调剂一下) 现在已经不算新鲜了,不过由于日常业务中并不常用,所以实践并不多,今天分享一下,如何...

冬骥
06/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用Python绘制红楼梦词云图,竟然发现了这个!

Python在数据分析中越来越受欢迎,已经达到了统计学家对R的喜爱程度,Python的拥护者们当然不会落后于R,开发了一个个好玩的数据分析工具,下面我们来看看如何使用Python,来读红楼梦,绘制小...

猫咪编程
16分钟前
0
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
39分钟前
1
0
protobuf学习笔记

相关文档 Protocol buffers(protobuf)入门简介及性能分析 Protobuf学习 - 入门

OSC_fly
昨天
0
0
Mybaties入门介绍

Mybaties和Hibernate是我们在Java开发中应用的比较多的两个ORM框架。当然,目前Mybaties正在慢慢取代Hibernate,这是因为相比较Hibernate而言Mybaties性能更好,响应更快,更加灵活。我们在开...

王子城
昨天
2
0
编程学习笔记之python深入之装饰器案例及说明文档[图]

编程学习笔记之python深入之装饰器案例及说明文档[图] 装饰器即在不对一个函数体进行任何修改,以及不改变整体的原本意思的情况下,增加函数功能的新函数,因为这个新函数对旧函数进行了装饰...

原创小博客
昨天
0
0
流利阅读笔记33-20180722待学习

黑暗中的生物:利用奇技淫巧快活生存 Daniel 2018-07-22 1.今日导读 如果让你在伸手不见五指的黑暗当中生存,你能熬过几天呢?而大千世界,无奇不有。在很多你不知道的角落,有些生物在完全黑...

aibinxiao
昨天
6
0
Hystrix降级逻辑中如何获取触发的异常

通过之前Spring Cloud系列教程中的《Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)》一文,我们已经知道如何通过Hystrix来保护自己的服务不被外部依赖方拖垮的情况。但是实际...

程序猿DD
昨天
1
0
gin endless 热重启

r := gin.New()r.GET("/", func(c *gin.Context) {c.String(200, config.Config.Server.AppId)})s := endless.NewServer(":8080", r)s.BeforeBegin = func(add string) ......

李琼涛
昨天
1
0
JAVA模式之代理模式

平时一直在用spring,spring中最大的特效IOC和AOP,其中AOP使用的就是代理模式.闲着无聊,随手写了一个代理模式,也记录下代理模式的实现Demo. 比如现在有一个场景是:客户想要增加一个新的功能,...

勤奋的蚂蚁
昨天
0
0
ES15-JAVA API 索引管理

1.创建连接 创建连接demo package com.sean.esapi.client;import java.net.InetSocketAddress;import org.elasticsearch.action.get.GetResponse;import org.elasticsearch.clien......

贾峰uk
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部