Прокручиваемый холст внутри div

У меня есть html5 canvas. Мне нужно показать фиксированную часть его в div (Div1). Когда я сажусь внутри Div1, мне нужно прокрутить холст. Так как я прокручиваю, я увижу соответствующую часть холста.

Я пробовал что-то вроде этого:

<div id="Div1" style=" float: left; width: 50px; overflow:hidden; ">
   <canvas id="myCanvas1" width="200px" style="border: 1px solid #ff0000; position: absolute;">
   </canvas>
</div>

jsFiddled here

Ответ 1

"прокрутить" в холсте, вам нужно обработать 2 случая:
- связать событие "mousedown" в этом холсте и связать событие "mouseup" в функции привязки "mousedown".
- связать событие "DOMmouseup" в этом холсте. Пользователь может нажимать кнопку мыши для прокрутки.
Чтобы показать холст, как свиток
- Перерисовать холст
- Используйте clip() в холсте. Переустановите прямоугольник этого клипа, чтобы показать ваш холст.
Удалите "position: absolute" в вашем css холста. И установите высоту для вашего "div"

Надеюсь, это поможет вам.

Ответ 2

он не будет работать (прокручивание холста изнутри div в некоторых "конструктивных" условиях), сначала ваш переполнение скрыто. Попробуйте прокрутить контент внутри холста.

ИЛИ, попробуйте следующее: 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>

Ответ 3

Лучше прокрутите в холст, см. мой плагин Phaser: http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/

Ответ 4

Ниже приведена демонстрация использования негабаритного холста и прокрутка движений мыши путем изменения поля CSS: https://jsfiddle.net/ax7n8944/

HTML:

<div id="canvasdiv" style="width: 500px; height: 250px; overflow: hidden">
    <canvas id="canvas" width="10000px" height="250px"></canvas>
</div>

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

Ответ 5

Во-первых, вы не должны использовать overflow:hidden, где вы делали

Вам нужно использовать overflow-x: scroll;

В принципе, вы скрываете вертикальную полосу прокрутки и делаете ширину div больше, чем страница. И не используйте canvas. Просто используйте вложенный div.

Кроме того, overflow-x:scroll действительно не требуется, поскольку он будет отображаться по умолчанию.

Сделайте это:

HTML

<html>
 <body>
    <div id="container">
       <div id="inner">
           aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
       </div>
    </div>
 </body>
</html>

CSS

#container {
    width: 100%;
    height: 100%;
    background: #fff;
}
#inner {
    width: 2000px;
    height: 300px;
    margin: 0;
    padding: 10px;
    overflow-x: scroll;
    overflow-y: hidden;
    background: #ccc;
}

Здесь он работает в jsfiddle: http://jsfiddle.net/mDr9r/

Ответ 6

Строки div делятся. установить размер линии до 0:

DIVofCanvas {
    line-height: 0px;
}