JavaScript镜头计算器异常：距离滑块无法更新视角角度

咱们直接拆解你遇到的问题：调整距离滑块时FOVAngle不更新，核心原因有两点，同时你的视角角度计算本身也存在公式错误，一起来解决：

1. FOVAngle不更新的直接原因 #

你在距离滑块的update事件中计算FOVAngle的逻辑是：

FOVAngle = Math.round(Math.atan(CCDWidth / LensSize) * 100);

这个公式只依赖传感器宽度（CCDWidth）和镜头焦距（LensSize），和拍摄距离（Distance）完全无关——而视角角度（FOV）的物理定义就是由镜头焦距和传感器尺寸决定的，和拍摄距离没有关系。所以当你拖动距离滑块时，只要LensSize没有变化，FOVAngle自然不会更新，这其实是符合物理逻辑的，但可能和你的预期不符？

如果你是想计算拍摄距离下，视场范围对应的观测角度（非标准FOV定义），可以基于视场宽度（FOVWidth）和距离（Distance）计算：

FOVAngle = Math.round(Math.atan(FOVWidth / (2 * Distance)) * 2 * 180 / Math.PI * 100) / 100;

2. 标准视角（FOVAngle）的公式错误 #

你当前的视角计算缺少两个关键步骤：

• 没有将Math.atan返回的弧度值转换为角度（需要乘以180/Math.PI）
• 标准水平视角的公式应为2 * arctan( (传感器宽度/2) / 镜头焦距 )

修正后的标准FOVAngle计算：

FOVAngle = Math.round(2 * Math.atan( (CCDWidth / 2) / LensSize ) * 180 / Math.PI * 100) / 100;

3. 变量初始化缺失 #

全局变量Distance和LensSize没有初始值，滑块创建后未将初始值赋值给它们，导致页面加载时第一次计算会出现NaN问题，需要添加初始化代码：

// 初始化变量为滑块初始值
Distance = SliderMeters.noUiSlider.get();
LensSize = SliderLensMM.noUiSlider.get();

修复后的完整代码 #

JavaScript部分 #

var CCDHeight, CCDWidth, FOVHeight, FOVWidth, FOVAngle, Distance, LensSize;
var MetersToDisplay = document.getElementById('input-number');
var MMToDisplay = document.getElementById('lensmm-slider');
var SizeToDisplay = document.getElementById('size-output');

var SliderMeters = document.getElementById('sliderdistance');
noUiSlider.create(SliderMeters, {
    start: 5,
    step: 0.1,
    padding: 6,
    range: { 'min': -5, 'max': 106 }
});

var SliderLensMM = document.getElementById('sliderlensmm');
noUiSlider.create(SliderLensMM, {
    start: 2.8,
    step: 0.1,
    padding: 6.8,
    range: { 'min': -5, 'max': 106.8 }
});

// 1/3 inch 4:3
CCDWidth = 4.8;
CCDHeight = 3.6;

// 初始化变量为滑块初始值
Distance = SliderMeters.noUiSlider.get();
LensSize = SliderLensMM.noUiSlider.get();

// 通用计算函数，避免代码冗余
function calculateAndDisplay() {
    FOVHeight = Math.round(((CCDHeight * Distance) / LensSize) * 100) / 100;
    FOVWidth = Math.round(((CCDWidth * Distance) / LensSize) * 100) / 100;
    // 修正后的标准视角计算
    FOVAngle = Math.round(2 * Math.atan( (CCDWidth / 2) / LensSize ) * 180 / Math.PI * 100) / 100;
    
    SizeToDisplay.innerHTML = "D=" + Distance + "M=" + LensSize + " Beeld afmeting in meters (BxH): " + FOVWidth + " x " + FOVHeight + "<br>Horizontale kijkhoek (graden): " + FOVAngle;
}

// 距离滑块事件
SliderMeters.noUiSlider.on('update', function(values, handle) {
    Distance = values[handle];
    MetersToDisplay.innerHTML = "Afstand in meters: " + Distance;
    calculateAndDisplay();
});

// 焦距滑块事件
SliderLensMM.noUiSlider.on('update', function(values, handle) {
    LensSize = values[handle];
    MMToDisplay.innerHTML = "Lens Afstelling in Millimeters: " + LensSize;
    calculateAndDisplay();
});

// 页面加载时执行一次计算
calculateAndDisplay();

HTML部分（修正了重复的容器问题） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.css" />

<div class="view">
    <p>Stel de afstand in tot het onderwerp in meters. Speel met de afstelling van de lens en kijk wat het effect is op de breedte en hoogte van het te verwachten beeld.</p>
    <div class="example">
        <div id="input-number"></div>
        <br>
        <div id="sliderdistance"></div>
        <br>
        <div id="lensmm-slider"></div>
        <br>
        <div id="sliderlensmm"></div>
        <br>
        <div id="size-output"></div>
    </div>
</div>

额外优化说明 #

我把重复的计算逻辑抽成了calculateAndDisplay函数，避免代码冗余，也方便后续维护——两个滑块的事件只需要更新对应变量，再调用同一个计算函数即可。另外修复了HTML中重复的容器ID问题，确保显示和滑块容器不冲突。

内容的提问来源于stack exchange，提问作者Frank Bemelman