fabric.js: переместить обрезанное изображение за фиксированной обтравочной маской

Question

Я работаю над небольшим сценарием, который позволяет пользователю загружать пользовательское изображение на холст на веб-странице. Пока это работает довольно аккуратно. Холст инициализируется с помощью сценария fabric.js, чтобы позволить пользователю легко выполнять некоторые задачи редактирования.

"Загруженное" изображение обрезается простым прямоугольником. Теперь самое сложное: пользователь должен иметь возможность перемещаться, масштабировать и поворачивать изображение, в то время как прямоугольник остается на месте; выбрав раздел изображения предпочтительнее. Однако даже

lockMovement = true;

или же

lockMovementX = true;    
lockMovementY = true;    

не держите эту обтравочную маску на месте. Есть ли другой способ добиться этого?

Любая помощь очень ценится! Пожалуйста, найдите демо здесь: http://jsfiddle.net/efmbrm4v/

Answer 1

У меня была такая же проблема, и я решил ее с помощью следующего кода:

image.clipTo = function (ctx) {
  ctx.save();

  ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset transformation to default for canvas
  ctx.rect(
    100, 100, // Just x, y position starting from top left corner of canvas
    200, 200 // Width and height of clipping rect
  );

  ctx.restore();
};

Вы можете попробовать это здесь: http://jsfiddle.net/Jagi/efmbrm4v/1/