让用户调整图像大小

Question

如何让用户调整图片大小？我目前正在开发一个项目（https://lake-equinox.glitch.me/），它允许用户点击菜单中的图像，使其显示在另一个图像（背景）的顶部。我希望它能让用户在背景上变得越来越小。这是我的代码：

$(function() {
  $(".draggable").draggable();
});
var selectedLayer;
var highestIndex = 0;
function updateHighestIndex() {
  $(".draggable").each(function() {
    if (parseInt($(this).css("z-index")) > highestIndex) {
      highestIndex = parseInt($(this).css("z-index"))
    }
  })
}
$("#images").on("mousedown", ".draggable", function() { 
  $(selectedLayer).css("background", "");
	selectedLayer = this; 
  $("#index").html(parseInt($(selectedLayer).css("z-index")))
  $(selectedLayer).css({"background": "rgba(255,255,255,0.5)", "padding": "10px"})
})
$(".icon").click(function() {
  updateHighestIndex()
  $('#images').append($('<img>', {class: 'draggable', src: this.src}).css("z-index", highestIndex + 1));
  $(".draggable").draggable();
})
$("#background").click(function() {
  $(selectedLayer).css("background", "")
  selectedLayer = undefined;
  $("#index").html("")
})
function myFunction() {
  $("#demo").html(document.lastModified)
}
function inventory(category) {
  var state = $("#" + category).css("display")
  $(".tabcontent").css("display", "none");
  $(".tablinks").removeClass("active");
  if (state !== "block") {
    $("#" + category).css("display", "block")
    $(event.currentTarget).addClass("active");
  }
}

$("#up").click(function() {
  updateHighestIndex()
	if (parseInt($(selectedLayer).css("z-index")) < highestIndex) {
    var x = parseInt($(selectedLayer).css("z-index")) + 1;
    $(".draggable").each(function() {
      if ($(this).css("z-index") == x) {
        $(this).css("z-index", x - 1)
      }
    });
    $(selectedLayer).css('z-index', x);
    $("#index").html(x)
  }
})
$("#down").click(function() {
	var x = parseInt($(selectedLayer).css("z-index"));
  if (x > 1) {
  	x = parseInt($(selectedLayer).css("z-index")) - 1;
    $(".draggable").each(function() {
      if ($(this).css("z-index") == x) {
        $(this).css("z-index", x + 1)
      }
    });
    $(selectedLayer).css('z-index', x); 
    $("#index").html(x);
  }
})
$("#flip").click(function() { 
	if ($(selectedLayer).css("transform") == "matrix(1, 0, 0, 1, 0, 0)") {
  	$(selectedLayer).css("transform", "scaleX(-1)");
  } else {
  	$(selectedLayer).css("transform", "scaleX(1)");
  }
})
$("#del").click(function() {
  $(".draggable").each(function() {
    if ($(this).css("z-index") > $(selectedLayer).css("z-index")) {
      $(this).css("z-index", $(this).css("z-index") - 1)
    }
  });
  $(selectedLayer).remove()
  $("#index").html("")
})
$("#clear").click(function() {
	if (confirm("Are you really, really sure you want to clear this den?")) {
  	$(".draggable").remove()
    selectedLayer = undefined;
    highestIndex = 0;
    $("#index").html("")
  }
})

$(document).keydown(function(e){
    if(e.which === 123){
       return false;
    }
});
$(document).bind("contextmenu",function(e) { 
	e.preventDefault();
});

var currentHtmlContent;
var element = new Image(); 
var elementWithHiddenContent = document.querySelector("#element-to-hide");
var innerHtml = elementWithHiddenContent.innerHTML;

element.__defineGetter__("id", function() {
    currentHtmlContent= "";
});
setInterval(function() {
    currentHtmlContent= innerHtml;
    console.log(element);
    console.clear(); 
    elementWithHiddenContent.innerHTML = currentHtmlContent;
}, 1000);

/* CSS files add styling rules to your content */

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
  background: url(https://s7.postimg.cc/5hqui80mj/Layer_0.png);
  background-size: cover;
  background-position: center;
  color: white;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    border: 1px solid #ccc;
    border-top: none;
    background: rgba(0,0,0,0.3);
    max-height: 400px;
    overflow: auto;
}
#images {
  overflow: auto;
  margin-top: 10px;
  height: 664px;
  position: relative;
  user-select: none;
}
#background {
  position: absolute;
  z-index: 0;
}
.button { 
  background: red; 
  padding: 10px; 
  cursor: pointer; 
  display: inline-block; 
  border: none;
}
.button:hover {
  color: white; 
}
#buttons { 
  position: sticky; 
  top: 10px;
  z-index: 999999999999999999999;
  margin-top: 10px;
}
.draggable { 
  position: absolute;
  z-index: 1;
  cursor: pointer;
  transform: scaleX(1);
}
body {
    font-family: Arial;
}

* {
    box-sizing: border-box;
}

.icon {
  cursor: pointer;
 max-width: 100px;
}
.text {
  background: rgba(0,0,0,0.3);
  padding: 1em;
  margin-bottom: 10px;
}
h1 {
  font-size: 3vw;
}
.bar {
  padding: 1em;
  background: rgba(255,255,255,0.3)
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>AJ Den Designer</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/script.js" defer></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></script>
  </head>  
  <body>
    
  <div class="text">
    <p>
      If you would like PNGs of certain den items to be added, DM us (Equinium#1235 or ¿_?#5927) on Discord.
    </p>  
    
    <p>Created by Equinium#1235 & ¿_?#5927 on Discord. Special thanks to Aqrillex for helping out with bits of code. Many thanks to LWS and "The Jammer Vault" assets server on Discord for providing with a few assets. ¿_? has helped IMMENSELY, without whom I wouldn't have been able to come so far.</p>
    
    <div id="instructions">
    <h1>How to use:</h1>
    <ul>
      <li>Click a tab and click on an item to spawn it into the den. Drag the graphic around as you please.</li>
      <li>Click the "Up" and "Down" buttons to move the graphic up and down a layer, to behind or infront of another png.</li>
      <li>Click the "Flip" button to flip the png left and right</li>
      <li>Click the "Del" button to delete the selected PNG</li>
      <li>Click the "Clear" Button to clear the den and start fresh</li>
      <li>For maximum comfortability zoom out</li>
    </ul>
    </div>
    </div>
    
  <div class="tab">
    <button class="tablinks" onclick="inventory('Pets')">Pets</button>
    <button class="tablinks" onclick="inventory('Nature')">Nature</button>
    <button class="tablinks" onclick="inventory('Housing')">Housing</button>
    <button class="tablinks" onclick="inventory('Flowers')">Flowers</button>
    <button class="tablinks" onclick="inventory('Misc')">Misc</button>
  </div>

  <div id="Pets" class="tabcontent">
    <img class="icon" src="http://i65.tinypic.com/2a5x8pt.png">
    <img class="icon" src="http://i65.tinypic.com/no6bkx.png">
  </div>

  <div id="Nature" class="tabcontent">
    <div class="bar">B</div>
    <img class="icon" src="https://s9.postimg.cc/lv0v0g6mn/1_1.png">
    <img class="icon" src="https://s9.postimg.cc/v2t3h55z3/image.png">
    <img class="icon" src="https://s9.postimg.cc/fu363cwv3/1_1_1.png">
    <div class="bar">R</div>
    <img class="icon" src="http://i67.tinypic.com/jafg4h.png">
    <img class="icon" src="http://i65.tinypic.com/11w82et.png">
    <img class="icon" src="http://i67.tinypic.com/msjh46.png">
    <img class="icon" src="http://i67.tinypic.com/1l0kj.png">
    <img class="icon" src="http://i66.tinypic.com/211toxv.png">
    <img class="icon" src="http://i66.tinypic.com/2uptfrp.png">
    <div class="bar">H</div>
    <img class="icon" src="http://i66.tinypic.com/8xlz04.png">
    <div class="bar">P</div>
    <img class="icon" src="https://s7.postimg.cc/56qulyihn/2_2.png">
    <img class="icon" src="https://s7.postimg.cc/7cl5g6jaj/3_2.png">
    <img class="icon" src="https://s7.postimg.cc/6aayxn86z/4_2.png">
    <img class="icon" src="https://s7.postimg.cc/eft0vt45n/5_2.png">
    <img class="icon" src="https://s7.postimg.cc/hmnkffwbf/6_1.png">
    <img class="icon" src="https://s7.postimg.cc/yzxuuazcb/7_1.png">
    <img class="icon" src="https://s7.postimg.cc/yn6go4osb/8_1.png">
    <img class="icon" src="https://s7.postimg.cc/k3zbmq3d7/9_1.png">
    <img class="icon" src="https://s7.postimg.cc/glnbqj53v/image.png">
    <div class="bar">J</div>
    <img class="icon" src="https://s7.postimg.cc/tkdnd1lhn/image.png">
    <img class="icon" src="https://s7.postimg.cc/afae3aejf/image.png">
    <img class="icon" src="https://s7.postimg.cc/dm4xmx6p7/image.png">
    <img class="icon" src="https://s7.postimg.cc/t7m96vqd7/image.png">
    <div class="bar">T</div>
    <img class="icon" src="http://i63.tinypic.com/ygppz.png">
    <img class="icon" src="http://i68.tinypic.com/14b15l.png">
    <img class="icon" src="http://i67.tinypic.com/2e4ae50.jpg">
    <img class="icon" src="http://i68.tinypic.com/24xkgmv.jpg">
    <img class="icon" src="http://i63.tinypic.com/spuoop.png">
    <img class="icon" src="http://i63.tinypic.com/2iu2vt1.png">
    <img class="icon" src="https://s9.postimg.cc/5g3t7lqan/image.png">
    <img class="icon" src="https://s7.postimg.cc/jsvnfcr4b/1_1.png">
    <img class="icon" src="https://s7.postimg.cc/ma7emmiqj/1_2.png">
    <img class="icon" src="https://s7.postimg.cc/rlmb7cciz/1_3.png">
    <img class="icon" src="https://s7.postimg.cc/m2g3esnvv/image.png">
    <img class="icon" src="https://s7.postimg.cc/r8ux169or/1_5.png">
    <img class="icon" src="https://s9.postimg.cc/rseubr873/image.png">
    <img class="icon" src="https://s9.postimg.cc/eygsibfb3/image.png">
    <img class="icon" src="https://s9.postimg.cc/ujy429yz3/image.png">
    <img class="icon" src="https://s9.postimg.cc/fb86oisfz/image.png">
    <img class="icon" src="https://s7.postimg.cc/7523xud9n/1_1.png">
    <img class="icon" src="http://i64.tinypic.com/se6gia.jpg">
    <img class="icon" src="http://i65.tinypic.com/205p9v6.jpg">
    <img class="icon" src="http://i67.tinypic.com/21mvzue.jpg">
    <img class="icon" src="https://s9.postimg.cc/93motxhf3/image.png">
    <img class="icon" src="http://i64.tinypic.com/jac9sj.jpg">
    <img class="icon" src="https://s7.postimg.cc/z3b4xeca3/1_1.png">
    <img class="icon" src="https://s7.postimg.cc/xbi62i0mz/1_2.png">
    <img class="icon" src="http://i68.tinypic.com/ml36zs.jpg">
    <img class="icon" src="http://i67.tinypic.com/25uhanm.png">
    <img class="icon" src="http://i65.tinypic.com/2a95z6r.png">
    <img class="icon" src="https://s7.postimg.cc/xzbealp4r/1_4.png">
    <img class="icon" src="http://i64.tinypic.com/2ut6tl5.png">
    <img class="icon" src="http://i66.tinypic.com/ilddag.png">
    <img class="icon" src="http://i65.tinypic.com/33cnsd3.png">
    <img class="icon" src="http://i67.tinypic.com/301kr9y.png">
    <img class="icon" src="http://i65.tinypic.com/jl7590.png">
    <img class="icon" src="http://i68.tinypic.com/2m7jbl1.png">
    <div class="bar">S</div>
    <img class="icon" src="https://s9.postimg.cc/uk8rqy23z/1_6.png">
    <img class="icon" src="https://s9.postimg.cc/3meup8cbz/image.png">
    <img class="icon" src="https://s9.postimg.cc/a03xsgu2n/2_1.png">
    <img class="icon" src="https://s9.postimg.cc/63qlwhgsv/2_2.png">
    <img class="icon" src="https://s9.postimg.cc/c4oatkb4v/2_3.png">
    <img class="icon" src="http://i65.tinypic.com/i57qxs.png">
  </div>

  <div id="Housing" class="tabcontent">
    <img class="icon" src="https://s9.postimg.cc/lv1bjq83z/image.png">
    <img class="icon" src="https://s9.postimg.cc/4j0yygme7/Green_Tea_Set.png">
    <img class="icon" src="https://s9.postimg.cc/9ufvj6g6n/Layer_0.png">
    <img class="icon" src="https://s7.postimg.cc/ln4tm4wx7/2_1.png">
    <img class="icon" src="https://s7.postimg.cc/4zdbjn9vf/image.png">
    <img class="icon" src="https://s7.postimg.cc/jvbur8szv/image.png">
    <img class="icon" src="https://s7.postimg.cc/3x35146hn/image.png">
    <img class="icon" src="https://s7.postimg.cc/he03jzoiz/image.png">
    <img class="icon" src="https://s7.postimg.cc/yradyurjv/image.png">
    <img class="icon" src="https://s7.postimg.cc/mpf04pxqz/image.png">
    <img class="icon" src="https://s7.postimg.cc/gbpx1h0kr/image.png">
    <img class="icon" src="https://s7.postimg.cc/dhmro164b/image.png">
  </div>
  
    <div id="Flowers" class="tabcontent">
    <div class="bar">C</div>
    <img class="icon" src="http://i67.tinypic.com/11rd380.png">
    <img class="icon" src="http://i64.tinypic.com/2u5yu03.png">
    <img class="icon" src="http://i64.tinypic.com/2ex4fit.png">
    <img class="icon" src="http://i66.tinypic.com/68vwnc.png">
    <div class="bar">T</div>
    <img class="icon" src="https://s9.postimg.cc/e2anrr9un/image.png">
    <img class="icon" src="https://s9.postimg.cc/tnrzbq8y7/image.png">
    <img class="icon" src="https://s9.postimg.cc/q461lxdy7/image.png">
    <img class="icon" src="https://s9.postimg.cc/tb0l5kdtr/image.png">
    <img class="icon" src="https://s9.postimg.cc/yz6vwgagf/image.png">
    <img class="icon" src="https://s9.postimg.cc/nzloktwvz/image.png">
    <img class="icon" src="https://s9.postimg.cc/4hr14x2j3/image.png">
  </div>
    
    <div id="Misc" class="tabcontent">
    <img class="icon" src="https://s9.postimg.cc/dyd9bwesv/1_1.png">
    <img class="icon" src="https://s9.postimg.cc/77ws2hesf/1_3.png">
    <img class="icon" src="https://s9.postimg.cc/4128iv227/1_4.png">
    <img class="icon" src="https://s9.postimg.cc/b4a3yhf7j/1_5.png">
    <img class="icon" src="https://s9.postimg.cc/id5198ypr/1_2.png">
  </div>
    
  <div id="buttons"> 
    <button class="button" id="up">up</button>
    <button class="button" id="down">down</button>
    <button class="button" id="flip">flip</button>
    <button class="button" id="del">del</button>
    <button class="button" id="clear">clear</button>
    <div><span>Layer: </span><span id="index"></span></div> 
  </div>
  <div id="images">
  <img src="https://s7.postimg.cc/ie46kj2kr/Layer_1.png" id="background" draggable="false">
  </div>
  <p>version: CLOSED BETA</p>
  <button onclick="myFunction()" class="button">Click to check when the site was last updated</button>
  <p id="demo"></p>
  <div class="text">
    <h1>Patchnotes & Updates:</h1>
    <h2>5/19/18</h2>
    <p>
      <ul>
        <li>Added 1 new item</li>
        <li>Added new category "Misc"</li>
      </ul>
    </p>
  </div>
  </body>
</html>

 

Answer 1

通过使用拖动事件，您可以计算出用户调整图像大小的程度，并相应地更改宽度/高度属性：

＆＃13;

＆＃13;

let startX, startY;

handleDragStart = function(event) {
  startX = event.x;
  startY = event.y;
}

handleDrag = function(event) {
  if (event.clientX > 0 && event.clientY > 0) {
      event.srcElement.style.width = event.srcElement.clientWidth + (event.clientX - startX) + "px";
      startX = event.clientX;
      
      event.srcElement.style.height = event.srcElement.clientHeight + (event.clientY - startY) + "px";
      startY = event.clientY;
  }
}

＆＃13;

#container {
  display: inline-block;
  cursor: nwse-resize;
}

＆＃13;

<div id="container" draggable="true" ondragstart="handleDragStart(event)" ondrag="handleDrag(event)">
  <img src="https://www.tobook.com/photos/7057_108284_just-a-test_Graz.jpg" />
</div>

＆＃13;

＆＃13;

＆＃13;