How to update the clipFunc state

[ilomon10]

i have this kind of component to clip the children based on rectRef:

const ArtboardComponent = ({width, height})=>{
  const rectRef = useRef();
  const handleClipFunc = (ctx)=>{
    const rect = rectRef.current;
    ctx.save();
    ctx.rect(0, 0, rect.width(), rect.height())
    ctx.restore();
  }
  return (
    <Group>
      <Rect ref={rectRef} width={width} height={height}/>
      <Group clipFunc={handleClipFunc}>
       // children shape to be cliped
      </Group>
    </Group>
  )
}

the rectRef does not update in the clipFunc after get hot change, it just update one time on initial render

[lavrton]

Please make a demo.

[ilomon10]

@lavrton i use state to change it not change, even direct change to groupRef it cannot modify the clipping area.

https://codesandbox.io/p/sandbox/konva-clipfunc-sq65y8

[lavrton]

You don't need to reset the clip function. You can put some logs in it to see if it is called correctly.

The issue is in combination with Transformer. Transformer doesn't change the width and height of the rectangle. Instead, it is changing scaleX and scaleY, so it see the effect you may need to do this:

ctx.rect(0, 0, rect.width() * rect.scaleX(), rect.height() * rect.scaleY());

[ilomon10]

thank you @lavrton it solved now