我正在尝试使用JointJS中的鼠标滚轮实现缩放功能。目的是使用paper.scale()函数,并将鼠标坐标用于ox&oy选项。但是,当我移动鼠标时,它会在翻译中产生抖动效果。
谷歌快速搜索有几种缩放实现,但是它们似乎都遇到相同的问题。
这是基于我对JointJS文档的最佳理解的代码。我假设x和y已经转换为图纸空间。
paper.on('blank:mousewheel', function(evt, x, y, delta) {
var normalizedDelta = Math.max(-1, Math.min(1, (delta))) / 50;
var newScale = paper.scale().sx + normalizedDelta; // the current paper scale changed by delta
if (newScale > 0.4 && newScale < 2) {
paper.translate(0, 0); // setOrigin is deprecated, replaced by translate
paper.scale(newScale, newScale, x, y);
}
})
以下是我通过谷歌搜索找到的一些缩放代码。它具有相同的效果。我搞砸了使用offsetX / offsetY,局部坐标和纸张坐标,所有这些都没有运气。
paper.$el.on('mousewheel DOMMouseScroll', onMouseWheel);
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); // offsetX is not defined in FF
var offsetY = (e.offsetY || e.clientY - $(this).offset().top); // offsetY is not defined in FF
var localPoint = offsetToLocalPoint(offsetX, offsetY);
var newScale = V(paper.viewport).scale().sx + delta; // the current paper scale changed by delta
if (newScale > 0.4 && newScale < 2) {
paper.translate(0, 0); // setOrigin is deprecated, replaced by translate
paper.scale(newScale, newScale, localPoint.x, localPoint.y); //p.x, p.y);
}
}
function offsetToLocalPoint(x, y) {
var svgPoint = paper.svg.createSVGPoint();
svgPoint.x = x;
svgPoint.y = y;
// Transform point into the viewport coordinate system.
var pointTransformed = svgPoint.matrixTransform(paper.viewport.getCTM().inverse());
return pointTransformed;
}
我希望它可以放大鼠标所处的位置。当ox&oy设置为零时,缩放效果很好。当我尝试将鼠标坐标用于ox&oy选项时,它似乎可以工作。但是,当我在周围移动鼠标时,会得到抖动的翻译效果。看来ox&oy坐标延迟了一个事件。
这是我的尝试JSFiddle。
这是我通过Google JSFiddle
找到的尝试