1

我正在使用一个 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 包装器中有很多画布元素。

所以我试图找到一个可以让我轻松缩放所有这些画布元素的库。

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

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

谢谢！

4

3 回答 3

2

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

http://jsfiddle.net/Q3TMA/

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

我没有创建小提琴..只是通过一些随机搜索找到的。希望有帮助

于 2013-02-20T02:31:23.767 回答
1

所以，这是我的解决方案

    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();        
    }
于 2014-07-03T20:45:35.070 回答
0

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

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

于 2014-07-03T11:50:13.910 回答