裁剪函数教程

如何在图层中裁剪节点？

要在复杂裁剪区域内绘制内容，可以设置组或图层的 clipFunc 属性。在本教程中，我们将在应用于组的两个圆的裁剪区域内绘制 blobs。

Vanilla

import Konva from 'konva';

// 首先，我们需要创建舞台
const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
});

// 然后创建图层
const layer = new Konva.Layer();

const group = new Konva.Group({
  clipFunc: function (ctx) {
    ctx.beginPath();
    ctx.arc(200, 120, 50, 0, Math.PI * 2, false);
    ctx.arc(280, 120, 50, 0, Math.PI * 2, false);
  },
});

for (let i = 0; i < 20; i++) {
  const blob = new Konva.Circle({
    x: Math.random() * stage.width(),
    y: Math.random() * stage.height(),
    radius: Math.random() * 50,
    fill: 'green',
    opacity: 0.8,
  });
  group.add(blob);
}

// 将形状添加到图层中
layer.add(group);

// 将图层添加到舞台上
stage.add(layer);

Open Sandbox

React

import { Stage, Layer, Group, Circle } from 'react-konva';

const App = () => {
  const blobs = Array.from({ length: 20 }, (_, i) => ({
    x: Math.random() * window.innerWidth,
    y: Math.random() * window.innerHeight,
    radius: Math.random() * 50,
  }));

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Group
          clipFunc={(ctx) => {
            ctx.beginPath();
            ctx.arc(200, 120, 50, 0, Math.PI * 2, false);
            ctx.arc(280, 120, 50, 0, Math.PI * 2, false);
          }}
        >
          {blobs.map((blob, i) => (
            <Circle
              key={i}
              x={blob.x}
              y={blob.y}
              radius={blob.radius}
              fill="green"
              opacity={0.8}
            />
          ))}
        </Group>
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-group :config="groupConfig">
        <v-circle
          v-for="(blob, i) in blobs"
          :key="i"
          :config="blob"
        />
      </v-group>
    </v-layer>
  </v-stage>
</template>

<script setup>
const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const groupConfig = {
  clipFunc: (ctx) => {
    ctx.beginPath();
    ctx.arc(200, 120, 50, 0, Math.PI * 2, false);
    ctx.arc(280, 120, 50, 0, Math.PI * 2, false);
  }
};

const blobs = Array.from({ length: 20 }, () => ({
  x: Math.random() * window.innerWidth,
  y: Math.random() * window.innerHeight,
  radius: Math.random() * 50,
  fill: 'green',
  opacity: 0.8
}));
</script>

Open Sandbox