FabricJS - 使用与窗口

Question

我正在创建一个应用程序，通过使用Html2canvas库获取正文的屏幕截图。截取屏幕截图后，我使用fabricJS框架在canvas组件中显示它。此画布将具有相同的身高和宽度。我的问题是我需要滚动浏览画布，就好像我在页面中一样。我一直尝试使用像http://jsfiddle.net/Kienz/f3u5r/这样的代码，但实际上它会添加一个滚动到包含我的画布的div，但我需要使用与窗口相同的div，否则我将有两个滚动条

这是我画布的代码

<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;
}

由于

编辑：

现在的样子，

所以当我用画布滚动滚动时，我滚动画布。当我使用窗口的画布滚动时，我滚动浏览页面。我需要使用窗口中的滚动但是滚动画布而不是窗口。

Answer 1

不要过度复杂化。

无论如何，您不应该为画布添加基于百分比的尺寸。从你上面的照片来看，你的画布似乎有一个固定的尺寸（基于通过fabricjs打印的任何东西）。

如果您的画布（或任何块元素）大于屏幕大小，浏览器将添加滚动条。这是它的工作。

摆脱所有风格，让浏览器做到这一点。

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

-

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

查看实际操作：http://jsfiddle.net/egb1je6m/1/