Как изменить отступы в Javascript с помощью ползунка [решено] - PullRequest
Новая
       18

Как изменить отступы в Javascript с помощью ползунка [решено]

2 голосов
/ 17 июня 2019

Я пытаюсь изменить отступ на изображении с помощью ползунка.Идея заключается в том, что пользователи могут загрузить изображение и настроить его.Одним из вариантов является ползунок для изменения горизонтального отступа (по одному ползунку для каждого).Каждый ползунок имеет значения от -50 до 50 со значением по умолчанию 0. Например, если пользователь перемещает «ползунок горизонтального заполнения» влево (отрицательные значения), отступы влево и вправо уменьшатся, и если перемещениеползунок вправо (положительные значения) увеличит отступы влево и вправо.

Я создал ползунок HTML со значениями.Затем в файле javascript я создал прослушиватель событий для входного значения и функцию для его изменения, но он совсем не работает.

HTML CODE: 

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

JAVASCRIPT CODE: 

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

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

Кто-нибудь может, пожалуйста, дайте мне знать, что случилось?заранее большое спасибо!

Ответы [ 3 ]

2 голосов
/ 17 июня 2019

Ответ:

Было несколько вещей, которые нужно было изменить, чтобы перевести это в рабочее состояние.

  • Вы объявили slider с .value.Это указывает не на элемент, а на его значение.

  • Вам необходимо объявить переменную myCanvas для указания на элемент.

  • Вам необходимо добавить юнит для вашего CSS обновления.Это может быть px (чаще всего), em, rem, vw, vh и т. Д. Простое целое число (как указано в slider.value) его не обрежет.

  • padding визуально не может быть представлено как негатив, поскольку он не рассчитан на inset ниже значения 0.Это означает, что ваш слайдер на -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>

Примечание: Я добавил границу к myCanvas в CSS, чтобы изменения заполнениябыть видимым.

В сторону: создание плавного перехода

change - это обработчик событий, который вы используете в настоящее время.Это может сделать обновление стиля прерывистым , потому что обновление представляет собой повторный рендеринг после освобождения дескриптора ползунка.

Если вы хотите получить более плавное представление об изменении заполнения, вы можете использовать событие input.Это событие постоянно отображается на основе изменений, внесенных в элемент slider, а не только в результате окончательного выбора, и доступно во всех современных браузерах, включая IE9 и Edge. Для получения дополнительной информации см. 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>
1 голос
/ 17 июня 2019

Что такое myCanvas Вы должны выбрать его также в своем JS. 

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

silder.addEventListener('change', () => {
        myCanvas.style.padding = slider.value
  });
0 голосов
/ 17 июня 2019 
var slider = document.getElementById("horizontal-padding").value;

Вы хотите получить доступ к элементу HTML, а не к его значению.Вы должны удалить «.value», и он будет работать.Также я бы предложил использовать событие «input», потому что «change» будет срабатывать только при отпускании ползунка.

PS Я предполагал, что вы выбрали холст, прежде чем пытались его изменить.

...