gpt4 book ai didi

jquery - 更改宽度/高度会移动旋转的元素

转载 作者:行者123 更新时间:2023-12-01 06:46:22 27 4
gpt4 key购买 nike

当改变旋转元素的宽度/高度时,元素会移动!

这是一个例子
<强> JSFiddle

例如,当我更改宽度时,该对象会丢失其原始位置,这会影响 jQueryUI Resizing 并使其无法使用。

CSS:

.test{
position: absolute;
top: 200px;
left; 200px;

width: 400px;
height: 200px;
background: red;

transform: rotate(-90deg);
}

<强> JSFiddle
是否有库或函数可以通过逆转这种影响来纠正此问题。

编辑:我制作了一个 jQuery 函数,可以在调整旋转元素大小时更正左上角位置,添加为答案。这也是一个 patch for jqueryui resizable

最佳答案

此 jQuery 函数将更改元素的大小并进行必要的更正以保留左上角位置

<强> JSFiddle

/**
* Resizes rotated set of elements and preserves top-left corner position
* @param {Number} new_width
* @param {Number} new_height
* @param {Number} angle in degrees
* @returns {object} the current jQuery set
*/
$.fn.rotSize = function(new_width, new_height, angle){

//Convert angle from degrees to radians
var angle = angle * Math.PI / 180

$(this).each(function(i, elem){
var $elem = $(elem);
//initial CSS position.
var pos = {left: parseInt($elem.css('left')), top: parseInt($elem.css('top'))};
var init_w = $elem.width();
var init_h = $elem.height();
//Get position after rotation with original size
var x = -init_w/2;
var y = init_h/2;
var new_x = y * Math.sin(angle) + x * Math.cos(angle);
var new_y = y * Math.cos(angle) - x * Math.sin(angle);
var diff1 = {left: new_x - x, top: new_y - y};

//Get position after rotation with new size
var x = -new_width/2;
var y = new_height/2;
var new_x = y * Math.sin(angle) + x * Math.cos(angle);
var new_y = y * Math.cos(angle) - x * Math.sin(angle);
var diff2 = {left: new_x - x, top: new_y - y};

//Get the difference between the two positions
var offset = {left: diff2.left - diff1.left, top: diff2.top - diff1.top};
//Calculate the correction
var new_pos = {left: pos.left - offset.left, top: pos.top + offset.top};

//Apply
$elem.css(new_pos);
$elem.css({width: new_width, height: new_height});
});
}

另一个有用的功能:

/**
* Calculate the size correction for resized rotated element
* @param {Number} init_w
* @param {Number} init_h
* @param {Number} delta_w
* @param {Number} delta_h
* @param {Number} angle in degrees
* @returns {object} correction css object {left, top}
*/
$.getCorrection = function(init_w, init_h, delta_w, delta_h, angle){
//Convert angle from degrees to radians
var angle = angle * Math.PI / 180

//Get position after rotation with original size
var x = -init_w/2;
var y = init_h/2;
var new_x = y * Math.sin(angle) + x * Math.cos(angle);
var new_y = y * Math.cos(angle) - x * Math.sin(angle);
var diff1 = {left: new_x - x, top: new_y - y};

var new_width = init_w + delta_w;
var new_height = init_h + delta_h;

//Get position after rotation with new size
var x = -new_width/2;
var y = new_height/2;
var new_x = y * Math.sin(angle) + x * Math.cos(angle);
var new_y = y * Math.cos(angle) - x * Math.sin(angle);
var diff2 = {left: new_x - x, top: new_y - y};

//Get the difference between the two positions
var offset = {left: diff2.left - diff1.left, top: diff2.top - diff1.top};
return offset;
}

关于jquery - 更改宽度/高度会移动旋转的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25985630/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com