一些相当复杂的三角函数用于调整框大小
Some rather complex trigonometry for box resizing
尝试实现从所有 4 个角调整框大小的能力。这很简单,但我也希望能够旋转并且仍然将锚点固定到位(就像任何像样的照片编辑软件一样)。我可能想多了,但事实证明需要一些复杂的三角才能像这样锁定锚点:
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);
}
好吧,
我想通了...就我而言,它并不像需要矩阵那么复杂(没有偏斜、比例或平移......我想要的只是高度/宽度和旋转),结果证明它比我想象的要简单。
最后,据我所知,对我有用的代码是计算从锚点到应用旋转的矩形中心的距离,然后在不应用旋转的情况下移动到左上角。
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's 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);
相关文章:
- 用于显示onclick事件计数的可调整跨度标记
- JavaScript调整iFrame大小-适用于Firefox/IE,但不适用于Chrome
- 用于动态调整菜单大小的 scrollTop 函数
- 容器应自动调整为背景图像的高度,仅用于响应式设计 CSS
- 一些相当复杂的三角函数用于调整框大小
- Javascript新窗口,用于在IE中不调整视频大小
- 用于调整形状大小的输入按钮
- FullCalendar可在设置为本地时区时调整时区,但不适用于欧洲/雅典
- 用于调整博客文章中照片大小的JavaScript
- JQuery表排序器列调整大小不适用于我的表
- jQuery滑块适用于除Chrome 15以外的所有浏览器.调整Chrome 15浏览器窗口大小时再次工作
- 如何调整空格键和回车只适用于第三个按钮,不适用于任何其他按钮
- MCV应用程序,用于为视图调整模型数据
- Javascript调整大图像大小仅适用于F5之后
- 用于调整图像大小的javascript在IE中不起作用
- html5画布用于调整图像大小的算法是什么
- 为什么这个简单的“;拖动以调整块的大小”;JavaScript没有'不适用于Chrome
- Jquery UI 可调整大小不适用于 Chrome 中的附加图像
- Jquery可调整大小,不适用于谷歌地图
- 用于画布调整大小的JavaScript事件