fabricjs - Zoom платно в viewport (възможно?) - javascript, html5, zoom, fabricjs

в момента се опитвам да изпълня a варио-функционалност на визуален редактор, базиран на fabricjs-рамка.

Огледах се наоколо, но станах все по-объркан, тъй като осъзнах, че развитието на тази функция / функция е дълъг и скалист път за общността и разработчиците.

Поради това изглежда, че много решения вече са остарели.

Но в момента открих плат Прозорецът разработена от RTSGroup на Гитоб.

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

За по-добро разбиране на това, което търся, направих просто обяснение-изображение:

Има ли начин да направите това с приставката fabricjs-viewport или с друго, което не е остаряло решение?

Видях вече някои страници, които използват подобна визуализация като функция за увеличение с поддръжка на превъртане. Но там не бях сигурен дали принадлежат към fabricjs-рамка.

Благодаря вече за всеки намек и грешка, които могат да ме отведат в правилната посока.

Поздравления, Саша

Отговори:

11 за отговор № 1

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

за да zoomIn и zoomOut самото платно, ти трябва промените нейното височина и широчина параметри, в zoomIn / zoomOut функции, така че когато отива за промяна на обектите, той също ще променете размера на платното:

за zoomIn:

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

за zoomOut:

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

моля вижте пример на жива цигулка, който направих, който прибавя и изважда предмети и платно.

пример за жива цигулка: http://jsfiddle.net/tornado1979/39up3jcm/

надеждата помага, късмет

---

12 за отговор № 2

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

Пример, който направих, е Тук

---