如何使用滑块输入更改 Javascript 中的填充

Question

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

我已经创建了带有值的 HTML 滑块。然后，在 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

答案：

有很多事情需要改变才能使其进入工作状态。

• 您将 slider 声明为 .value。这不是指向元素，而是值。

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

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

• padding 在视觉上不能表示为负数，因为它并非设计为低于 0 值的 inset。这意味着您的滑块转到-50 没有多大意义。在下面的 sn-p 中，我将其更新为范围 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 是您当前使用的事件处理程序。这会使样式更新看起来不连贯，因为一旦释放滑块句柄，更新就会重新渲染。

如果您想要更流畅地表示填充更改，您可以改用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>

Answer 2

什么是myCanvas 您也需要在您的 js 中选择它。

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

silder.addEventListener('change', () => {
        myCanvas.style.padding = slider.value
  });

Answer 3

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

您想要访问 HTML 元素而不是它的值。您应该删除“.value”，它会起作用。另外我建议使用“输入”事件，因为“更改”只会在您释放滑块时触发。

附：我假设您在尝试更改画布之前已经选择了它。