Javascript 在WebGL/X3DOM上调整jQuery UI对话框的大小
我正在开发一个web应用程序: 单击“帮助”按钮将弹出一个可调整大小的帮助窗口。但是,如果调整大小时光标移动到对话框外部,则对话框将停止调整大小!有人知道如何防止这种情况发生吗?不过,可以通过非常缓慢地移动光标来调整窗口的大小Javascript 在WebGL/X3DOM上调整jQuery UI对话框的大小,javascript,html,jquery-ui,webgl,x3dom,Javascript,Html,Jquery Ui,Webgl,X3dom,我正在开发一个web应用程序: 单击“帮助”按钮将弹出一个可调整大小的帮助窗口。但是,如果调整大小时光标移动到对话框外部,则对话框将停止调整大小!有人知道如何防止这种情况发生吗?不过,可以通过非常缓慢地移动光标来调整窗口的大小 提前谢谢 嘿,我给你一个简短的解决方案: 步骤1:创建用户使用UI时显示的图层。该层将覆盖画布 var coverLayer = $('<div>').appendTo("body").css({ "width" : "100%", "height" : "
提前谢谢 嘿,我给你一个简短的解决方案: 步骤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();
步骤3(可选):在用户使用UI时暂停webgl。因为如果他对画布感兴趣,他可能对画布不感兴趣,所以你可以让其他事情发生得更快更顺利
PS:您在拖动对话框时遇到了同样的问题,所以我也通过添加dragstart
/dragstop
解决了这个问题。您还可以在那里添加更多事件
编辑:
为什么会出现这样的问题
我想这是因为resize
事件。它在一些短时间内发生,并负责元素重画(设置新的宽度和高度)。我还认为它可以检测是否触发了另一个事件,然后不再触发resize
现在,因为您使用的webgl消耗了大量javascript计算能力,所以resize
事件的短周期不再短了。从那个以后,元素并没有像你们所希望的那个样频繁地被重绘,鼠标将出现在元素后面,这可能会触发一些事件,导致停止调用resize
如果您停止webgl,调用周期将再次缩短,因此它可以防止该问题,但我不是很确定 亲爱的,这有用!我仍然很好奇为什么这个问题首先会发生。
$(".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
});