假设我有 svg
,画成这样:
var myArc = d3.svg.arc()
.innerRadius(width / 5)
.outerRadius(width / 2);
myArc.startAngle(function(d, i) {
return radians * i
});
myArc.endAngle(function(d, i) {
return radians * (i + 1)
...然后填充一些颜色等。它看起来像这样:
现在,我想在 svg
上单击以获取 Angular 。示例:当我点击红色时,我希望在 310° 和 50° 之间,当我点击黄色等时,我希望在 70° 左右。
我该怎么做?提前致谢。
最佳答案
我做了一些研究,没有找到任何更简单的解决方案。 我正在使用你提到的方式:获取圆心和点击位置,然后根据这两个计算 Angular 。我不认为这使用起来太复杂。
注:由于圆不是真正的圆,所以存在一些数值误差。
希望这是有用的。
(function($){
var center = {};
var calculateAngle = function(x, y){
var k = Math.abs(y) / Math.abs(x);
var angle = Math.atan(k) * 180 / Math.PI;
if(y * x > 0){
angle = 90 - angle + (y < 0 ? 180 : 0);
} else {
angle = angle + (y < 0 ? 90 : 270);
}
return angle;
}
$(document).ready(function(){
var $container = $('#container');
var $selector = $('#selector');
var $result = $('#result');
center = {
x: $container.width() / 2,
y: $container.height() / 2
}
$selector.css({left:center.x, top:center.y});
$container.on('click', function(e){
var x = e.offsetX;
var y = e.offsetY;
$selector.css({left:x, top:y});
var angle = calculateAngle(x - center.x, center.y - y);
$result.text(angle);
});
});
})(jQuery)
#container{
display: inline-block;
border: 1px solid red;
width: auto;
position: relative;
}
#selector{
position: absolute;
border:1px solid black;
width: 5px;
height: 5px;
border-radius: 50%;
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<span id="selector"></span>
<img src="http://i.stack.imgur.com/4X8A7.png">
</div>
<div>
<span>Result: </span>
<span id="result"></span>
</div>
关于javascript - 获取arc svg上点击位置的 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37179302/