Некоторая довольно сложная тригонометрия для изменения размеров окна

Question

Некоторая довольно сложная тригонометрия для изменения размеров окна

0

Пытается добиться возможности изменять размер окна со всех четырех углов. Это достаточно просто, но я также хочу, чтобы вращалась и все еще удерживала фиксаторы на месте (например, любое достойное программное обеспечение для редактирования фотографий). Я мог бы переусердствовать, но, как оказалось, требуется сложный триггер для блокировки якорей следующим образом:

http://jsfiddle.net/andrewplummer/W8tyB/1/

Чтобы быть ясным, на самом деле в коде не на самом деле много ящиков... в разных коробках предполагается, что один отдельный ящик будет изменен до разных размеров с разных углов.

Этот пример очень прост при 45 градусах, но в конечном итоге я хочу, чтобы триггер мог получить позицию (слева, сверху) для любого размера (прямоугольники, конечно, не только квадраты), удерживаемые на любом якоре с любым вращением в теме.

Прямая помощь приветствуется, но если есть какие-либо сообщения в блогах о том, как сформулировать вопрос, чтобы ответить на эту проблему, это может быть еще более полезно!

Полный код:

<div id="box1"></div>

<!-- Resizing to 40x40 with the anchor at the top -->
<div id="box2"></div>
<!-- Resizing to 30x30 with the anchor at the top -->
<div id="box3"></div>

<!-- Resizing to 40x40 with the anchor at the left -->
<div id="box4"></div>
<!-- Resizing to 30x30 with the anchor at the left -->
<div id="box5"></div>

#box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: rgba(0,0,0,0.2);
  -webkit-transform: rotateZ(45deg);
}

#box2 {
  position: absolute;
  top: 38px;
  left: 79px;
  width: 40px;
  height: 40px;
  background: rgba(255,0,0,0.2);
  -webkit-transform: rotateZ(45deg);
}

#box3 {
  position: absolute;
  top: 34px;
  left: 87px;
  width: 30px;
  height: 30px;
  background: rgba(255,0,0,0.2);
  -webkit-transform: rotateZ(45deg);
}

#box4 {
  position: absolute;
  top: 79px;
  left: 38px;
  width: 40px;
  height: 40px;
  background: rgba(0,0,255,0.2);
  -webkit-transform: rotateZ(45deg);
}

#box5 {
  position: absolute;
  top: 84px;
  left: 36px;
  width: 30px;
  height: 30px;
  background: rgba(0,0,255,0.2);
  -webkit-transform: rotateZ(45deg);
}

Andrew 21 сен. 2013, в 06:06

Источник

Теги:

javascript

html

css

1 ответ

Ещё вопросы

Andrew · Accepted Answer · 2013-09-21T12-31-00.000Z

Хорошо, я понял это... в моем случае это было не так сложно, как требовать матрицу (без перекоса, масштабирования или перевода... все, что я хотел, это высота/ширина и вращение), и оказалось, что это проще чем я думал.

В конце код, который работал для меня, был, как я знаю, связанными якорями, чтобы вычислить расстояние от якоря до центра прямоугольника с приложением вращения, а затем переместиться в верхний левый угол без применения поворота.

var offsetX  = rectangleWidth / 2;
var offsetY  = rectangleHeight / 2;

// If we are on the "right/east" side then to get to the
// center the X value needs to be inverted. Likewise for
// the Y value for "bottom/south".
if(anchor.type === 'ne' || anchor.type === 'se') {
  offsetX *= -1;
}
if(anchor.type === 'sw' || anchor.type === 'se') {
  offsetY *= -1;
}

// Get the distance to the center and apply rotation.
var distanceToCenter = new Point(offsetX, offsetY).rotate(rectangle.rotation);
// Distance to the top left corner is always the same regardless of the rotation.
var distanceToTopLeftCorner = new Point(-rectangleWidth / 2, -rectangleHeight / 2);

// And that it! Getting the x/y position of the rotated rectangle is simply a matter
// of moving to the center of the rectangle (taking rotation into regard), then moving
// to the non-rotated upper left corner (which would be the same as of the rectangle
// had no rotation applied)
var position = anchor.position.add(distanceToCenter).add(distanceToTopLeftCorner);