Question

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

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

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

提前致谢！

Answer 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。 Couse，如果他这样做，他可能不会对画布感兴趣，所以你可以让其他东西更快更顺畅......

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

修改

为什么会出现这个问题？

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

现在，因为您使用的webgl占用了大量的javascript计算能力，所以resize事件的短期不再是短暂的。从那以后，元素不会被重新绘制，通常你想要的东西和鼠标将从元素中显示更多，这可能会触发一些导致停止调用resize的事件。

如果你停止webgl，通话时间会再次缩短，所以它可以防止这个问题，但我对此并不十分肯定......

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

1 个答案: