放大图像时添加滚动条

Question

当图像放大时，我正在尝试添加滚动条。我现在面临的问题是，我的图像不是完整的画布，我可以移动图像，即使它不放大或缩放。

我希望图像完好无损到画布，当它放大时，滚动条应该会出现。我已经将溢出添加到CSS中的auto。

#container
{
    position: relative;
      overflow:auto;
}

http://jsfiddle.net/ndYdk/21/

有时图像一开始并不显示，所以只需单击放大/缩小，它就会出现。

任何帮助都是非常感谢的

Answer 1

您熟悉jsfiddle中的代码吗？它显式地具有“处理屏幕拖动的事件侦听器”。如果希望图像不移动，请在放大时禁用该选项。

然而，滚动条的事情有点棘手。正确的解决方案应该是在<div id="container">中设置overflow: scroll和一个设置的高度/宽度，但是，如果画布本身变大，而不是画布中的内容改变大小，就会添加滚动条，因为他们知道这一点。

当您检测到图像大于画布时，可以尝试手动添加滚动条。这里提供了一种方法：Canvas Scrollbar not working

然而，更简单的方法可能是像我上面说的那样，在父div上设置大小约束和溢出，然后更改画布的实际大小。

Answer 2

canvas标签看起来不支持overflow CSS规则，因为这不会强制显示浏览器的滚动：

<canvas id="myCanvas" style="overflow:scroll;" "></canvas>

谷歌中有一些有趣的主题可以帮助你完成任务：https://www.google.com/search?q=show+scroll+inside+canvas+tag