问题
I noticed that jointjs do support zoom in/out as of http://www.jointjs.com/ But could not find any examples.
Please help me with the steps to zoom in/out the result graph created by jointjs within a <div>?
回答1:
Joint Paper has a method called scale().
I have this implementation for scaling (zooming) my graph:
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);
};
Maybe this is what you need?
回答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;
}
来源:https://stackoverflow.com/questions/22740228/how-to-scale-jonitjs-graphs