如果你看一下:http://jsfiddle.net/KA4dz/
在此演示中,您可以清楚地看到内部元素由于旋转而到达外部元素的外部。请求是缩小内部元素(同时保持纵横比和中心位置),使其适合其容器。
用例是用户可以手动旋转这样的内部元件,同时确保其保持在外部元件内。 (因此,简单地缩小尺寸直到适合眼睛并不是解决方案)。
这是我的数学技能明显缺乏的场景。在这个阶段发布我所尝试的内容不会有多大作用。有人能指出我正确的方向吗?
Thanks!
另一项要求是,内部元素仅在需要时缩小,但在不需要时绝不会缩小(需要时意味着保留外部元素的边界)
要保存点击:
.outer{
border: 1px solid black;
width: 100px;
height: 50px;
margin: 100px;
}
.inner{
background: blue;
width: 100px;
height: 50px;
transform: rotate(-40deg);
-webkit-transform: rotate(-40deg);
}
<div class="outer">
<div class="inner">
</div>
</div>
这很有趣。这是我的解决方案:http://jsfiddle.net/fletiv/jrHTe/
JavaScript 看起来像这样:
(function () {
var setRotator = (function () {
var setRotation,
setScale,
offsetAngle,
originalHeight,
originalFactor;
setRotation = function (degrees, scale, element) {
element.style.webkitTransform = 'rotate(' + degrees + 'deg) scale(' + scale + ')';
element.style.transform = 'rotate(' + degrees + 'deg) scale(' + scale + ')';
};
getScale = function (degrees) {
var radians = degrees * Math.PI / 180,
sum;
if (degrees < 90) {
sum = radians - offsetAngle;
} else if (degrees < 180) {
sum = radians + offsetAngle;
} else if (degrees < 270) {
sum = radians - offsetAngle;
} else {
sum = radians + offsetAngle;
}
return (originalHeight / Math.cos(sum)) / originalFactor;
};
return function (inner) {
offsetAngle = Math.atan(inner.offsetWidth / inner.offsetHeight);
originalHeight = inner.offsetHeight;
originalFactor = Math.sqrt(Math.pow(inner.offsetHeight, 2) + Math.pow(inner.offsetWidth, 2));
return {
rotate: function (degrees) {
setRotation (degrees, getScale(degrees), inner);
}
}
};
}());
var outer = document.getElementById('outer'),
inner = document.getElementById('inner'),
rotator = setRotator(inner),
degrees = 0;
window.setInterval(function () {
degrees += 1;
if (degrees >= 360) {
degrees = 0;
}
rotator.rotate(degrees);
}, 50);
}());
编辑:这是一张试图解释我的代码逻辑的图像。 :)
![enter image description here](https://i.stack.imgur.com/Ani4R.jpg)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)