Question

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

请帮我完成放大/缩小由＆lt; div＆gt;中的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;
}

如何扩展jonitjs图？

2 个答案: