拖放多个图片与边框高亮显示

本演示展示了如何实现图片的高亮效果。当鼠标悬停在图片上时，边框消失，当鼠标移开时，边框重新出现。

说明： 将鼠标悬停在图片上以隐藏其边框，然后在舞台上拖动它们。

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 darthVaderImg = new Konva.Image({
  x: 20,
  y: 20,
  width: 200,
  height: 137,
  stroke: 'red',
  strokeWidth: 10,
  draggable: true,
});
layer.add(darthVaderImg);

// 创建尤达图片
const yodaImg = new Konva.Image({
  x: 240,
  y: 20,
  width: 93,
  height: 104,
  draggable: true,
  stroke: 'red',
  strokeWidth: 10,
});
layer.add(yodaImg);

// 加载达斯·维德图片
const imageObj1 = new Image();
imageObj1.onload = function () {
  darthVaderImg.image(imageObj1);
};
imageObj1.src = 'https://konvajs.org/assets/darth-vader.jpg';

// 加载尤达图片
const imageObj2 = new Image();
imageObj2.onload = function () {
  yodaImg.image(imageObj2);
};
imageObj2.src = 'https://konvajs.org/assets/yoda.jpg';

// 使用事件委托更新指针样式和边框
layer.on('mouseover', function (evt) {
  const shape = evt.target;
  document.body.style.cursor = 'pointer';
  shape.strokeEnabled(false);
});

layer.on('mouseout', function (evt) {
  const shape = evt.target;
  document.body.style.cursor = 'default';
  shape.strokeEnabled(true);
});

Open Sandbox

React

import { useState } from 'react';
import { Stage, Layer, Image } from 'react-konva';
import { useImage } from 'react-konva-utils';

const DraggableImage = ({ src, x, y, width, height }) => {
  const [image] = useImage(src);
  const [isHovered, setIsHovered] = useState(false);
  
  return (
    <Image
      image={image}
      x={x}
      y={y}
      width={width}
      height={height}
      stroke="red"
      strokeWidth={10}
      strokeEnabled={!isHovered}
      draggable
      onMouseEnter={() => {
        setIsHovered(true);
        document.body.style.cursor = 'pointer';
      }}
      onMouseLeave={() => {
        setIsHovered(false);
        document.body.style.cursor = 'default';
      }}
    />
  );
};

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <DraggableImage
          src="https://konvajs.org/assets/darth-vader.jpg"
          x={20}
          y={20}
          width={200}
          height={137}
        />
        <DraggableImage
          src="https://konvajs.org/assets/yoda.jpg"
          x={240}
          y={20}
          width={93}
          height={104}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageConfig">
    <v-layer ref="layerRef">
      <v-image
        v-for="(img, index) in images"
        :key="index"
        :config="getImageConfig(img, index)"
        @mouseenter="handleMouseEnter(index)"
        @mouseleave="handleMouseLeave(index)"
      />
    </v-layer>
  </v-stage>
</template>

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

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

const layerRef = ref(null);
const hoveredIndex = ref(null);
const loadedImages = ref({});

// 定义图片数据
const images = ref([
  {
    src: 'https://konvajs.org/assets/darth-vader.jpg',
    x: 20,
    y: 20,
    width: 200,
    height: 137
  },
  {
    src: 'https://konvajs.org/assets/yoda.jpg',
    x: 240,
    y: 20,
    width: 93,
    height: 104
  }
]);

// 加载图片
onMounted(() => {
  images.value.forEach((img, index) => {
    const imageObj = new Image();
    imageObj.onload = () => {
      loadedImages.value = {
        ...loadedImages.value,
        [index]: imageObj
      };
    };
    imageObj.src = img.src;
  });
});

// 获取每张图片的配置
const getImageConfig = (img, index) => {
  const isHovered = hoveredIndex.value === index;
  
  return {
    image: loadedImages.value[index],
    x: img.x,
    y: img.y,
    width: img.width,
    height: img.height,
    stroke: 'red',
    strokeWidth: 10,
    strokeEnabled: !isHovered,
    draggable: true
  };
};

// 鼠标事件处理程序
const handleMouseEnter = (index) => {
  hoveredIndex.value = index;
  document.body.style.cursor = 'pointer';
};

const handleMouseLeave = () => {
  hoveredIndex.value = null;
  document.body.style.cursor = 'default';
};
</script>

Open Sandbox