改变宽度/高度移动旋转的元素

Changing width/height moves rotated element(改变宽度/高度移动旋转的元素)
本文介绍了改变宽度/高度移动旋转的元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

限时送ChatGPT账号..

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

When changing the width/height of a rotated elements, the element moves!

这是一个例子
JSFiddle

Here's an example
JSFiddle

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

When I change the width for example, the object loses its original position, this is effecting jQueryUI Resizable and making it unusable.

CSS:

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

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

    transform: rotate(-90deg);
}

JSFiddle
是否有一个库或函数可以通过反转此效果来纠正此问题.

JSFiddle
Is there a library or a function that corrects this issue by reversing this effect.

我制作了一个 jQuery 函数,它在调整旋转元素大小时纠正左上角的位置,作为答案添加.这也是 jqueryui 可调整大小的补丁

I made a jQuery function that corrects the top-left position upon resizing a rotated element, added as answer. Also this is a patch for jqueryui resizable

推荐答案

这个jQuery函数会改变元素的大小并进行必要的修正以保留左上角的位置

This jQuery function will change the size of the element and make necessary correction to preserve the top-left corner position

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;
}

这篇关于改变宽度/高度移动旋转的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

Show a progress bar for downloading files using XHR2/AJAX(显示使用 XHR2/AJAX 下载文件的进度条)
How can I open a JSON file in JavaScript without jQuery?(如何在没有 jQuery 的情况下在 JavaScript 中打开 JSON 文件?)
How do I get the HTTP status code with jQuery?(如何使用 jQuery 获取 HTTP 状态码?)
$.ajax call working fine in IE8 and Doesn#39;t work in firefox and chrome browsers($.ajax 调用在 IE8 中运行良好,但在 Firefox 和 chrome 浏览器中不起作用)
How do I know if jQuery has an Ajax request pending?(我如何知道 jQuery 是否有待处理的 Ajax 请求?)
Find out how long an Ajax request took to complete(找出完成一个 Ajax 请求需要多长时间)