fabric.js：将剪切的图像移到固定的剪切蒙版后面

Question

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;

or

lockMovementX = true;    
lockMovementY = true;    

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

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

Answer 1

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();
};

You can try it out here: http://jsfiddle.net/Jagi/efmbrm4v/1/