javascript - Fabric .js : move clipped Image behind fixed clipping-mask

Question

我正在编写一个小脚本，让用户可以将自定义图像加载到网页的 Canvas 中。到目前为止，效果非常好。 Canvas 使用 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/