fabricjs - 在视口中缩放画布（可能吗？） [英] fabricjs - Zoom canvas in viewport (possible?)

问题描述

目前我尝试根据

希望有所帮助，
祝你好运

at the moment I try to implement a zoom-functionallity to a visual-editor based on the fabricjs-framework.

I've looked around but got more and more confused as I recognized that the development of this feature/function was a long and rocky road for the community and developers.

Because of that, many solutions seems to be already outdated.

But at the moment I found fabric-viewport developed by the RTSGroup on Github.

The implementation was easy, but it only can zoom/control the objects in (inner of) the canvas. Not the canvas too. But I would like to zoom the canvas, too. (inner of the viewport)

For better understanding what I'm looking for I made a simple explanation-image:

Is there a way to do this with the fabricjs-viewport plugin or another not outdated solution?

I saw already some pages who using such viewport like zoom feature with scroll support, too. But there I wasn't sure if they belong to the fabricjs-framework.

Thanks already for every hint and tipp which could lead me to the right direction.

Greetings, Sascha

解决方案

you can create zoomIn & zoomOut functionality with the feabricjs either on the objects that they are on the canvas and ,also, on the canvas itself

in order to zoomIn and zoomOut the canvas itself , you should change its height and width parametes, into the zoomIn/zoomOut functions, so when it goes to change the objects, it will also change the canvas size:

for zoomIn:

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

for zoomOut:

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

please take a look on the live fiddle example that i made , which it zoomsIn and Out objects and canvas, the .

live fiddle example: http://jsfiddle.net/tornado1979/39up3jcm/

hope helps, good luck

这篇关于fabricjs - 在视口中缩放画布（可能吗？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！