我已经实现了纸张的缩放,效果很好。
我将它与鼠标滚轮的滚动联系起来,但我仍然遇到一个问题:在 API 中,缩放函数定义为scale paper.scale(sx, sy, [ox, oy])
,我认为 ox 和 oy 可以将缩放居中到特定位置。在我的情况下,这个位置应该是指针。但是虽然我交出了坐标(offsetX
和offsetY
鼠标事件的),但它绝对没有效果。
有人可以给我一个如何使用ox
和的例子oy
吗?
我已经实现了纸张的缩放,效果很好。
我将它与鼠标滚轮的滚动联系起来,但我仍然遇到一个问题:在 API 中,缩放函数定义为scale paper.scale(sx, sy, [ox, oy])
,我认为 ox 和 oy 可以将缩放居中到特定位置。在我的情况下,这个位置应该是指针。但是虽然我交出了坐标(offsetX
和offsetY
鼠标事件的),但它绝对没有效果。
有人可以给我一个如何使用ox
和的例子oy
吗?
不要忘记先将鼠标坐标转换为视口坐标系。
function offsetToLocalPoint(offsetX, offsetY, paper) {
var svgPoint = paper.svg.createSVGPoint();
svgPoint.x = offsetX;
svgPoint.y = offsetY;
var offsetTransformed = svgPoint.matrixTransform(paper.viewport.getCTM().inverse());
return offsetTransformed
}
并在指定转换的原点 [ox, oy]translate
调用之前重置先前的视口转换。您可以在下面的鼠标滚轮事件处理程序示例中看到这一点。paper.scale()
scale
function onMouseWheel(e) {
e.preventDefault();
e = e.originalEvent;
var delta = Math.max(-1, Math.min(1, e.wheelDelta)) / SPEED;
var newScale = V(paper.viewport).scale().sx + delta;
if (newScale > MIN_SCALE && newScale < MAX_SCALE) {
paper.setOrigin(0, 0); // reset the previous 'translate'
var p = offsetToLocalPoint(e.offsetX, e.offsetY);
paper.scale(newScale, newScale, p.x, p.y);
}
}
一个跨浏览器版本小提琴here。