我正在开发一个涉及使用* jsPlumb(*社区版)创建流程图的项目。社区版没有内置的平移/缩放功能。他的项目并不需要付费版本(工具包版)提供的所有功能。因此,在付费版本上投入大量资金不是一种选择。有没有经过验证的方法可以使用社区版完成平移/缩放?
答案 0 :(得分:3)
以下是使用example of pan/zoom in jsPlumb Community Edition
实施的jquery.panzoom plugin还使用了jQueryUI / draggable和Dagre。
你需要用div来包装你的图表,它将被平移/缩放(在这个例子中它有' panzoom'类)
$panzoom = $container.find('.panzoom').panzoom({
minScale: minScale,
maxScale: maxScale,
increment: incScale,
cursor: "",
});
jQueryUI用于拖动节点而不是内置于draggable,以补偿panzoom规模和双重偏移问题。拖动节点时禁用平移并考虑比例因子:
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");
}
});
答案 1 :(得分:1)
也许你应该看看http://jaukia.github.io/zoomooz/
这个库提供了HTML元素的缩放选项,因此应该可以解决这个问题。