Блог

Как создать видимую область, окно для большего объекта (для создания прокручиваемого представления) с помощью canvas и, желательно, с помощью fabric.js

Если я правильно понимаю ваш вопрос, самым простым подходом было бы просто создать очень большой объект canvas (больше, чем ваше окно) и поместить его в родительский контейнер. Установите размеры родительского контейнера равными размеру желаемого окна, а затем объявите overflow: hidden; в контейнере.

После настройки вы, вероятно, можете использовать что-то вроде jQuery draggable для обработки событий мыши. Если это не сработает, ключевая идея заключается в том, что вам нужно изменить атрибут canvas’ position или настроить margins для имитации панорамирования вокруг холста в окне.

Этот подход, конечно, предназначен для конечных размеров холста. Если вы хотите предложить бесконечную рабочую область, вам, вероятно, было бы лучше изменить context.translate свойство вашего холста. Я полагаю, это не будет хорошо сочетаться с fabric.js , однако.