如何缩放jonitjs图形？

Question

我注意到jointjs确实支持放大/缩小，因为http://www.jointjs.com/ 但找不到任何例子。

请帮我放大/缩小由jointjs创建的结果图<div>？

由于 周防

Answer 1

联合文件有一个方法叫做规模（）。

我有缩放（变焦）我的图表此实现：

var graphScale = 1; 

var paperScale = function(sx, sy) { 
    paper.scale(sx, sy); 
}; 

var zoomOut = function() { 
    graphScale -= 0.1; 
    paperScale(graphScale, graphScale); 
}; 

var zoomIn = function() { 
    graphScale += 0.1; 
    paperScale(graphScale, graphScale); 
}; 

var resetZoom = function() { 
    graphScale = 1; 
    paperScale(graphScale, graphScale); 
}; 

也许这就是你需要什么？

Answer 2

paper.$el.on('mousewheel DOMMouseScroll', function onMouseWheel(e) { 
 
    //function onMouseWheel(e){ 
 
    e.preventDefault(); 
 
    e = e.originalEvent; 
 

 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)))/50; 
 
    var offsetX = (e.offsetX || e.clientX - $(this).offset().left); 
 

 
    var offsetY = (e.offsetY || e.clientY - $(this).offset().top); 
 
    var p = offsetToLocalPoint(offsetX, offsetY); 
 
    var newScale = V(paper.viewport).scale().sx + delta; 
 
    console.log(' delta' + delta + ' ' + 'offsetX' + offsetX + 'offsety--' + offsetY + 'p' + p.x + 'newScale' + newScale) 
 
    if (newScale > 0.4 && newScale < 2) { 
 
    paper.setOrigin(0, 0); 
 
    paper.scale(newScale, newScale, p.x, p.y); 
 
    } 
 
}); 
 

 
function offsetToLocalPoint(x, y) { 
 
    var svgPoint = paper.svg.createSVGPoint(); 
 
    svgPoint.x = x; 
 
    svgPoint.y = y; 
 

 
    var pointTransformed = svgPoint.matrixTransform(paper.viewport.getCTM().inverse()); 
 
    return pointTransformed; 
 
}