javascript - 如何使用 slider 输入更改 Javascript 中的填充

Question

我正在尝试使用 slider 输入更改图像上的填充。这个想法是用户可以上传图像并对其进行自定义。其中一个选项是用于更改水平填充的 slider (每个 slider 一个)。每个 slider 的值从 -50 到 50，默认值为 0。 例如，如果用户将“水平内边距 slider ”向左移动(负值)，则左右内边距都会减少，如果将 slider 向右移动(正值)，则左右内边距都会增加。

我已经使用这些值创建了 HTML slider 。然后，在 javascript 文件中，我为输入值创建了一个事件监听器，并创建了一个用于更改它的函数，但根本不起作用。

HTML 代码:

<form class="range-field mt-2">
  <input type="range" min="-50" max="50" value="0" id="horizontal-padding" 
  step="2" />
</form>

JavaScript 代码:

var slider = document.getElementById("horizontal-padding").value;
var mycanvas = document.getElementById("mycanvas");

slider.addEventListener('change', function() {
    mycanvas.style.padding = slider.value;
});

任何人都可以告诉我出了什么问题吗？非常感谢!

Answer 1

答案:

要使其进入工作状态，需要更改许多内容。

• 您使用 .value 声明 slider。这并不指向元素，而是指向值。

• 您需要声明您的 myCanvas 变量以指向一个元素。

• 您需要为 CSS 更新添加一个单元。这可以是 px (最常见)、em、rem、vw、vh 等。一个简单的整数(由 slider.value 给出)不会削减它。

• padding 在视觉上不能表示为负数，因为它没有被设计为插入低于值0。这意味着您的 slider 移动到 -50 没有多大意义。在下面的代码片段中，我将其更新为范围 0-100。

---

代码:

var slider = document.getElementById("horizontal-padding"),
myCanvas = document.getElementById("myCanvas");

slider.addEventListener('change', function() {
    myCanvas.style.padding = slider.value + "px";
});

---

示例:

var slider = document.getElementById("horizontal-padding"),
myCanvas = document.getElementById("myCanvas");

slider.addEventListener('change', function() {
    myCanvas.style.padding = slider.value + "px";
});

canvas {
border: 1px solid black;
}

<form class="range-field mt-2">
  <input type="range" min="0" max="100" value="0" id="horizontal-padding" 
  step="2" />
</form>
<canvas id="myCanvas">Your browser does not support HTML5 Canvas</canvas>

注意: 我在 CSS 中向 myCanvas 添加了边框，以便可以看到填充的变化。

---

旁白:让过渡“顺利”

change 是您当前使用的事件处理程序。这可能会使样式更新看起来不稳定，因为一旦释放 slider handle ，更新就会重新渲染。

如果您希望更流畅地表示内边距更改，可以改用 input 事件。此事件根据对 slider 元素所做的更改(而不仅仅是最终选择)不断呈现，并且在包括 IE9 和 Edge 在内的所有现代浏览器中都可用。 For more information see MDN

---

示例:

var slider = document.getElementById("horizontal-padding"),
myCanvas = document.getElementById("myCanvas");

slider.addEventListener('input', function() {
    myCanvas.style.padding = slider.value + "px";
});

canvas {
border: 1px solid black;
}

<form class="range-field mt-2">
  <input type="range" min="0" max="100" value="0" id="horizontal-padding" 
  step="2" />
</form>
<canvas id="myCanvas">Your browser does not support HTML5 Canvas</canvas>