Javascript 垂直、水平缩放图像和变换图像位置

Question

我想垂直、水平转换图像，并使用 javascript 缩放图像。目前我设法使调整大小的图像起作用，但它看起来不正确。我正在尝试使用类似于 Transform image 的东西.调整垂直移动条时，图像应上下移动，调整水平移动条时，图像应水平移动。目前 testresize() 函数正在调整图像大小，但它看起来不像我想要的那样。我想将包含 translateX()、translateY() 和 scale() 转换的 CSS 转换属性应用于每个图像。 Range Slider

<div id="toggle-components">
                    <fieldset>
                        <legend>Choose image to display</legend>
                        <input type="checkbox" id="mage1" onclick="if(this.checked){displayimg()}")><label for="image1">diving</label>
                        <input type="checkbox" id="mage2" onclick="if(this.checked){displaybgimage()}")><label for="image2">jumping</label>
                     
                </div>

<div id="container">
 <img id="dolphin1" class="image" src="../images/img/image1.png" >
            <img id="dolphin2" class="image" src="../images/img/image2.png" >
            
        </div>

<div id="adjust-components">
                    <fieldset>
                        <legend>Adjust image</legend>

                        <label for="vertical-control">move vertical:</label>
                        <input id="vertical-control" type="range" min="-100" max="100" value="0"><br>

                        <label for="size-control">resizesize:</label>
                        <input id="size-control" type="range" min="-100" max="100" value="0" onChange="testresize(this.value)"><br>

                        <label for="horizontal-control">move horizontal:</label>
                        <input id="horizontal-control" type="range" min="-100" max="100" value="0"><br>
                    </fieldset>
                </div>

var gettestimage=document.getElementsByClassName("image");
//resize image
function testresize(val){

    for(var i=0;i<gettestimage.length;i++){

        var chek1 = document.getElementById("image1");
        var chek2 = document.getElementById("image2");
      
        if(chek1.checked){
            gettestimage[0].style.width=5*(val / 1)+'px';
            console.log(val)

        }else if(chek2.checked){
            gettestimage[1].style.width=5*(val / 1)+'px';

        }

Answer 1

如果要设置 transform css 属性，那么为什么要设置 width 和 height 来缩放图像？解决方案其实很简单，我只需要改用 tansform 属性即可。此解决方案仅适用于单个图像，但我相信您可以设法使其适用于多个图像。

var image = document.getElementById("image1")

//The transformation (scale, translation, rotation) of the image
var transform = {
  translation: {
    x: 0,
    y: 0
  },
  scale: 1
};

function scaleImage(val){
  transform.scale = val;
  applyStyle()
}

function translateImage(axis, val){
  transform.translation[axis] = val;
  applyStyle()
}

function applyStyle() {
  image.style.transform = `scale(${transform.scale}) translate(${transform.translation.x}px, ${transform.translation.y}px)`
}

<div id="container">
  <img id="image1" class="image" src="https://www.w3schools.com/w3css/img_lights.jpg" width="500">
</div>
        
<div id="adjust-components">
  <fieldset>
    <legend>Adjust image</legend>
    <label for="vertical-control">move vertical:</label>
    <input id="vertical-control" type="range" min="-100" max="100" value="0" onchange="translateImage('y', this.value)"><br>
    <label for="size-control">scale:</label>
    <input id="size-control" type="range" min="0" max="2" value="1" step="0.1" onchange="scaleImage(this.value)"><br>
    <label for="horizontal-control">move horizontal:</label>
    <input id="horizontal-control" type="range" min="-100" max="100" value="0" onchange="translateImage('x', this.value)"><br>
  </fieldset>
</div>