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;
200px;
height: 200px;
border: 1px solid red;
}
#circleProcess {
position: relative;
top: 0;
left: 0;
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;
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;
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;
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>