Question

我有一个简单的javascript问题。它应该用作镜头计算器，输入由两个滑块给出，用于镜头的距离和焦距。当我更改底部滑块时，全部按预期工作，但是当更改第一个滑块的距离时，它不会更新视角。镜头计算器可以在这里找到：

http://osc234.videofrank.nl/lenscalculator.php

使用NoUIslider创建滑块。

来自两个滑块的事件具有完全相同的值计算，但上部滑块仅“半”并且不更新角度。

我真的对这个感到困惑。什么可能导致这个？我不是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;

SliderMeters.noUiSlider.on('update', function(values, handle) {
  Distance = values[handle];

  FOVHeight = Math.round(((CCDHeight * Distance) / LensSize) * 100) / 100;
  FOVWidth = Math.round(((CCDWidth * Distance) / LensSize) * 100) / 100;
  FOVAngle = Math.round(Math.atan(CCDWidth / LensSize) * 100);

  MetersToDisplay.innerHTML = "Afstand in meters: " + Distance;
  SizeToDisplay.innerHTML = "D=" + Distance + "M=" + LensSize + " Beeld afmeting in meters (BxH): " + FOVWidth + " x " + FOVHeight + "<br>Horizontale kijkhoek (graden): " + FOVAngle;

});

SliderLensMM.noUiSlider.on('update', function(values, handle) {
  LensSize = values[handle];

  FOVWidth = Math.round(((CCDWidth * Distance) / LensSize) * 100) / 100;
  FOVHeight = Math.round(((CCDHeight * Distance) / LensSize) * 100) / 100;
  FOVAngle = Math.round(Math.atan(CCDWidth / LensSize) * 100);

  MMToDisplay.innerHTML = "Lens Afstelling in Millimeters: " + LensSize;
  SizeToDisplay.innerHTML = "D=" + Distance + "M=" + LensSize + " Beeld afmeting in meters (BxH): " + FOVWidth + " x " + FOVHeight + "<br>Horizontale kijkhoek (graden): " + FOVAngle;

});

<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>

Answer 1

Distance未参与FOVAngle的计算，因此更改Distance不会产生不同的FOVAngle。

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

CCDWidth是常量，LensSize由另一个滑块设置，因此无论第一个滑块的值如何，结果都是相同的。

奇怪的Javascript行为，而不是计算明显的结果

1 个答案: