Question

我正在处理一个小脚本，该脚本允许用户将自定义图像加载到网页上的画布中。到目前为止，它非常整洁。使用fabric.js脚本初始化画布，以便让用户执行一些简单的编辑任务。

＆＃34;上传＆＃34;图像被一个简单的矩形剪裁。现在是棘手的部分：用户应该能够移动，缩放和旋转图像，同时矩形保持在原位;选择图像部分是首选。但是，甚至

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/

fabric.js：在固定剪贴蒙版后面移动剪裁图像

1 个答案: