Question

我正在使用paperjs在画布上使用图像注释。当我在不缩放的情况下在图像上添加注释时，效果很好。

                    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缩放后，我试图在画布上画一条线，但是线对齐与我的鼠标点不匹配。

如果我缩小到初始点，则表示它正确对齐。请让我知道如何解决此问题。

如何使用默认坐标加载？我的意思是，现在我已经平移画布并重新加载了。我必须显示带有旧坐标的画布。可以吗？

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

很难找到您提供的代码段的问题，但这是一个示例，它演示了您所描述的内容的可能实现。
单击画布以在路径上添加一个点，然后单击按钮进行放大或缩小。

// 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));
};

缩放后paper.js添加点的问题

1 个答案:

编辑