fabric.js:将剪切的图像移到固定的剪切蒙版后面 [英] fabric.js: move clipped Image behind fixed clipping-mask

问题描述

我正在研究一个小的脚本，该脚本允许用户将自定义图像加载到网页的画布上.到目前为止，效果还不错.画布是使用fabric.js脚本初始化的，以便让用户执行一些简单的编辑任务.

I'm working on a small script that lets a user load a custom image into the canvas on the webpage. So far that works pretty neat. The canvas is initialized using the fabric.js script in order to let the user do some easy editing tasks.

上传的"图像被一个简单的矩形裁剪.现在出现了棘手的部分:用户应该能够在矩形保持在原处的同时移动，缩放和旋转图像.选择首选的图像部分.但是，即使

The "uploaded" image is clipped by a simple rectangle. Now comes the tricky part: the user should then be able to move around, scale and rotate the image, whilst the rectangle stays in place; selecting the image section preferred. However, even

lockMovement = true;

或

lockMovementX = true;    
lockMovementY = true;    

不要将剪切蒙版固定在适当的位置.还有其他方法可以实现这一目标吗?

do not keep that clipping mask in place. Any other way to achieve this?

任何帮助将不胜感激！请在此处找到演示: http://jsfiddle.net/efmbrm4v/

Any help is greatly appreciated! Please find a demo here: http://jsfiddle.net/efmbrm4v/

推荐答案

我遇到了同样的问题，并使用以下代码解决了该问题:

I had the same problem and I solved it with following code:

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:将剪切的图像移到固定的剪切蒙版后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！