Fabric.js 1.5 image clipto

Question

Я использую Fabric.js, чтобы нарисовать изображение на холсте, а затем нарисовать прямоугольник при нажатии вниз и перемещении мыши.

Я хочу обрезать изображение, используя прямоугольник.

При вызове функции clipTo() я обнаружил, что Fabric.js не обрезает изображение из указанной позиции. Кажется, x:0, y:0 фактически указывает центральную точку изображения вместо левого верхнего угла изображения.

Если я использую приведенный ниже код, я получаю только нижнюю правую часть изображения.

object.clipTo = function (ctx) { 
    ctx.rect(0, 0, 700, 700); 
}; 

Кто-нибудь знает, как вычислить правильную начальную точку (x, y)?

Answer 1

Это происходит потому, что при отсечении текущее преобразование расположено в центре объекта.

Чтобы избежать этого, измените функцию clipTo следующим образом:

object.clipTo = function (ctx) { 
    ctx.save(); 
    ctx.setTransform(1,0,0,1,0,0); 
    ctx.rect(0, 0, 700, 700); 
    ctx.restore(); 
}; 

В основном вы сбрасываете с setTransform положение полотна до «нейтрального» И с save и restore вы вернуть его обратно, где fabricjs ожидает его be,

таким образом вы будете снимать ровно от 0,0 до 700,700.

ОБНОВЛЕНИЕ Март 2017

Если вы работаете с экраном, которые имеют devicepixelRatio больше, чем 1 (экраны сетчатки, мобильные устройства) может потребоваться различный код:

object.clipTo = function (ctx) { 
    var retina = fabric.getRetinaScaling(); 
    ctx.save(); 
    ctx.setTransform(retina,0,0,retina,0,0); 
    ctx.rect(0, 0, 700, 700); 
    ctx.restore(); 
};