在 WebGL/X3DOM 之上调整 jQuery UI 对话框的大小答案

【问题标题】：Resizing jQuery UI Dialog on Top of WebGL/X3DOM在 WebGL/X3DOM 之上调整 jQuery UI 对话框的大小
【发布时间】：2013-11-07 17:10:58
【问题描述】：

我正在开发一个网络应用程序：

http://filebox.vt.edu/users/sharni/Radio/spectrum.html

单击帮助按钮会弹出一个可调整大小的帮助窗口。但是，如果在调整大小时光标移动到对话框之外，对话框将停止调整大小！有谁知道如何防止这种情况发生？不过，可以通过非常缓慢地移动光标来调整窗口大小。

提前致谢！

【问题讨论】：

标签： javascript html jquery-ui webgl x3dom

【解决方案1】：

嘿，我有一个简短的解决方案：

第 1 步：创建将在用户使用 UI 时出现的图层。该层将覆盖画布。

var coverLayer = $('<div>').appendTo("body").css({ "width" : "100%", "height" : "100%", "z-index" : "2", "background-color" : "rgba(124, 124, 124, 0.5)", "position" : "absolute" }).hide();

第 2 步：仅当用户使用 UI 时才使图层可见。

$(".ui-dialog").on( "resizestart dragstart" , function( event, ui ) { 
    coverLayer.show();
    // here you can add some code that will pause webgl while user works with ui, so resizing and moving will be faster and smoother
});

$(".ui-dialog").on( "resizestop dragstop" , function( event, ui ) { 
    coverLayer.hide();
    // here you unpause webgl
});

第 3 步（可选）：在用户使用 UI 时暂停 webgl。如果他这样做了，他可能对画布不感兴趣，所以你可以让其他事情发生得更快更顺畅......

PS：你在拖动对话框时遇到了同样的问题，所以我也很简单地通过添加dragstart/dragstop 来解决这个问题。您还可以在那里添加更多事件。

编辑：

为什么会出现这个问题？

我猜是因为resize 事件。它会在短时间内发生，并负责元素重绘（设置新的宽度和高度）。我也认为它可以检测到是否触发了另一个事件，然后resize 不再触发。

现在，因为您使用的是消耗大量 javascript 计算能力的 webgl，所以 resize 事件的短周期不再短。从那时起，元素不会像您想要的那样经常重绘，并且鼠标将出现在元素之外，这可能会触发一些导致停止调用resize 的事件。

如果你停止 webgl，调用周期会再次变短，所以它可以防止这个问题，但我不太确定......

【讨论】：

甜，这行得通！我仍然很好奇为什么会出现这个问题。