Question

我有一个物体可以通过它的任何一个侧面以及它的任何一个角来调整大小。

现在我正在努力让它可以旋转，我正在使用CSS属性Scanner keyboard = new Scanner(System.in); while (true) { System.out.println("Enter your difficulty: Easy (e), Intermediate (i), or Hard (h)"); String diff = keyboard.next(); diff = diff.substring(0, 1); String guess = ""; String newGuess = ""; String newWord = "loops";//RandomWord.newWord(); int y = 0; int count = 0; for (int i = 0; i < newWord.length(); i++) { newWord.charAt(i); guess = newWord.replaceAll("[^#]", "-"); } if ((diff.equalsIgnoreCase("e")) || (diff.equalsIgnoreCase("i")) || (diff.equalsIgnoreCase("h"))) { System.out.println("The secret word is:" + " " + newWord); System.out.println("The word is:" + " " + guess); System.out.println("Please enter the letter you want to guess"); String letterInput = keyboard.next(); System.out.println("Please enter the spaces you want to check (seperated by spaces)"); String spaces = keyboard.nextLine(); spaces = keyboard.nextLine(); System.out.println(Character.getNumericValue(spaces.trim().charAt(count))); for (int i = 0; i < spaces.trim().length(); i++) { int x = Character.getNumericValue(spaces.trim().charAt(i)); if (x == 0) { y = x - 1; y = 0; if ((letterInput.equalsIgnoreCase(newWord.substring(x, x + 1)))) { newGuess = guess.substring(0, y) + guess.substring(y, x) + letterInput + guess.substring(x + 1); System.out.println(newGuess); } } else if ((letterInput.equalsIgnoreCase(newWord.substring(x, x + 1)))) { newGuess = guess.substring(0, x) + guess.substring(x, x + 1) + letterInput + guess.substring(x + 1); System.out.println(newGuess); } } } }这样做，锚点是对象的中心。

该对象具有顶部，左侧，宽度，高度和角度属性。

问题在于，一旦旋转，如果我需要从右下角调整大小，它仍然保持其左上角位置，同时仍保持中心锚点。

我需要通过更新来找到一种维持左上角位置的方法，可能需要一些三角函数。

translate: rotate(angle)

document.getElementById("button").addEventListener("click", function() {
  var obj = document.getElementById("object");

  console.log(obj.style.top, obj.style.left); // 100, 100

  obj.style.width = "200px";
  obj.style.height = "200px";

  // Something needs to be done here to update the top left position and keep it in place

});

div {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 50px;
  height: 50px;
  background: red;
  transform-origin: 50% 50%;
  transform: rotate(20deg);
}

我有一个小提琴here

Answer 1

我认为你正试图让它留在原地，所以只需添加：



obj.style.left = "25px";
obj.style.top = "25px";

obj.style.left = "25px"; obj.style.top = "25px"; 设定高度和宽度后。为了获得这个位置，我看到你的尺寸从50到200像素（增加了4倍），所以我把原来的x / y的四分之一放在＆＃34;相同的＃34;点。

希望这有帮助！（codepen：http://codepen.io/JohnJ1101/pen/wJpJqE）

如何在调整旋转对象的大小后更新左上角位置？

1 个答案: