javascript - fabric.js: move clipped Image behind fixed clipping-mask - Stack Overflow

admin管理员组

文章数量:1404603

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 es 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: /

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 es 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/efmbrm4v/

• javascript
• fabricjs

Share Improve this question Follow edited Dec 3, 2014 at 7:16 user1693593 asked Nov 22, 2014 at 14:09 t0biast0bias 13333 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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/Jagi/efmbrm4v/1/

本文标签： javascriptfabricjs move clipped Image behind fixed clippingmaskStack Overflow