缩放画布jsplumb/fabric.js

我使用的是JavaScript库（jsPlumb），它产生我的状态机，与连接等缩放画布jsplumb/fabric.js

我想和退出功能添加放大到生成的图形。

生成的代码是类似的东西：

<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元素库。

Fabric.js听起来不错，但我没有发现任何方式“负荷”的应用转变到画布本身现有画布，但只是应用变换到画布中的元素。

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

谢谢！

来源

2012-10-04 Antoine

如果您正在寻找缩放整个画布，然后这个你可能感兴趣的......

http://jsfiddle.net/Q3TMA/

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

我还没有创建了小提琴..只是通过随机有些东西在搜索找到。希望帮助

来源

2013-02-20 02:31:23 Rohan210

我带你去一个解决方案看看这个，这似乎很有趣，谢谢！ – Antoine

嘿...如果这有帮助，您可以接受答案。谢谢 – Rohan210

这会使画布更大，但不会缩放画布上可能存在的任何对象。 –

我写了通过放大和视变化延伸fabricjs小lib目录下：https://github.com/wojtek-krysiak/fabricjs-viewport

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

来源

2014-07-03 11:50:13 wojtekk

看看你做了什么......画布上的对象缩放，但画布没有。我一直在试图混合这两种方法，但它仍然没有按照我期望的那样进行扩展。 'canvas.setHeight（canvas.getHeight（）* 1.1）; canvas.setWidth（canvas.getWidth（）* 1.1）; canvas.setZoom（canvas.viewport.zoom * 1.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-03 20:45:35

据我了解您的解决方案是提出otherr两者的compination。您能否详细说明一下，您是如何提出该代码的，以及其他两种解决方案的差异/变化是什么？谢谢！ – Athafoud

很简单。我不设法调整视口，而是设置画布高度和宽度，然后遍历页面上的每个对象并对其进行缩放。与其他两个人有什么不同，6个月后我不记得了。 –

缩放画布jsplumb/fabric.js

回答

相关问题