缩放后 paperjs 问题添加点

Question

我正在使用 paperjs 在 canvas 上使用图像注释。当我在不缩放的情况下在图像上进行注释时，效果非常好。

                    path = new p.Path();
                    path.selected = false;
                    path.strokeColor = update.color;
                    path.strokeWidth = scope.lineWidth;
                    path.strokeCap = scope.strokeCap;
                    path.strokeJoin = scope.strokeJoin;
                    path.uuid = update.uuid;
                    var start = new p.Point(update.fromX, update.fromY);                        
                    path.moveTo(start);
                    p.view.draw();

但是在使用 paper.view.zoom=2 缩放后，我试图在 canvas 上画一条线，但线对齐与我的鼠标点不匹配。

如果我缩小到初始点然后它对齐 correctly.Please 让我知道如何解决这个问题。

如何使用默认坐标加载？我的意思是现在我已经平移 canvas 并重新加载。我必须显示 canvas 与旧的合作 ordinates.is 可能吗？

toolPan = new p.Tool();
                        toolPan.onMouseDrag = function (event) {
                            if(panCanvasStatus==1){
                                var a = event.downPoint.subtract(event.point);
                                a = a.add(p.view.center);
                                p.view.center = a;                                 
                                 update.pan=JSON.stringify(event);
                                sendUpdate('otWhiteboard_panupdate', update);
                            }
                        }

Answer 1

很难找到您提供的代码片段的问题，但这里有一个示例演示了您所描述内容的可能实现方式。
单击 canvas 向路径添加一个点，然后单击按钮放大或缩小。

// setup paper
paper.install(window);
paper.setup(document.getElementById('canvas'));

// draw image
var raster = new Raster({
  source: 'https://picjumbo.com/wp-content/uploads/vineyards-on-italian-coast-free-photo-DSC04256-1080x720.jpg',
  onLoad: function() {
    this.fitBounds(view.bounds.scale(0.8));
  }
});

// init path
var path = new Path({
  segments: [view.center],
  strokeColor: 'red',
  strokeWidth: 5
});

// on mouse down...
view.onMouseDown = function(event) {
  // ...add down point to the path
  var point = event.point;
  path.add(point);
};

// on button click...
$('#zoom-in').click(function() {
  // ...zoom in
  view.zoom *= 1.1;
});
$('#zoom-out').click(function() {
  // ...zoom out
  view.zoom *= 0.9;
});

html,
body {
  margin: 0;
  overflow: hidden;
  height: 100%;
}

canvas {
  width: 100%;
  height: 100%;
}

#zoom-in {
  position: fixed;
  top: 10px;
  left: 10px;
}

#zoom-out {
  position: fixed;
  top: 35px;
  left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.min.js"></script>
<canvas id="canvas"></canvas>
<button id="zoom-in">zoom in</button>
<button id="zoom-out">zoom out</button>

编辑

现在您提供了代码，我可以看出您使用的事件点坐标不是来自 Paper.js 事件，而是来自外部事件处理系统。因此，您需要将点坐标转换为 Paper.js 坐标系（包括缩放、平移等）。
您可以使用 view.viewToProject(point).
方法来做到这一点我对您的存储库进行了 Pull Request，包括所需的更改。它添加了一个辅助方法并使用它在两个坐标系之间转换一个点。

function createPoint(x, y) {
    return paper.view.viewToProject(new paper.Point(x,y));
};

缩放后 paperjs 问题添加点

Issue with paperjs add point after zooming

canvas

point

zooming

paperjs

编辑