Блог

Главная - Вопросы по программированию - Преобразование управления: scaleX и преобразование: масштабирование независимо с помощью javascript на одном и том же объекте с помощью ползунков

Преобразование управления: scaleX и преобразование: масштабирование независимо с помощью javascript на одном и том же объекте с помощью ползунков

#javascript #css #scale #translate

Вопрос:

Следующий код позволяет управлять ими индивидуально, моя проблема в том, что если вы отрегулируете один, а затем отрегулируете другой, значение для первого, которое вы скорректировали, будет потеряно (удалено) вместо добавленного (добавлено?) к встроенному css.

 function scaleXfont(e) {
  var scaleamount = document.getElementById("scaleXslider").value;
  document.getElementById("transscale").style.transform = "scaleX("   scaleamount   ")";
  currentcss();
}

function scaleYfont(e) {
  var scaleamount = document.getElementById("scaleYslider").value;
  document.getElementById("transscale").style.transform = "scaleY("   scaleamount   ")";
  currentcss();
}

function currentcss() {
document.getElementById("currentcss").innerText = document.getElementById("transscale").style.cssText;
} 
 <div class="singlecontrol">
<span style="vertical-align: middle;">ScaleX</span>
<input style="vertical-align: middle;" id="scaleXslider" oninput="scaleXfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" />
</div>

<div class="singlecontrol"
><span style="vertical-align: middle;">ScaleY</span>
<input style="vertical-align: middle;" id="scaleYslider" oninput="scaleYfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" /></div>

<div id="cssinuse">
Current CSS = <br />
<span id="currentcss"></span>
</div>
<br /><br />
<div style="display:inline-block; width:100%; text-align:center;">
<div id="transscale">Stretch/Flip Me</div>
</div>

Комментарии:

1. Привет! Да, вы должны запомнить и поместить 2 значения, каждый раз разделенные пробелом.

2. @Philippe Как бы я это сделал? Должен ли я получить текущее значение (если оно установлено) для другого, а затем добавить?

3. Да, вы должны 🙂

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

Ответ №1:

для преобразования потребуется, чтобы в нем постоянно были установлены обе шкалы.

Чтобы избежать необходимости каждый раз получать текущие значения, а затем выполнять сравнения/замены строк, этот фрагмент позволяет JS установить пару переменных CSS-x и-y со стилем в элементе, который имеет эту форму:

 style="transform: scaleX(var(--x)) scaleY(var(--y));"
 
 function scaleXfont(e) {
  var scaleamount = document.getElementById("scaleXslider").value;
  document.getElementById("transscale").style.setProperty('--x', scaleamount);
  currentcss();
}

function scaleYfont(e) {
  var scaleamount = document.getElementById("scaleYslider").value;
  document.getElementById("transscale").style.setProperty('--y', scaleamount);
  currentcss();
}

function currentcss() {
  document.getElementById("currentcss").innerText = document.getElementById("transscale").style.cssText;
} 
 <div class="singlecontrol">
  <span style="vertical-align: middle;">ScaleX</span>
  <input style="vertical-align: middle;" id="scaleXslider" oninput="scaleXfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" />
</div>

<div class="singlecontrol"><span style="vertical-align: middle;">ScaleY</span>
  <input style="vertical-align: middle;" id="scaleYslider" oninput="scaleYfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" /></div>

<div id="cssinuse">
  Current CSS = <br />
  <span id="currentcss"></span>
</div>
<br /><br />
<div style="display:inline-block; width:100%; text-align:center;">
  <div id="transscale" style="transform: scaleX(var(--x)) scaleY(var(--y)); --x: 1; --y: 1;">Stretch/Flip Me</div>
</div>

Комментарии:

1. Спасибо, вы знаете, что этот код работает не так, как задумывалось, потому что масштаб преобразования не применяется к div «Растянуть/перевернуть меня» (по крайней мере, это относится ко мне в Firefox)

2. Упс! Спасибо за проверку — каким-то образом отсутствующее двоеточие и начальные условия были пропущены, когда я вставил код во фрагмент из своей системы. Теперь все должно быть в порядке — не могли бы вы проверить? Я тестировал на Edge/Windows10.

3. Сказав это, да, значения изменены и соответствуют значениям, полученным с помощью ползунка, но их необходимо отрегулировать.

4. Да, похоже, теперь при необходимости меняйте их с ползунков, так что спасибо вам за это. выходной текст CSS кажется немного странным, хотя с отображением переменных

5. Я не изменил способ вывода текста CSS — я думаю, вам придется посмотреть на это, чтобы удалить переменные.

Ответ №2:

Теперь решается путем захвата обоих значений ползунка и одновременного их применения с помощью

var scaleXamount = document.getElementById("scaleXslider").value;

var scaleYamount = document.getElementById("scaleYslider").value;

style.transform = "scale(" scaleXamount ", " scaleYamount ")";

Это был комментарий

для преобразования потребуется, чтобы в нем постоянно были установлены обе шкалы.

это заставило меня так подумать, так что спасибо тебе.

Рабочий код..

 function scalefont(e) {
  var scaleXamount = document.getElementById("scaleXslider").value;
  var scaleYamount = document.getElementById("scaleYslider").value;
  document.getElementById("transscale").style.transform = "scale("   scaleXamount   ", "   scaleYamount   ")";
  currentcss();
}

function currentcss() {
document.getElementById("currentcss").innerText = document.getElementById("transscale").style.cssText;
} 
 <div class="singlecontrol">
<span style="vertical-align: middle;">ScaleX</span>
<input style="vertical-align: middle;" id="scaleXslider" oninput="scalefont(event)" type="range" value="1.0" min="-10" max="10" step="0.001" autocomplete="off" />
</div>

<div class="singlecontrol"
><span style="vertical-align: middle;">ScaleY</span>
<input style="vertical-align: middle;" id="scaleYslider" oninput="scalefont(event)" type="range" value="1.0" min="-10" max="10" step="0.001" autocomplete="off" /></div>

<div id="cssinuse">
Current CSS = <br />
<span id="currentcss"></span>
</div>
<br /><br />
<div style="display:inline-block; width:100%; text-align:center;">
<div id="transscale">Stretch/Flip Me</div>
</div>
Метки: