Paper.js Subraster Выбор неправильной области

Question

Я работаю в проекте Paper.js, где мы по существу занимаемся редактированием изображений. Существует один большой растровый. Я пытаюсь использовать метод getSubRaster для копирования раздела изображения (растра), который пользователь может перемещать.

После того, как растр для редактирования загружается, selectArea вызывается для регистрации этих слушателей:

var selectArea = function() { 
    if(paper.project != null) { 
    var startDragPoint; 

    paper.project.layers[0].on('mousedown', function(event) { // TODO should be layer 0 in long run? // Capture start of drag selection 
     if(event.event.ctrlKey && event.event.altKey) { 
     startDragPoint = new paper.Point(event.point.x + imageWidth/2, (event.point.y + imageHeight/2)); 
     //topLeftPointOfSelectionRectangleCanvasCoordinates = new paper.Point(event.point.x, event.point.y); 
     } 
    }); 
    paper.project.layers[0].on('mouseup', function(event) { // TODO should be layer 0 in long run? // Capture end of drag selection 
     if(event.event.ctrlKey && event.event.altKey) { 
     var endDragPoint = new paper.Point(event.point.x + imageWidth/2, event.point.y + imageHeight/2); 

     // Don't know which corner user started dragging from, aggregate the data we have into the leftmost and topmost points for constructing a rectangle 
     var leftmostX; 
     if(startDragPoint.x < endDragPoint.x) { 
      leftmostX = startDragPoint.x; 
     } else { 
      leftmostX = endDragPoint.x; 
     } 
     var width = Math.abs(startDragPoint.x - endDragPoint.x); 

     var topmostY; 
     if(startDragPoint.y < endDragPoint.y) { 
      topmostY = startDragPoint.y; 
     } else { 
      topmostY = endDragPoint.y; 
     } 
     var height = Math.abs(startDragPoint.y - endDragPoint.y); 

     var boundingRectangle = new paper.Rectangle(leftmostX, topmostY, width, height); 
     console.log(boundingRectangle); 
     console.log(paper.view.center); 
     var selectedArea = raster.getSubRaster(boundingRectangle); 

     var selectedAreaAsDataUrl = selectedArea.toDataURL(); 
     var subImage = new Image(width, height); 
     subImage.src = selectedAreaAsDataUrl; 

     subImage.onload = function(event) { 
      var subRaster = new paper.Raster(subImage); 

      // Make movable 
      subRaster.onMouseEnter = movableEvents.showSelected; 
      subRaster.onMouseDrag = movableEvents.dragItem; 
      subRaster.onMouseLeave = movableEvents.hideSelected; 
     };   
     } 
    }); 
    } 
}; 

Методы вызываются в нужное время и поле выбора, кажется, правильный размер. Это действительно делает новый растровый для меня, что я могу перемещаться, но содержимое растра не то, что я выбрал. Они близки к тому, что я выбрал, но не тем, что я выбрал. Выбор разных областей не приводит к различным результатам. Содержимое сгенерированного субстраста всегда кажется нисходящим и справа от фактического выбора.

Обратите внимание, что по мере того, как я строю точки для прямоугольника выделения, я делаю некоторые переводы. Это связано с различиями в системах координат. Система координат, в которой я нарисовала прямоугольник, имеет (0,0) в центре изображения, а x увеличивается вправо, а y увеличивается вниз. Но для getSubRaster мы должны предоставить координаты пикселей в документации, которые начинаются с (0,0) в левом верхнем углу изображения и увеличиваются вправо и вниз. Следовательно, по мере того, как я строю точки, я переводил точки в координаты растра/пикселя, добавляя imageWidth/2 и imageHeight/2`.

Так почему же этот код выбирает неправильную область? Заранее спасибо.

EDIT:

К сожалению, я не могу разделить изображение я работаю, потому что это конфиденциальные данные компании. Но вот некоторые метаданные:

• Ширина изображения: 4250 пикселей
• Высота изображения: 5500 пикселей
• Холст Ширина: 591 пикселей
• Canvas Высота: 766 пикселей

Мой размер холста зависит от размера окна браузера, но это те параметры, которые я тестировал. Я не думаю, что размеры холста особенно актуальны, потому что я делаю все с точки зрения пикселей изображения. Когда я фиксирую event.point.x и event.point.y, насколько я знаю, это масштабированные изображения, но из другого источника - центр, а не левый верхний. К сожалению, я не могу найти документацию по этому вопросу. Обратите внимание, как работают координаты в этом sketch.

Я также работаю над sketch, чтобы проиллюстрировать проблему этого вопроса. Чтобы использовать его, удерживайте Ctrl + Alt и перетащите поле на изображении. Это должно вызвать некоторые данные регистрации и попытаться получить субстраст, но я получаю сообщение об ошибке безопасности, которое, я думаю, связано с настройками безопасности в заголовке запроса изображения. Использование базовой строки 64 вместо URL-адреса не дает ошибки безопасности, но ничего не делает. Использование этой строки в эскизе создает супер длинный URL, который я не могу вставить здесь. Но чтобы получить это, вы можете скачать image (или любое изображение) и преобразовать его here, и положите его как img.src.

Answer 1

Проблема в том, что события мыши все возвращают точки относительно 0, 0 холста.И getSubRaster ожидает, что координаты будут относительно 0, 0 растрового объекта, из которого он извлекается.

Корректировка должна быть eventpoint - raster.bounds.topLeft. Это не имеет никакого отношения к ширине или высоте изображения. Вы хотите настроить точки события так, чтобы они относились к 0, 0 растра, а 0, 0 - raster.bounds.topLeft.

Когда вы настраиваете точки событий на 1/2, размер изображения, который заставляет ошибочно смещать точки события. Для примера Mona Lisa размер растра (размер изображения) равен w: 320, h: 491; делится на два: w: 160, h: 245.5. Но bounds.topLeft изображения (когда я запустил свой эскиз) был x: 252.5, y: 155.5.

Вот эскиз, который показывает, что он работает. Я добавил немного красного квадрата, выделив выделенную область, чтобы упростить сравнение, когда это будет сделано. Я также не включил логику toDataURL, так как это создает проблемы безопасности, о которых вы говорили.

Здесь вы идете: Sketch

Вот код, который я поставил в HTML-файл; Я заметил, что в эскизе я собрал ссылки на предыдущую версию кода, которая не работает полностью.

<!doctype html> 
<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>Rasters</title> 
<script src="./vendor/jquery-2.1.3.js"></script> 
<script src="./vendor/paper-0.9.25.js"></script> 
</head> 
<body> 
<main> 
    <h3>Raster Bug</h3> 
    <div> 
     <canvas id="canvas"></canvas> 
    </div> 
    <div id="position"> 

    </div> 
</main> 

<script> 
// initialization code 
$(function() { 
    // setup paper 
    $("#canvas").attr({width: 600, height: 600}); 
    var canvas = document.getElementById("canvas"); 
    paper.setup(canvas); 

    // show a border to make range of canvas clear 
    var border = new paper.Path.Rectangle({ 
     rectangle: {point: [0, 0], size: paper.view.size}, 
     strokeColor: 'black', 
     strokeWidth: 2 
    }); 

    var tool = new paper.Tool(); 

    // setup mouse position tracking 
    tool.on('mousemove', function(e) { 
     $("#position").text("mouse: " + e.point); 
    }); 

    // load the image from a dataURL to avoid CORS issues 
    var raster = new paper.Raster(dataURL); 
    raster.position = paper.view.center; 

    var lt = raster.bounds.topLeft; 
    var startDrag, endDrag; 

    console.log('rb', raster.bounds); 
    console.log('lt', lt); 

    // setup mouse handling 
    tool.on('mousedown', function(e) { 
     startDrag = new paper.Point(e.point); 
     console.log('sd', startDrag); 
    }); 
    tool.on('mousedrag', function(e) { 
     var show = new paper.Path.Rectangle({ 
      from: startDrag, 
      to: e.point, 
      strokeColor: 'red', 
      strokeWidth: 1 
     }); 
     show.removeOn({ 
      drag: true, 
      up: true 
     }); 
    }); 
    tool.on('mouseup', function(e) { 
     endDrag = new paper.Point(e.point); 
     console.log('ed', endDrag); 

     var bounds = new paper.Rectangle({ 
      from: startDrag.subtract(lt), 
      to: endDrag.subtract(lt) 
     }); 
     console.log('bounds', bounds); 

     var sub = raster.getSubRaster(bounds); 
     sub.bringToFront(); 

     var subData = sub.toDataURL(); 
     sub.remove(); 

     var subRaster = new paper.Raster(subData); 
     subRaster.position = paper.view.center; 

    }); 

}); 

var dataURL = ; // insert data or real URL here 

</script> 
</body> 
</html>