javascript - 如何缩放 jonitjs 图？

Question

我注意到，从http://www.jointjs.com/开始，jointjs 确实支持放大/缩小， 但找不到任何示例。

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

Answer 1

Joint Paper 有一个名为scale()的方法。

我有这个实现来缩放（缩放）我的图表：

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;
}