检测一个点, 是否在一个半圆之内的方法

最新推荐文章于 2022-10-24 00:01:40 发布

weixin_30383279

最新推荐文章于 2022-10-24 00:01:40 发布

阅读量276

点赞数

文章标签：数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/zlog/p/6109223.html

版权

demo: http://jsbin.com/lihiwigaso

需求: 一个圆分成分部分, 鼠标滑上不同的区域显示不同的颜色

思路: 先判断这个点是否在圆之内, 再判断是否在所在的三角形之内就可以了

所需要的全部源码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>point-in-semicircle</title>
  <script src="jquery-1.7.2.min.js"></script>
<style>
body{
  border:0;
  margin:0;
  padding:0;
}
#bottom {
  position: absolute;
  left:0px;
  top:0px;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

#circleProcess {
  position: relative;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  stroke-dasharray: 360%;
  stroke-dashoffset: 0%;
  stroke: #6FEC6F;
  fill: none;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#left {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100px;
  width: 200px;
  border-radius: 100px 100px 0 0;
  -moz-border-radius: 100px 100px 0 0;
  -webkit-border-radius: 100px 100px 0 0;
  background:red;
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform-origin: 100px 100px;
  -moz-transform-origin: 100px 100px;
  -webkit-transform-origin: 100px 100px;
  display:none;

}

#right {
  position: absolute;
  top: 100px;
  left: 0px;
  height: 100px;
  width: 200px;
  border-radius: 0 0 100px 100px;
  -moz-border-radius: 0 0 100px 100px;
  -webkit-border-radius: 0 0 100px 100px;
  background:blue;
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform-origin: 100px 0px;
  -moz-transform-origin: 100px 0px;
  -webkit-transform-origin: 100px 0px;
  display:none;
}

#top {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200px;
  height: 200px;
  z-index: 100px;
}

</style>
</head>
<body>
<div id="bottom">
<svg id="circleProcess" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" cx="100" cy="100" r="100" stroke-width="5" stroke-dashoffset="0%"></circle>
</svg>
<div id="left"></div>
<div id="right"></div>
</div>
<div id="top"></div>
</body>
</html>
<script>
jQuery(function($){
  var polygons = [
    [[0, 0], [200, 0], [100, 100], [0, 200]],
    [[100, 100], [200, 0], [200, 200], [0, 200]]
  ];

  var $left = $('#left');
  var $right = $('#right');
  var $top = $('#top');
  var oldIndex = -1;

  $top.on('mousemove', function(e){
    if( pointInsideCircle([e.offsetX, e.offsetY],[100, 100], 100) ){

      var index = inside([e.offsetX, e.offsetY], polygons);
      if(index===oldIndex){
        return;
      }
      if (index === 0) {
        $left.show();
        $right.hide();
      }
      if (index === 1) {
        $left.hide();
        $right.show();
      }
      oldIndex = index;

    } else {
      $left.hide();
      $right.hide();
      oldIndex = -1;
    }
  });

  $top.on('mouseleave', function(){
    $left.hide();
    $right.hide();
    oldIndex = -1;
  });

  function inside(point, polygons){
    for(var i=1; i>=0; i--){
      if(pointInsidePolygon(point, polygons[i])){
        return i;
      }
    }
    return -1;
  }

  function pointInsidePolygon(point, vs) {
    // ray-casting algorithm based on
    // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html

    var x = point[0], y = point[1];

    var inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var xi = vs[i][0], yi = vs[i][1];
        var xj = vs[j][0], yj = vs[j][1];

        var intersect = ((yi > y) != (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }

    return inside;
  }

  function pointInsideCircle(point, circle, r) {
      if (r===0) return false
      var dx = circle[0] - point[0]
      var dy = circle[1] - point[1]
      return dx * dx + dy * dy <= r * r
  }

});
</script>

转载于:https://www.cnblogs.com/zlog/p/6109223.html

weixin_30383279

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
检测一个点, 是否在一个半圆之内的方法

demo: http://jsbin.com/lihiwigaso需求: 一个圆分成分部分, 鼠标滑上不同的区域显示不同的颜色思路: 先判断这个点是否在圆之内, 再判断是否在所在的三角形之内就可以了所需要的全部源码:<!DOCTYPE html><html><head> <meta charset="utf...
复制链接

扫一扫