How to make shape only show in react and partially hide on stage - konvajs

Question

I created a responsive rect as an artboard in the stage, and when I add shapes and move them, I want the shapes to only show on the rect, just like opening a window on the stage, only show the shapes inside the window

Answer 1

You should use clipping for that. Tutorial: https://konvajs.org/docs/clipping/Clipping_Regions.html
import React from "react";
import { createRoot } from "react-dom/client";
import { Stage, Layer, Star } from "react-konva";
function generateShapes() {
return [...Array(50)].map((_, i) => ({
id: i.toString(),
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight,
rotation: Math.random() * 180,
isDragging: false
}));
}
const INITIAL_STATE = generateShapes();
const STAR_PROPS = {
numPoints: 5,
innerRadius: 20,
outerRadius: 40,
fill: "#89b717",
opacity: 0.8,
shadowColorL: "black",
shadowBlur: 10,
shadowOpacity: 0.6,
shadowOffsetX: 5,
shadowOffsetY: 5,
scaleX: 1,
scaleY: 1,
draggable: true
};
const App = () => {
const [stars] = React.useState(INITIAL_STATE);
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer
clipX={50}
clipY={50}
clipWidth={window.innerWidth - 100}
clipHeight={window.innerWidth - 100}
>
{stars.map((star) => (
<Star
{...STAR_PROPS}
key={star.id}
id={star.id}
x={star.x}
y={star.y}
rotation={star.rotation}
/>
))}
</Layer>
</Stage>
);
};
const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);
https://codesandbox.io/s/react-konva-clipping-sg2fpd