如何在Konva可拖拽图片栈中实现点击图片置顶功能？

我正在用JavaScript开发一个简易网站，目标是实现支持拖拽的图片栈功能，目前已经完成拖拽效果，但需要新增功能：将最后点击的图片置于所有图片的最上层。

以下是我的Konva实现代码：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@8.4.0/konva.min.js"></script>
    <meta charset="utf-8" />
    <title></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();
      stage.add(layer);

      var img1 = new Konva.Image({
        x: 20,
        y: 20,
        width: 400,
        height: 566,
        draggable: true,
      });
      layer.add(img1);

      var img2 = new Konva.Image({
        x: 100,
        y: 20,
        width: 400,
        height: 566,
        draggable: true,
      });
      layer.add(img2);

      var imageObj1 = new Image();
      imageObj1.onload = function () {
        img1.image(imageObj1);
      };
      imageObj1.src = 'imgs/img1.jpg';

      var imageObj2 = new Image();
      imageObj2.onload = function () {
        img2.image(imageObj2);
      };
      imageObj2.src = 'imgs/img2.jpg';
    </script>
  </body>
</html>

我还看到一段jQuery代码，但不知道怎么适配到当前项目：

$("img.myclass").click(function() {
     $("img.myclass").not(this).css("z-index", 0);
     $(this).css("z-index", 100);
});

请问该如何实现需求？

Konva是基于Canvas的框架，不能直接用DOM的z-index控制层级，它有自己的层级管理API，核心思路是给每个图片绑定点击事件，点击时将当前图片移到图层最顶层。

具体实现步骤 #

1. 封装通用点击事件处理函数，调用Konva的moveToTop()方法将目标图片移到图层最上层，再刷新图层生效。
2. 给每个Konva.Image实例绑定该点击事件。

修改后的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@8.4.0/konva.min.js"></script>
    <meta charset="utf-8" />
    <title></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();
      stage.add(layer);

      // 通用点击事件：将点击的图片移到最上层
      function bringToTop(e) {
        const targetImg = e.target;
        targetImg.moveToTop();
        layer.draw(); // 刷新图层，让层级变更生效
      }

      var img1 = new Konva.Image({
        x: 20,
        y: 20,
        width: 400,
        height: 566,
        draggable: true,
      });
      img1.on('click', bringToTop);
      layer.add(img1);

      var img2 = new Konva.Image({
        x: 100,
        y: 20,
        width: 400,
        height: 566,
        draggable: true,
      });
      img2.on('click', bringToTop);
      layer.add(img2);

      var imageObj1 = new Image();
      imageObj1.onload = function () {
        img1.image(imageObj1);
        layer.draw();
      };
      imageObj1.src = 'imgs/img1.jpg';

      var imageObj2 = new Image();
      imageObj2.onload = function () {
        img2.image(imageObj2);
        layer.draw();
      };
      imageObj2.src = 'imgs/img2.jpg';
    </script>
  </body>
</html>

补充说明 #

• Konva元素的层级由其在图层中的添加顺序决定，后添加的默认在上方，moveToTop()会直接将元素调整到图层的最后一位（视觉最上层）。
• 后续新增图片时，只需给新的Konva.Image实例绑定bringToTop函数即可，无需重复编写逻辑。
• 你看到的jQuery代码是操作DOM元素的层级方式，不适用于Konva的Canvas绘制体系，必须用Konva提供的API管理层级。

内容的提问来源于stack exchange，提问作者Piste_Cyclable