填充与描边顺序演示

如果一个形状同时具有填充和描边，默认情况下，Konva 会先绘制填充，然后在其上面绘制描边。对于大多数应用程序来说，这是最佳行为。

如何将填充部分绘制在描边之上？

在一些罕见的情况下，您可能需要一个先绘制描边，然后在其上绘制填充的形状。对于这种用例，您可以使用 fillAfterStrokeEnabled 属性。

shape.fillAfterStrokeEnabled(true);

说明： 查看两个不同填充和描边顺序的示例。

Vanilla

import Konva from 'konva';

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

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

const text1 = new Konva.Text({
  text: '默认形状渲染。\nfillAfterStrokeEnabled = false',
  x: 50,
  y: 50,
  fontSize: 40,
  stroke: 'green',
  fill: 'yellow',
  strokeWidth: 3,
});
layer.add(text1);

const text2 = new Konva.Text({
  text: '反转的渲染顺序。\nfillAfterStrokeEnabled = true',
  x: 50,
  y: 150,
  fontSize: 40,
  stroke: 'green',
  fill: 'yellow',
  strokeWidth: 3,
  fillAfterStrokeEnabled: true,
});
layer.add(text2);

Open Sandbox

React

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

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text
          text="默认形状渲染。\nfillAfterStrokeEnabled = false"
          x={50}
          y={50}
          fontSize={40}
          stroke="green"
          fill="yellow"
          strokeWidth={3}
        />
        <Text
          text="反转的渲染顺序。\nfillAfterStrokeEnabled = true"
          x={50}
          y={150}
          fontSize={40}
          stroke="green"
          fill="yellow"
          strokeWidth={3}
          fillAfterStrokeEnabled={true}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-text :config="textConfig1" />
      <v-text :config="textConfig2" />
    </v-layer>
  </v-stage>
</template>

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

const textConfig1 = {
  text: '默认形状渲染。\nfillAfterStrokeEnabled = false',
  x: 50,
  y: 50,
  fontSize: 40,
  stroke: 'green',
  fill: 'yellow',
  strokeWidth: 3
};

const textConfig2 = {
  text: '反转的渲染顺序。\nfillAfterStrokeEnabled = true',
  x: 50,
  y: 150,
  fontSize: 40,
  stroke: 'green',
  fill: 'yellow',
  strokeWidth: 3,
  fillAfterStrokeEnabled: true
};
</script>

Open Sandbox