0

我试图在使用 jquery ui resizeable 时考虑缩放元素的影响。

这里有一些关于调整大小/拖动的 css3 转换问题的帖子......我发现没有一个可以提供成功的解决方案。

我暂时搁置轮换问题。只是希望它与规模一起工作。

我设法修改了可拖动的，但在调整大小时遇到​​了问题。例子：

HTML

 <div id= 'div1'> 
resize the div and note that the mouse cursor's
distance from the resize handle increases over time
<div>

  CSS
 #div1{
  margin:100px;
 width:100px;
 height:100px;
 border:1px solid black;
 font-size:12pt;
 overflow:hidden;
 -webkit-transform:scale(2);
 }​​

  JS
 $('#div1').resizable();

http://jsfiddle.net/asaf/JBE2r/1/

4

2 回答 2

0

实现此目的的一种方法是将 _mouseDarg 事件中的 dx 和 dy 变量除以变换比例属性。（在我的情况下，x 和 y 变换始终相同）我在 mousestart 事件中设置了“scaleFactor”参数。

    _mouseDrag: function(event) {
   console.log(this.size.height);
 var yDiff = event.pageY / this.originalMousePosition.top;
 //console.log(yDiff);

    //Increase performance, avoid regex
    var el = this.helper, o = this.options, props = {},
        self = this, smp = this.originalMousePosition, a = this.axis;

    var dx = (event.pageX-smp.left)||0, dy = (event.pageY-smp.top)||0; 
    var trigger = this._change[a];
    if (!trigger) return false;

    //NOTE adjusting dx, dy below by the transform scale factor:

    dy = dy / self.scaleFactor;
    dx = dx / self.scaleFactor;
于 2012-10-30T05:59:44.707 回答
0

我为这个问题写了一个解决方案，并在此处发布了详细信息：

http://gungfoo.wordpress.com/2013/02/15/jquery-ui-resizabledraggable-with-transform-scale-set/

jquery-ui的源码不用改。您所需要的只是一个可调整大小元素事件的回调，该resize元素会根据 CodeToads 答案中的比例因子进行调整。

function resizeFix(event, ui) {
    var changeWidth = ui.size.width - ui.originalSize.width; // find change in width
    var newWidth = ui.originalSize.width + changeWidth / zoomScale; // adjust new width by our zoomScale

    var changeHeight = ui.size.height - ui.originalSize.height; // find change in height
    var newHeight = ui.originalSize.height + changeHeight / zoomScale; // adjust new height by our zoomScale

    ui.size.width = newWidth;
    ui.size.height = newHeight;
}

$(this).resizable({
    minWidth: -(contentElem.width()) * 10,  // these need to be large and negative
    minHeight: -(contentElem.height()) * 10, // so we can shrink our resizable while scaled
    resize: resizeFix
});
于 2013-02-15T23:43:52.273 回答