使用滑块在同一对象上独立控制变换：scaleX 和变换：scaleY javascript

Question

下面的代码允许它们被单独控制，我的问题是如果你调整一个，然后调整另一个，你调整的第一个值会丢失（删除）而不是添加（附加？）到内联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>

Answer 1

transform 需要始终在其中设置两个比例。

为了避免每次都必须获取当前值然后执行字符串 comparisons/replacements 此代码段让 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>

Answer 2

现在通过获取两个滑块值并使用

同时应用它们来解决

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

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

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

这是评论

transform will need to have both scales set in it all the time.

让我这样想，谢谢。

工作代码..

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>

使用滑块在同一对象上独立控制变换：scaleX 和变换：scaleY javascript

Control transform: scaleX & transform: scaleY independently with javascript on the same object using sliders

javascript

css

translate

scale