Проблема с добавлением точки paperjs после увеличения - PullRequest
Новая
       26

Проблема с добавлением точки paperjs после увеличения

0 голосов
/ 06 ноября 2018

Я использую аннотацию изображения на холсте с использованием 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);
                            }
                        }

1 Ответ

0 голосов
/ 06 ноября 2018

Трудно найти проблему с предоставленным вами фрагментом кода, но вот пример, демонстрирующий возможную реализацию того, что вы описываете.
Нажмите на холст, чтобы добавить точку к пути, и нажмите на кнопки, чтобы увеличить или уменьшить масштаб. 

// 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) .
Я сделал Запрос на извлечение в ваш репозиторий, включая необходимые изменения. Он добавляет вспомогательный метод и использует его для преобразования точки между обеими системами координат. 

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