как да добавите ленти за превъртане към (потенциално безкрайно) платно с помощта на fabric.js

Може да пропускам нещо тук (в никакъв случай не съм експерт по HTML или CSS и току-що започнах да използвам тъкан).

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

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

по същество искам да позволя на потребителите произволно да добавят обекти към платното и за използваемост тези обекти ще трябва да бъдат раздалечени и така платното ще трябва да бъде потенциално безкрайно. Очевидно зоната на взаимодействие за платното ще трябва да бъде с фиксиран размер.

Всяка помощ, за да се сортира това, ще бъде много оценена


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

Отговори (2)


arrow_upward
3
arrow_downward

Добавяне към отговора на Benicks - можете да извикате 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 около canvas 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