填充和描边顺序演示

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

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

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

shape.fillAfterStrokeEnabled(true);

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

Konva 填充描边顺序演示view raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@9.3.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Fill Stroke Order Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      // add the layer to the stage
      stage.add(layer);

      var 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);

      var 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);
    </script>
  </body>
</html>