Clipping with transformer or similar?

[tsummerall]

I am making a simple image layer manipulator with konva. Right now you can add images creating a new konva layer for each and use a transformer to select, scale, and rotate them individually.

I want to allow the user to clip the image layers using controls similar to the transformer. You'd click on a handle and as you move it it would crop (or reveal previously clipped parts of) the image from the side or corner that you are dragging instead of scaling the image.

I've experimented with this by adding a clip rect to a layer's image through code but afterwards the transformer no longer draws or functions correctly. If the image was previously scaled it gets even weirder.

What would be the best approach for implementing image clipping in a way that would work well with transformers?

[lavrton]

Move the image into a group and then use clip for the group instead of a layer. That way the Transformer will be visible.

[SpaghettiDemon]

Had a similar Issue.

Move the image into a group and then use clip for the group instead of a layer. That way the Transformer will be visible.

This approach works like i want to, but Konva throws warnings in the Dev Console:
Util.js:614 Konva warning: Transformer and attached node have different parents. Konva does not support such case right now. Please move Transformer to the parent of attaching node.
When attaching the Transformer to the Group the warnings disappear, but the Transformer get's clipped again.
Could you disable the Warning for this case?

[lavrton]

You can disable warning with Konva.showWarnings = false.

But I think there is a better solution for such a case is using "fake" transparent shape where you want and making your own node structure.

// noprotect

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);



Konva.Image.fromURL('https://i.imgur.com/ktWThtZ.png', img => {
  
  var group = new Konva.Group({
    clipFunc: (ctx) => {
      ctx.save();
      ctx.translate(fakeShape.x(), fakeShape.y())
      ctx.rotate(Konva.getAngle(fakeShape.rotation()))
      ctx.rect(0, 0, fakeShape.width() * fakeShape.scaleX(), fakeShape.height() * fakeShape.scaleY());
      ctx.restore()
    }
  })
  layer.add(group);
  img.setAttrs({
     width: stage.width(),
    height: stage.height()
  });
  group.add(img);
  
  
  var fakeShape = new Konva.Rect({
    width: 100,
    height: 100,
    x: 100,
    y: 100,
    fill: 'rgba(0,0,0,0)',
    draggable: true
  })
  layer.add(fakeShape);
  
  var tr = new Konva.Transformer({
    node: fakeShape
  });
  layer.add(tr);
  
  layer.draw();
});

Demo: https://jsbin.com/zulakibamu/edit?html,js,output

[bgondy]

Hi, I'm facing a similar issue: I have two types of layers: text and image which I can drag and transform with a Transformer. The specificity is I need to apply different clipping settings to each layer depending on its type when I enable a "readonly" mode. When this mode is enabled, the Transformer is not available.
To do so, I've wrapped every layer in a group and I set clipping settings only when export mode is enabled (I'm using vue-konva) but when I select/drag a layer, I get this warning whereas everything seems to work well.

Would you you still recommend to use a fake shape for this use case ? This would lead to a lot of extra work in my case.

[lavrton]

@bgondy why it is extra work? Yeah, it is probably recommended for now.

[bgondy]

@lavrton Because of my data structure and the way I persist shape configuration in my store but this has nothing to do with the clipping issue. I will implement your fake shape trick. Thanks for helping me

[lavrton]

BTW with the last version you can place the transformer anywhere and it will work without warnings.

[bgondy]

Amazing, you made my day :D

[4nkit-5hukla]

You can disable warning with Konva.showWarnings = false.

But I think there is a better solution for such a case is using "fake" transparent shape where you want and making your own node structure.

// noprotect

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);



Konva.Image.fromURL('https://i.imgur.com/ktWThtZ.png', img => {
  
  var group = new Konva.Group({
    clipFunc: (ctx) => {
      ctx.save();
      ctx.translate(fakeShape.x(), fakeShape.y())
      ctx.rotate(Konva.getAngle(fakeShape.rotation()))
      ctx.rect(0, 0, fakeShape.width() * fakeShape.scaleX(), fakeShape.height() * fakeShape.scaleY());
      ctx.restore()
    }
  })
  layer.add(group);
  img.setAttrs({
     width: stage.width(),
    height: stage.height()
  });
  group.add(img);
  
  
  var fakeShape = new Konva.Rect({
    width: 100,
    height: 100,
    x: 100,
    y: 100,
    fill: 'rgba(0,0,0,0)',
    draggable: true
  })
  layer.add(fakeShape);
  
  var tr = new Konva.Transformer({
    node: fakeShape
  });
  layer.add(tr);
  
  layer.draw();
});

Demo: https://jsbin.com/zulakibamu/edit?html,js,output

how can we do similar thing in react-konva.

[CPatchane]

Demo: https://jsbin.com/zulakibamu/edit?html,js,output

Very useful demo for this use case, it could be great to have it as an example/tutorial on Konva website