图形工具提示

使用 Konva 创建 HTML5 Canvas 图形工具提示

此示例展示如何创建工具提示，使其在鼠标悬停在图形上时跟随鼠标指针。它演示以下内容：

1. 使用 sceneFunc 创建自定义图形
2. 处理鼠标事件（mousemove、mouseout）
3. 使用多个图层更好地组织内容
4. 创建跟随指针的动态工具提示

Vanilla

import Konva from 'konva';

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

const shapesLayer = new Konva.Layer();
const tooltipLayer = new Konva.Layer();

// Create custom triangle shape
const triangle = new Konva.Shape({
  stroke: 'black',
  fill: '#00D2FF',
  strokeWidth: 1,
  sceneFunc: function (context) {
    context.beginPath();
    context.moveTo(120, 50);
    context.lineTo(250, 80);
    context.lineTo(150, 170);
    context.closePath();
    context.fillStrokeShape(this);
  },
});

// Create circle
const circle = new Konva.Circle({
  x: 250,
  y: stage.height() / 2,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
  radius: 70,
});

// Create tooltip
const tooltip = new Konva.Text({
  text: '',
  fontFamily: 'Calibri',
  fontSize: 12,
  padding: 5,
  textFill: 'white',
  fill: 'black',
  alpha: 0.75,
  visible: false,
});

// Add event listeners for triangle
triangle.on('mousemove', () => {
  const mousePos = stage.getPointerPosition();
  tooltip.position({
    x: mousePos.x + 5,
    y: mousePos.y + 5,
  });
  tooltip.text('Cyan Triangle');
  tooltip.show();
});

triangle.on('mouseout', () => {
  tooltip.hide();
});

// Add event listeners for circle
circle.on('mousemove', () => {
  const mousePos = stage.getPointerPosition();
  tooltip.position({
    x: mousePos.x + 5,
    y: mousePos.y + 5,
  });
  tooltip.text('Red Circle');
  tooltip.show();
});

circle.on('mouseout', () => {
  tooltip.hide();
});

// Add shapes and tooltip to layers
shapesLayer.add(triangle);
shapesLayer.add(circle);
tooltipLayer.add(tooltip);

// Add layers to stage
stage.add(shapesLayer);
stage.add(tooltipLayer);

Open Sandbox

React

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

const CustomShape = ({ onMouseMove, onMouseOut }) => {
  return (
    <Shape
      stroke="black"
      fill="#00D2FF"
      strokeWidth={1}
      sceneFunc={(context, shape) => {
        context.beginPath();
        context.moveTo(120, 50);
        context.lineTo(250, 80);
        context.lineTo(150, 170);
        context.closePath();
        context.fillStrokeShape(shape);
      }}
      onMouseMove={onMouseMove}
      onMouseOut={onMouseOut}
    />
  );
};

const App = () => {
  const [tooltipPos, setTooltipPos] = React.useState({ x: 0, y: 0 });
  const [tooltipText, setTooltipText] = React.useState('');
  const [isTooltipVisible, setTooltipVisible] = React.useState(false);

  const handleMouseMove = (e, text) => {
    const stage = e.target.getStage();
    const pos = stage.getPointerPosition();
    setTooltipPos({
      x: pos.x + 5,
      y: pos.y + 5,
    });
    setTooltipText(text);
    setTooltipVisible(true);
  };

  const handleMouseOut = () => {
    setTooltipVisible(false);
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <CustomShape
          onMouseMove={(e) => handleMouseMove(e, 'Cyan Triangle')}
          onMouseOut={handleMouseOut}
        />
        <Circle
          x={250}
          y={window.innerHeight / 2}
          radius={70}
          fill="red"
          stroke="black"
          strokeWidth={4}
          onMouseMove={(e) => handleMouseMove(e, 'Red Circle')}
          onMouseOut={handleMouseOut}
        />
      </Layer>
      <Layer>
        <Text
          x={tooltipPos.x}
          y={tooltipPos.y}
          text={tooltipText}
          fontFamily="Calibri"
          fontSize={12}
          padding={5}
          textFill="white"
          fill="black"
          alpha={0.75}
          visible={isTooltipVisible}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageConfig">
    <v-layer>
      <v-shape
        :config="{
          stroke: 'black',
          fill: '#00D2FF',
          strokeWidth: 1,
          sceneFunc: drawTriangle,
        }"
        @mousemove="(e) => handleMouseMove(e, 'Cyan Triangle')"
        @mouseout="handleMouseOut"
      />
      <v-circle
        :config="{
          x: 250,
          y: stageConfig.height / 2,
          radius: 70,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 4,
        }"
        @mousemove="(e) => handleMouseMove(e, 'Red Circle')"
        @mouseout="handleMouseOut"
      />
    </v-layer>
    <v-layer>
      <v-text
        :config="{
          ...tooltipConfig,
          visible: isTooltipVisible,
        }"
      />
    </v-layer>
  </v-stage>
</template>

<script setup>
import { ref, computed } from 'vue';

const stageConfig = {
  width: window.innerWidth,
  height: window.innerHeight,
};

const tooltipPos = ref({ x: 0, y: 0 });
const tooltipText = ref('');
const isTooltipVisible = ref(false);

const tooltipConfig = computed(() => ({
  x: tooltipPos.value.x,
  y: tooltipPos.value.y,
  text: tooltipText.value,
  fontFamily: 'Calibri',
  fontSize: 12,
  padding: 5,
  textFill: 'white',
  fill: 'black',
  alpha: 0.75,
}));

const drawTriangle = (context, shape) => {
  context.beginPath();
  context.moveTo(120, 50);
  context.lineTo(250, 80);
  context.lineTo(150, 170);
  context.closePath();
  context.fillStrokeShape(shape);
};

const handleMouseMove = (e, text) => {
  const stage = e.target.getStage();
  const pos = stage.getPointerPosition();
  tooltipPos.value = {
    x: pos.x + 5,
    y: pos.y + 5,
  };
  tooltipText.value = text;
  isTooltipVisible.value = true;
};

const handleMouseOut = () => {
  isTooltipVisible.value = false;
};
</script>

Open Sandbox

操作说明：将鼠标移到图形上以显示工具提示。工具提示会跟随指针，并显示每个图形的信息。