[英]Resizing jQuery UI Dialog on Top of WebGL/X3DOM
我正在开发一个Web应用程序:
http://filebox.vt.edu/users/sharni/Radio/spectrum.html
单击帮助按钮会弹出一个可调整大小的帮助窗口。 但是,如果在调整大小时光标移到对话框之外,则对话框将停止调整大小! 有谁知道如何防止这种情况的发生? 仍然可以通过非常缓慢地移动光标来调整窗口大小。
提前致谢!
嘿,我为您提供了简短的解决方案:
步骤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
解决此dragstop
。 您也可以在此处添加更多事件。
编辑:
为什么会发生这个问题?
我想这是因为resize
事件。 它在短时间内发生,并导致元素重绘(设置新的宽度和高度)。 我也认为它可以检测是否触发了另一个事件,然后不再触发resize
。
现在,由于您使用的webgl占用了很多JavaScript计算能力,因此resize
事件的时间不再短了。 从那时起,就不再像您想要的那样频繁地重绘元素,并且鼠标还会从元素中消失,这可能会触发一些导致停止调用resize
事件。
如果您停止webgl,则通话时间将再次缩短,因此可以避免该问题,但是我对此不太确定...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.