我正在构建一个简单的4窗格对象编辑器,并且画布大小调整有点问题。我了解到我不应该在CSS内部调整画布大小,而应该定义明确的像素宽度和高度。我一直试图设置所有内容,以便在浏览器调整大小时动态调整大小,所以我基本上有一个5x5表,行1,3和5作为高度为5px,列1,3和5有一个宽度为5px。保留的四个单元格大小相同。
我在每个找到的表格单元格中放置一个div,并使用CSS为div提供背景和边框,以及0px的填充。我没有指定宽度或高度(但我也尝试过100%)。
我在每个div中放置一个画布,并且在所有布局完成之前不指定尺寸。然后,我读取其中一个表格单元格的宽度和高度,并根据它设置每个画布的大小。它工作得很好,除了我在每个画布的底部和它的包含div的边框之间有一个奇怪的3px间隙。对于表格,我指定了填充:0px; border-spacing:0px;和边界崩溃:崩溃;对于td单元格,指定了填充:0px;
差距是问题#1。
第二个问题是因为每个画布都定义了它的宽度和高度,所以屏幕上的所有其他组件会随着窗口大小的变化自动调整大小,但画布元素保持固定。我可以以某种方式检测窗口调整大小事件并重新生成画布元素吗?理想情况下,由于调整大小时它们是可见的有点慢,我想在调整大小开始时隐藏或删除元素并重建并在调整大小完成时显示它们。 ???
答案 0 :(得分:1)
尝试resizejQuery:
$(window).resize(function(){
// regenerate canvas
});
答案 1 :(得分:1)
$(window).resize(function() {
// handle accordingly
});