javascript - FabricJS - 使用与窗口相同的滚动来滚动 Canvas

Question

我正在创建一个应用程序，它使用 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 ，而不是窗口。

Answer 1

不要把事情搞得太复杂。

无论如何，您都不应该为 Canvas 添加基于百分比的尺寸。从上面的照片来看，您的 Canvas 似乎具有固定尺寸(基于通过fabricjs打印在其上的任何内容)。

如果您的 Canvas (或任何 block 元素)大于屏幕尺寸，浏览器将添加滚动条。这就是它的工作。

摆脱所有样式，让浏览器完成它的工作。

<div id="canvasContainer">
    <canvas id="fbcanvas"></canvas>
</div>

-

#canvasContainer { /* nothing */ }
#fbcanvas { /* nothing */ }

查看实际效果:http://jsfiddle.net/egb1je6m/1/