我正在创建一个应用程序,它使用 Html2canvas 库来截取正文的屏幕截图。截取屏幕截图后,我使用 FabricJS 框架将其显示在 Canvas 组件中。该 Canvas 将具有与主体相同的高度和宽度。我的问题是我需要滚动 Canvas ,就像在页面中一样。我一直在尝试使用类似这样的代码 http://jsfiddle.net/Kienz/f3u5r/但它实际上向包含我的 Canvas 的 div 添加了一个滚动条,但我需要使用与窗口相同的 div,否则我将有两个滚动条。
这是我的 Canvas 的代码
<div style="height: 100%; width: 100%" id="canvasContainer">
<canvas id="fbcanvas" style="height: 100%; width: 100%"; position:relative;></canvas>
</div>
#canvasContainer {
display: none;
z-index: 1000000;
overflow: auto;
}
谢谢
编辑:
这就是现在的样子,
因此,当我使用 Canvas 滚动滚动时,我会滚动 Canvas 。当我滚动窗口的 Canvas 时,我会滚动页面。我需要使用窗口中的滚动,但要滚动 Canvas ,而不是窗口。
最佳答案
不要把事情搞得太复杂。
无论如何,您都不应该为 Canvas 添加基于百分比的尺寸。从上面的照片来看,您的 Canvas 似乎具有固定尺寸(基于通过fabricjs打印在其上的任何内容)。
如果您的 Canvas (或任何 block 元素)大于屏幕尺寸,浏览器将添加滚动条。这就是它的工作。
摆脱所有样式,让浏览器完成它的工作。
<div id="canvasContainer">
<canvas id="fbcanvas"></canvas>
</div>
-
#canvasContainer { /* nothing */ }
#fbcanvas { /* nothing */ }
关于javascript - FabricJS - 使用与窗口相同的滚动来滚动 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31618917/