如何使用 paperjs 平移

Question

我一直在尝试弄清楚如何 pan/zoom 在 paperjs 中使用 onMouseDrag 和 onMouseDown。
我看到的唯一参考是coffescript，并没有使用paperjs工具。

Answer 1

我花了比应该弄明白的时间更长的时间。

var toolZoomIn = new paper.Tool();
toolZoomIn.onMouseDrag = function (event) {
    var a = event.downPoint.subtract(event.point);
    a = a.add(paper.view.center);
    paper.view.center = a;
}

Answer 2

你可以进一步简化 Sam P 的方法：

var toolPan = new paper.Tool();
toolPan.onMouseDrag = function (event) {
    var offset = event.downPoint - event.point;
    paper.view.center = paper.view.center + offset;
};

事件对象已经有一个名为 downPoint 的起点变量。

我已经整理了一个快速 sketch 来测试这个。

Answer 3

不幸的是，您不能依靠 event.downPoint 在更改视图变换时获取前一个点。您必须自己将其保存在视图坐标中（正如 Paper.js 的开发者 Jürg Lehni 所指出的 here）。

这是一个有效的版本（也在 this sketch 中）：

let oldPointViewCoords;

function onMouseDown(e) {
    oldPointViewCoords = view.projectToView(e.point);
}

function onMouseDrag(e) {
    const delta = e.point.subtract(view.viewToProject(oldPointViewCoords));
    oldPointViewCoords = view.projectToView(e.point);
    view.translate(delta);
}

view.translate(view.center);
new Path.Circle({radius: 100, fillColor: 'red'});

如何使用 paperjs 平移

How to pan using paperjs

paperjs