jQuery div内的可滚动画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16128604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrollable canvas inside div
提问by benjamin54
I have a html5 canvas. I need to show the fixed portion of it in the div(Div1). When I swipe inside Div1, I need to scroll the canvas. So as I scroll, I'll see corresponding part of the canvas.
我有一个 html5 画布。我需要在 div( Div1) 中显示它的固定部分。当我向内滑动时Div1，我需要滚动画布。所以当我滚动时，我会看到画布的相应部分。
I tried something like this:
我试过这样的事情：
<div id="Div1" style=" float: left; width: 50px; overflow:hidden; ">
<canvas id="myCanvas1" width="200px" style="border: 1px solid #ff0000; position: absolute;">
</canvas>
</div>
采纳答案by pancake
Here is a demo of using an oversize canvas, and scrolling with mouse movements by adjusting the CSS margin: https://jsfiddle.net/ax7n8944/
这是使用超大画布并通过调整 CSS 边距随鼠标移动滚动的演示：https: //jsfiddle.net/ax7n8944/
HTML:
HTML：
<div id="canvasdiv" style="width: 500px; height: 250px; overflow: hidden">
<canvas id="canvas" width="10000px" height="250px"></canvas>
</div>
JS:
JS：
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var dragging = false;
var lastX;
var marginLeft = 0;
for (var i = 0; i < 1000; i++) {
context.beginPath();
context.arc(Math.random() * 10000, Math.random() * 250, 20.0, 0, 2 * Math.PI, false);
context.stroke();
}
canvas.addEventListener('mousedown', function(e) {
var evt = e || event;
dragging = true;
lastX = evt.clientX;
e.preventDefault();
}, false);
window.addEventListener('mousemove', function(e) {
var evt = e || event;
if (dragging) {
var delta = evt.clientX - lastX;
lastX = evt.clientX;
marginLeft += delta;
canvas.style.marginLeft = marginLeft + "px";
}
e.preventDefault();
}, false);
window.addEventListener('mouseup', function() {
dragging = false;
}, false);
回答by Milche Patern
it won't work (scrolling canvas from inside div in some 'design' conditions), first your overflow is hidden. Try scrolling the contentinside the canvas instead.
它不起作用（在某些“设计”条件下从 div 内部滚动画布），首先隐藏溢出。尝试滚动画布内的内容。
OR, try this : http://jsfiddle.net/9g3GG/2/
或者，试试这个：http: //jsfiddle.net/9g3GG/2/
<div id="Div1" style=" float: left; width: 150px; overflow:scroll; ">
<canvas id="myCanvas1" width="200" style="border:1px solid #ff0000;">asdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdf</canvas>
</div>回答by jdnichollsc
It is better to scroll inside the canvas, see this Phaser plugin to do that https://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/
最好在画布内滚动，请参阅此 Phaser 插件来执行此操作https://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/
回答by LogPi
- "scroll" in canvas , you need to handle 2 case :
- bind event "mousedown" in this canvas and bind event "mouseup" in "mousedown" binding function.
- bind event " DOMmouseup" in this canvas . User can wheel button in mouse to scroll.
- To show canvas like a scroll
- Redraw canvas
- Use clip() in canvas. Re-set the rectangle of this clip to show your canvas
- Please remove "position:absolute" in your css of canvas . And set height for your "div"
- 在画布中“滚动”，您需要处理 2 种情况：
- 在此画布中绑定事件“mousedown”并在“mousedown”绑定函数中绑定事件“mouseup”。
- 在此画布中绑定事件“DOMmouseup”。用户可以使用鼠标滚轮按钮进行滚动。
- 像滚动一样显示画布
- 重绘画布
- 在画布中使用 clip()。重新设置此剪辑的矩形以显示您的画布
- 请在您的 canvas css 中删除“position:absolute”。并为您的“div”设置高度
Hope it'll help you
希望它会帮助你
回答by PeterFochs
The lines of the div are drawn. set line size to 0:
绘制了 div 的线条。将行大小设置为 0：
DIVofCanvas {
line-height: 0px;
}
