在jsPlumb中实现平移和缩放答案

【问题标题】：Implementing pan and zoom in jsPlumb在jsPlumb中实现平移和缩放
【发布时间】：2015-12-14 12:28:08
【问题描述】：

我正在从事一个涉及使用 *jsPlumb(*Community edition) 创建流程图的项目。社区版没有内置平移/缩放功能。他的项目不需要付费版本（工具包版）提供的所有功能。因此，在付费版本上投入大量资金不是一种选择。是否有任何经过验证的方法可以使用社区版完成平移/缩放？

【问题讨论】：

标签： javascript jquery jsplumb flowchart

【解决方案1】：

这是一个用jquery.panzoom plugin 实现的example of pan/zoom in jsPlumb Community Edition

还使用了 jQueryUI/draggable 和 Dagre。

你需要用 div 包裹你的图表，它会被平移/缩放（在这个例子中它有 'panzoom' 类）

$panzoom = $container.find('.panzoom').panzoom({
  minScale: minScale,
  maxScale: maxScale,
  increment: incScale,
  cursor: "",
});

jQueryUI 用于拖动节点而不是内置可拖动，以补偿全景缩放和双偏移问题。拖动节点时禁用平移并考虑比例因子：

var currentScale = 1;
$container.find(".diagram .item").draggable({
  start: function(e){
    var pz = $container.find(".panzoom");
    currentScale = pz.panzoom("getMatrix")[0];
    $(this).css("cursor","move");
    pz.panzoom("disable");
  },
  drag:function(e,ui){
    ui.position.left = ui.position.left/currentScale;
    ui.position.top = ui.position.top/currentScale;
    if($(this).hasClass("jsplumb-connected"))
    {
      plumb.repaint($(this).attr('id'),ui.position);
    }
  },
  stop: function(e,ui){
    var nodeId = $(this).attr('id');
    if($(this).hasClass("jsplumb-connected"))
    {
      plumb.repaint(nodeId,ui.position);
    }
    $(this).css("cursor","");
    $container.find(".panzoom").panzoom("enable");
  }
});

【讨论】：

【解决方案2】：

也许你应该看看http://jaukia.github.io/zoomooz/

这个库提供了 HTML 元素的缩放选项，所以它应该可以解决问题。

【讨论】：