js判断旋转中的图片里的元素与背景的某个区域是否存在重叠部分,
js判断旋转中的图片里的元素与背景的某个区域是否存在重叠部分,
魂祭心 发表于2年前
js判断旋转中的图片里的元素与背景的某个区域是否存在重叠部分,
  • 发表于 2年前
  • 阅读 241
  • 收藏 2
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 使用图片上的点做样本,来逐个对应背景 。随着使用点的增多,精度也能提高,边缘不齐,镂空图片,某个元素的判断都可以搞定。

旋转代码

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




共有 人打赏支持
粉丝 4
博文 37
码字总数 46353
×
魂祭心
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: