英文:
How to calculate CSS rotate method degree using Javascript
问题
以下是我的速度计。我想要计算指针的角度，将用于 CSS 的 transform:rotate() 属性。
要保持指针在 300 分，我的角度是 -85，即 transform:rotate(-85deg)，要保持在 900 分，我的角度是 85，即 transform:rotate(85deg)。
所以现在我想要根据分数动态计算角度。如果分数低于 300，我会使用 -85 度，如果超过 900 则使用 85 度。如何在分数在 300 到 900 之间计算角度，且角度应在 -85 到 85 之间。我不擅长三角学。
我尝试使用百分比进行计算，但我认为我的计算是错误的。
英文:
Following is my speedometer. I want to calculate the degree of the pointer which will be used in CSS transform:rotate() property.
to keep the pointer at 300 score my degree is -85 i.e.transform:rotate(-85deg) and to keep it at 900 my degree is 85 i.e.transform:rotate(85deg).
So now I want to dynamically calculate the degree based on the score. If the score is below 300, I will use -85deg and if its above 900 then I will use 85deg. How can I calculate degree if the score is between 300 to 900 and degree should be between -85 to 85. I am not good at trigonometry.
I tried to calculate the using percentage but I think, I am doing that calculation wrong
答案1
得分: 0
function getRotation(value, options) {
const result = options.range.min + (options.range.max - options.range.min) * (((value - options.value.min) * 100) / (options.value.max - options.value.min) / 100)
if (result < options.range.min) return options.range.min
if (result > options.range.max) return options.range.max
return result
}
const options = {
value: {
min: 300,
max: 900
},
range: {
min: -85,
max: 85
}
}
console.log(getRotation(0, options)) // -85
console.log(getRotation(300, options)) // -85
console.log(getRotation(600, options)) // 0
console.log(getRotation(900, options)) // 85
console.log(getRotation(1000, options)) // 85
英文:
Get the 0 to 100 percentage of the value in the range of 300 to 900, then use that percentage to get the value of where that percentage sits in the angle range, then simple check on min and max constraints:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function getRotation(value, options) {
const result = options.range.min + (options.range.max - options.range.min) * (((value - options.value.min) * 100) / (options.value.max - options.value.min) / 100)
if (result < options.range.min) return options.range.min
if (result > options.range.max) return options.range.max
return result
}
const options = {
value: {
min: 300,
max: 900
},
range: {
min: -85,
max: 85
}
}
console.log(getRotation(0, options)) // -85
console.log(getRotation(300, options)) // -85
console.log(getRotation(600, options)) // 0
console.log(getRotation(900, options)) // 85
console.log(getRotation(1000, options)) // 85
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论