Javascript Scale图像和Transfom图像垂直，水平放置

Question

我想垂直，水平转换图像，并使用javascript缩放图像。 目前，我设法使调整大小的图像正常工作，但看起来不正确。 我正在尝试具有类似于“ 变换图像”的功能 。 调整垂直移动条时，图像应上下移动；调整水平移动时，图像应水平移动。 目前，testresize（）函数正在调整图像的大小，但看起来不像我想要的。 我想将包含translateX（），translateY（）和scale（）转换的CSS转换属性应用于每个图像。 范围滑块

 <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>