Рассчитайте правильную площадь обрезки ткани - PullRequest
Новая
       12

Рассчитайте правильную площадь обрезки ткани

0 голосов
/ 18 января 2019

Я хочу обрезать изображение, используя fabricJs, но я застрял в исчислении правильной области, которая будет обрезана. Когда я нажимаю кнопку обрезки, изображение не обрезается до нужной области. Расчет неверен.

Вот мой код урожая: 

function centerXY (w, h) {
    return {
        x: canvas.width / 2 - w / 2,
        y: canvas.height / 2 - h / 2
    }
}
// zoneWidth: width of area where I want to cropped
// zoneHeight: height of area where I want to cropped
 $('#crop').click(function () {
    var zoom = canvas.getZoom()
    const imgTop = canvasImage.top
    const imgLeft = canvasImage.left
    const {x, y} = centerXY(zoneWidth, zoneHeight)
    let top = zoneHeight - imgTop - y
    let left = zoneWidth - imgLeft - x
    zoneWidth /= zoom
    zoneHeight /= zoom

    canvasImage.clipTo = ctx => {
      ctx.rect(left, top, zoneWidth, zoneHeight)
    };
    canvas.renderAll()
  })

Этот расчет основан на этом посте: Функциональность кадрирования с использованием FabricJs

Вот демоверсия .

Примечание: Вы можете использовать диапазон типов ввода, чтобы уменьшить масштаб и увидеть, где изображение обрезается.

Любая помощь, пожалуйста !!

Спасибо заранее.

С уважением,

1 Ответ

0 голосов
/ 18 января 2019

Я решил свою проблему.Вот решение: 

 $('#crop').click(function () {
    var zoom = canvas.getZoom()
    let top = zoneY // Top position of area 
    let left = zoneX// Left position of area
    zoneWidth /= zoom
    zoneHeight /= zoom

    canvas.clipPath = shapeRect; // fabric.Rect()
    canvas.renderAll()
  })

Вместо обрезки изображения я обрезал сам холст.И используя положение области для обрезки

Вот окончательная демонстрация: https://jsfiddle.net/58nvte7h/43/

...