Fabricjs - Масштабирование холста в окне просмотра (возможно?)

в данный момент я пытаюсь реализовать масштабирование в визуальном редакторе на основе fabricjs-framework.

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

Из-за этого многие решения кажутся уже устаревшими.

Но на данный момент я нашел fabric-viewport, разработанный RTSGroup на Github.

Реализация была простой, но она может масштабировать/управлять только объектами (внутри) холста. Не холст тоже. Но я также хотел бы увеличить холст. (внутри окна просмотра)

Для лучшего понимания того, что я ищу, я сделал простое объяснение-изображение:

Пример

Есть ли способ сделать это с помощью плагина fabricjs-viewport или другого неустаревшего решения?

Я уже видел несколько страниц, которые используют такие области просмотра, как функция масштабирования с поддержкой прокрутки. Но там я не был уверен, относятся ли они к fabricjs-framework.

Спасибо уже за каждую подсказку и подсказку, которые могут привести меня в правильном направлении.

Привет, Саша


javascript html zooming fabricjs
person Sascha    schedule 09.06.2015    source источник

Ответы (2)


arrow_upward
11
arrow_downward

вы можете создавать функции zoomIn и zoomOut с помощью feabricjs либо на объектах, которые они находятся на холсте, а также на самом холсте

чтобы увеличить и уменьшить сам холст, вы должны изменить его параметры height и width на параметры zoomIn /zoomOut, поэтому при изменении объектов он также изменит размер холста:

для увеличения:

   canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
   canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

для увеличения:

canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));

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

живой пример скрипки: http://jsfiddle.net/tornado1979/39up3jcm/

надеюсь поможет, удачи

person Theo Itzaris    schedule 10.06.2015

arrow_upward
12
arrow_downward

Решение @Theo отличное, но есть одно но: вместо использования object.scaleX и object.scaleY для масштабирования каждого объекта на холсте вы можете просто один раз вызвать canvas.setZoom(ZOOM_INDEX). (только с версии Fabricjs 1.4.13)

Я сделал пример здесь

person Dudi    schedule 29.12.2015
comment
Красиво, спасибо за раздачу! Кажется, я должен обновить наш код. - person Sascha; 09.07.2016
comment
как изменить размер холста при увеличении относительно коэффициента масштабирования? - person ksh; 24.03.2018
comment
Не ответ. Речь шла о масштабировании холста с элементами внутри, а не просто элементами. - person only_one; 15.06.2021