Question

我正在使用javascript库（jsPlumb）生成一个状态机，带有连接等。

我正在尝试为生成的图形添加放大和缩小功能。

生成的代码是这样的：

<div id="canvas">
    <canvas style="position: absolute; height: 4px; width: 4px; left: 907.816650390625px; top: 659.816650390625px; " class="_jsPlumb_endpoint  ui-draggable ui-droppable" height="4" width="4"></canvas>
     ...

在div包装器中有很多canvas元素。

所以我试图找到一个可以让我轻松扩展所有这些canvas元素的库。

Fabric.js听起来不错，但我没有找到任何方法来“加载”现有画布以将转换应用到画布本身，而只是将转换应用于画布内的元素。

有没有人知道可以做到的图书馆？或者，如果您曾经为jsplumb添加放大/缩小功能，我也会感到高兴！我特别喜欢使用Fabric.js的解决方案，因为这个库提供了许多有用的其他功能。

谢谢！

Answer 1

如果您正在寻找缩放整个画布，那么您可能会感兴趣...

http://jsfiddle.net/Q3TMA/

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

我没有创造小提琴......只是通过搜索随机的东西找到了。希望有所帮助

Answer 2

所以，这是我的解决方案

    function zoomin() {
        zoom += .1;
        zoomIt(1.1);
        $('#zoom_pct').text('%'+Math.round(zoom*100));
    }
    function zoomout() {
        zoom -= .1;
        zoomIt(.9); 
        $('#zoom_pct').text('%'+Math.round(zoom*100));
    }
    function zoomIt(factor) {
        canvas.setHeight(canvas.getHeight() * factor);
        canvas.setWidth(canvas.getWidth() * factor);
        // UPDATE: Scale Background images as well
        if (canvas.backgroundImage) {
            var bi = canvas.backgroundImage;
            bi.width = bi.width * factor; bi.height = bi.height * factor;
        }
// Do we need to scale overlayImage?
        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 * factor;
            var tempScaleY = scaleY * factor;
            var tempLeft = left * factor;
            var tempTop = top * factor;

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

            objects[i].setCoords();
        }

        canvas.renderAll();        
    }

Answer 3

我写了一个小型lib，它通过缩放和视口更改来扩展fabricjs：https://github.com/wojtek-krysiak/fabricjs-viewport

示例：http://wojtek-krysiak.github.io/fabricjs-viewport/

缩放画布jsplumb / fabric.js

3 个答案: