как добавить полосы прокрутки на (потенциально бесконечный) холст с помощью fabric.js

Я мог что-то здесь упустить (я ни в коем случае не эксперт в HTML или CSS и только начал использовать ткань).

Казалось бы, ткань — хороший инструмент для создания приложений для рисования на основе форм (объектов), но я не могу понять, как использовать ее таким образом, чтобы пользователь не мог потерять объекты, поместив их за пределы холста.

ни в одной из демонстраций нет никаких функций, чтобы предотвратить это, но похоже, что это было бы серьезным ограничением для фреймворка. кто-нибудь знает способ решения этого?

по сути, я хочу позволить пользователям произвольно добавлять объекты на холст, и для удобства использования эти объекты должны быть разнесены, и поэтому холст должен быть потенциально бесконечным. Очевидно, что область взаимодействия для холста должна иметь фиксированный размер.

Любая помощь в сортировке будет очень признательна


javascript canvas html css fabricjs
person DazBaldwin    schedule 30.03.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Добавление к ответу Беникса - вы можете вызвать canvas.on("object:moving", function(e) {}), который срабатывает при перемещении объекта. Таким образом, оболочка будет иметь следующий css:

  #wrapper{
    position: absolute;
    overflow: auto;
    max-height: 600px;
    max-width: 800px;
   }

с индексным файлом:

<div id="wrapper">
  <canvas id="c2"></canvas>
</div>

Чтобы расширить холст, когда объект перетаскивается к краю обертки, вы можете сделать следующее (сделано в сценарии кофе):

 canvas.on "object:moving", (e) -> 
  currentCanvasHeight = canvas.height
  currentCanvasWidth = canvas.width

  # e.target returns the selected canvas object
  # Once the objects offset left value + the objects width is greater than the canvas
  # width, expand the canvas width
  if (e.target.left + e.target.currentWidth) > currentCanvasWidth
    canvas.setWidth currentCanvasWidth + 50
    $("#wrapper").scrollLeft e.target.left # scroll alongside the canvas expansion
    $('#wrapper').on 'scroll', canvas.calcOffset.bind(canvas) # to fix the mouse 
    #position bug issue 

  # do the same for the top
  if (e.target.top + e.target.currentHeight) > currentCanvasHeight
    canvas.setHeight currentCanvasHeight + 50
    $("#wrapper").scrollTop e.target.top 
    $('#wrapper').on 'scroll', canvas.calcOffset.bind(canvas)
person Hossein Mirzapour    schedule 01.04.2014
comment
Но все браузеры (не Fabricjs) имеют ограничение на размер холста, поэтому я думаю, что вызов canvas.setWidth/setHeight в конечном итоге не удастся: github.com/kangax/fabric.js/issues/3821 - person Smartkid; 04.06.2017

arrow_upward
3
arrow_downward

у нас была такая же проблема, и мы решили ее, создав окно просмотра. Мы создали div вокруг холста div. <div id="viewport"> <div id="canvas"></div> </div>

CSS:

#viewport {
  height: 500px;
  left: 0;
  position: absolute;
  top: 0;
  width: 500px; 
  overflow: auto;
}

JS для создания холста:

var canvas = new fabric.Canvas('canvas');
 canvas.setWidth(1000);
 canvas.setHeight(1000);
 canvas.renderAll();

Теперь вы должны иметь возможность прокручивать холст. Однако вы поймете, что ваша позиция мыши больше не является правильной. Вы можете исправить это, используя метод canvas.calcOffset() и привязать его, например, к событию прокрутки окна просмотра. Надеюсь это поможет.

person py66WJAm    schedule 01.04.2014
comment
Спасибо за совет, на самом деле я больше смотрю на возможность ограничения перетаскивания элементов влево или вверх из (0, 0), поэтому положение мыши не должно быть проблемой. - person DazBaldwin; 01.04.2014