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.htmlvar 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 falsevar dx = circle[0] - point[0]var dy = circle[1] - point[1]return dx * dx + dy * dy <= r * r}});
</script>
》)
