[英]how to find the angle of the certain point
我使用start和endangle繪制了svg圈,如下所示,
document.getElementById("circle").setAttribute("d", describeArc(150, 150, 100, 180, 360));
function getPathArc(center, start, end, radius) {
end = end - 0.0001;
var degree = end - start;
degree = degree < 0 ? (degree + 360) : degree;
var clockWise = (degree < 180) ? 0 : 1;
return getPiePath(center, degreeToLocation(start, radius, center), degreeToLocation(end, radius, center), radius, clockWise);
}
function getPiePath(center, start, end, radius, clockWise) {
return 'M ' + start.x + ' ' + start.y + ' A ' + radius + ' ' + radius + ' 0 ' + clockWise + ' 1 ' + end.x + ' ' + end.y;
};
function degreeToLocation(degree, radius, center) {
var radian = (degree * Math.PI) / 180;
return {
'x' : Math.cos(radian) * radius + center.x,
'y': Math.sin(radian) * radius + center.y
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var endAngle = endAngle - startAngle;
startAngle = startAngle <= 0 ? (360 + startAngle) % 360 : startAngle % 360;
endAngle = endAngle < 0 ? (360 + endAngle + startAngle) % 360 : Math.abs(endAngle + startAngle) % 360;
var direction = getPathArc({'x': x, 'y': y}, startAngle, endAngle, radius);
var d = direction;
return d;
}
這是樣本https://jsfiddle.net/ndmsqmao/3/
我需要為指定點繪制該圓圈的一個刻度線。
比如讓我們考慮一下,
如果它的值從50到100開始意味着我需要繪制第66個值的一個刻度線..如何實現這個?
希望這可以幫助...
var minValue = 50, maxValue = 100, value = 66,
minAngle = 180, maxAngle = 360, angle;
angle = minAngle + (value - minValue) / (maxValue - minValue) * (maxAngle - minAngle);
alert(angle);
我希望我理解你的問題......
var min = 50;
var max = 100;
var value = 66;
var angle = 180/(max-min)*(value-min)+180;
console.log (angle);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.