HTML5 画布标签教程

要使用 Konva 创建一个标签，可以使用 Konva.Label() 对象。

有关属性和方法的完整列表，请参见 标签 API 参考。

Vanilla

import Konva from 'konva';

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

const layer = new Konva.Layer();

// 向下指向的工具提示
const tooltip = new Konva.Label({
  x: 170,
  y: 75,
  opacity: 0.75
});

tooltip.add(
  new Konva.Tag({
    fill: 'black',
    pointerDirection: 'down',
    pointerWidth: 10,
    pointerHeight: 10,
    lineJoin: 'round',
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 10,
    shadowOffsetY: 10,
    shadowOpacity: 0.5
  })
);

tooltip.add(
  new Konva.Text({
    text: '向下指向的工具提示',
    fontFamily: 'Calibri',
    fontSize: 18,
    padding: 5,
    fill: 'white'
  })
);

// 向左指向的标签
const labelLeft = new Konva.Label({
  x: 20,
  y: 130,
  opacity: 0.75
});

labelLeft.add(
  new Konva.Tag({
    fill: 'green',
    pointerDirection: 'left',
    pointerWidth: 20,
    pointerHeight: 28,
    lineJoin: 'round'
  })
);

labelLeft.add(
  new Konva.Text({
    text: '向左指向的标签',
    fontFamily: 'Calibri',
    fontSize: 18,
    padding: 5,
    fill: 'white'
  })
);

// 简单标签
const simpleLabel = new Konva.Label({
  x: 180,
  y: 150,
  opacity: 0.75
});

simpleLabel.add(
  new Konva.Tag({
    fill: 'yellow'
  })
);

simpleLabel.add(
  new Konva.Text({
    text: '简单标签',
    fontFamily: 'Calibri',
    fontSize: 18,
    padding: 5,
    fill: 'black'
  })
);

layer.add(tooltip).add(labelLeft).add(simpleLabel);
stage.add(layer);

Open Sandbox

React

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

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        {/* 向下指向的工具提示 */}
        <Label x={170} y={75} opacity={0.75}>
          <Tag
            fill="black"
            pointerDirection="down"
            pointerWidth={10}
            pointerHeight={10}
            lineJoin="round"
            shadowColor="black"
            shadowBlur={10}
            shadowOffsetX={10}
            shadowOffsetY={10}
            shadowOpacity={0.5}
          />
          <Text
            text="向下指向的工具提示"
            fontFamily="Calibri"
            fontSize={18}
            padding={5}
            fill="white"
          />
        </Label>

        {/* 向左指向的标签 */}
        <Label x={20} y={130} opacity={0.75}>
          <Tag
            fill="green"
            pointerDirection="left"
            pointerWidth={20}
            pointerHeight={28}
            lineJoin="round"
          />
          <Text
            text="向左指向的标签"
            fontFamily="Calibri"
            fontSize={18}
            padding={5}
            fill="white"
          />
        </Label>

        {/* 简单标签 */}
        <Label x={180} y={150} opacity={0.75}>
          <Tag fill="yellow" />
          <Text
            text="简单标签"
            fontFamily="Calibri"
            fontSize={18}
            padding={5}
            fill="black"
          />
        </Label>
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <!-- 向下指向的工具提示 -->
      <v-label :config="tooltipConfig">
        <v-tag :config="tooltipTagConfig" />
        <v-text :config="tooltipTextConfig" />
      </v-label>

      <!-- 向左指向的标签 -->
      <v-label :config="leftLabelConfig">
        <v-tag :config="leftTagConfig" />
        <v-text :config="leftTextConfig" />
      </v-label>

      <!-- 简单标签 -->
      <v-label :config="simpleLabelConfig">
        <v-tag :config="simpleTagConfig" />
        <v-text :config="simpleTextConfig" />
      </v-label>
    </v-layer>
  </v-stage>
</template>

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

// 向下指向的工具提示
const tooltipConfig = {
  x: 170,
  y: 75,
  opacity: 0.75
};

const tooltipTagConfig = {
  fill: 'black',
  pointerDirection: 'down',
  pointerWidth: 10,
  pointerHeight: 10,
  lineJoin: 'round',
  shadowColor: 'black',
  shadowBlur: 10,
  shadowOffsetX: 10,
  shadowOffsetY: 10,
  shadowOpacity: 0.5
};

const tooltipTextConfig = {
  text: '向下指向的工具提示',
  fontFamily: 'Calibri',
  fontSize: 18,
  padding: 5,
  fill: 'white'
};

// 向左指向的标签
const leftLabelConfig = {
  x: 20,
  y: 130,
  opacity: 0.75
};

const leftTagConfig = {
  fill: 'green',
  pointerDirection: 'left',
  pointerWidth: 20,
  pointerHeight: 28,
  lineJoin: 'round'
};

const leftTextConfig = {
  text: '向左指向的标签',
  fontFamily: 'Calibri',
  fontSize: 18,
  padding: 5,
  fill: 'white'
};

// 简单标签
const simpleLabelConfig = {
  x: 180,
  y: 150,
  opacity: 0.75
};

const simpleTagConfig = {
  fill: 'yellow'
};

const simpleTextConfig = {
  text: '简单标签',
  fontFamily: 'Calibri',
  fontSize: 18,
  padding: 5,
  fill: 'black'
};
</script>

Open Sandbox