如何一键缩放pof canvas的所有元素? [英] How to zoom all elements pof canvas with one click?

问题描述

我在一个项目中使用fabric.js. 我正在使用缩放功能.我想知道是否有一种简单的方法可以在单击时放大所有画布(包括所有元素).

I m using fabric.js in one of my projects. I m using zooming functionalities . I would like to know if there a simple way to zoom all the canvas (with all the elements ) in on click.

推荐答案

尝试一下此jsfiddle，演示按钮的单击放大效果: http://jsfiddle.net/cmontgomery/H7Utw/1/.本质上，您可以将所有对象放在画布上，并按相同的比例缩放/移动它们，从而获得缩放的视觉效果.

Try out this jsfiddle demonstrating zoom onclick of a button: http://jsfiddle.net/cmontgomery/H7Utw/1/. In essence you get all objects on the canvas and scale/move them by the same factor, giving the visual appearance of zoom.

var objects = canvas.getObjects();
for (var i in objects) {
    var scaleX = objects[i].scaleX;
    var scaleY = objects[i].scaleY;
    var left = objects[i].left;
    var top = objects[i].top;

    var tempScaleX = scaleX * SCALE_FACTOR;
    var tempScaleY = scaleY * SCALE_FACTOR;
    var tempLeft = left * SCALE_FACTOR;
    var tempTop = top * SCALE_FACTOR;

    objects[i].scaleX = tempScaleX;
    objects[i].scaleY = tempScaleY;
    objects[i].left = tempLeft;
    objects[i].top = tempTop;

    objects[i].setCoords();
}

canvas.renderAll();

这篇关于如何一键缩放pof canvas的所有元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！