填充和描边顺序示例

如果图形同时包含填充和描边，默认情况下，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: 'Default shape rendering.\nfillAfterStrokeEnabled = false',
  x: 50,
  y: 50,
  fontSize: 40,
  stroke: 'green',
  fill: 'yellow',
  strokeWidth: 3,
});
layer.add(text1);

const text2 = new Konva.Text({
  text: 'Reversed rendering order.\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="Default shape rendering.\nfillAfterStrokeEnabled = false"
          x={50}
          y={50}
          fontSize={40}
          stroke="green"
          fill="yellow"
          strokeWidth={3}
        />
        <Text
          text="Reversed rendering order.\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: 'Default shape rendering.\nfillAfterStrokeEnabled = false',
  x: 50,
  y: 50,
  fontSize: 40,
  stroke: 'green',
  fill: 'yellow',
  strokeWidth: 3
};

const textConfig2 = {
  text: 'Reversed rendering order.\nfillAfterStrokeEnabled = true',
  x: 50,
  y: 150,
  fontSize: 40,
  stroke: 'green',
  fill: 'yellow',
  strokeWidth: 3,
  fillAfterStrokeEnabled: true
};
</script>

Open Sandbox