Konvajs - 不同的工具提示背景（有条件）

Question

我尝试分析和编写自定义代码，但我没有弄清楚。 这是 KonvaJS 文档中的以下示例：https://konvajs.org/docs/sandbox/Interactive_Building_Map.html

是否可以使工具提示背景与相应区域相同？ IE。当您将鼠标悬停在红色区域时，工具提示背景应该是红色的。我想我必须在 for 循环中编写代码。

不同的例子：https://konvajs.org/docs/sandbox/20000_Nodes.html 工具提示背景应与点的颜色相同。

Answer 1

当你在一个形状上触发事件时，你可以改变一个工具提示的颜色：

stage.on('mouseover mousemove dragmove', function(evt) {
        var node = evt.target;
        if (node !== stage) {
          tooltip
            .getTag()
            .fill(node.fill());
          tooltipLayer.batchDraw();
        }
});

var width = window.innerWidth;
var height = window.innerHeight;

      function addNode(obj, layer) {
        var node = new Konva.Circle({
          x: obj.x,
          y: obj.y,
          radius: 4,
          fill: obj.color,
          id: obj.id
        });

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

      var tooltipLayer = new Konva.Layer();
      var dragLayer = new Konva.Layer();

      var tooltip = new Konva.Label({
        opacity: 0.75,
        visible: false,
        listening: false
      });

      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.2
        })
      );

      tooltip.add(
        new Konva.Text({
          text: '',
          fontFamily: 'Calibri',
          fontSize: 18,
          padding: 5,
          fill: 'white'
        })
      );

      tooltipLayer.add(tooltip);

      // build data
      var data = [];

      var colors = ['red', 'orange', 'cyan', 'green', 'blue', 'purple'];
      for (var n = 0; n < 20000; n++) {
        var x = Math.random() * width;
        var y = height + Math.random() * 200 - 100 + (height / width) * -1 * x;
        data.push({
          x: x,
          y: y,
          id: n,
          color: colors[Math.round(Math.random() * 5)]
        });
      }

      // render data
      var nodeCount = 0;
      var layer = new Konva.Layer();
      for (var n = 0; n < data.length; n++) {
        addNode(data[n], layer);
        nodeCount++;
        if (nodeCount >= 7000) {
          nodeCount = 0;
          stage.add(layer);
          layer = new Konva.Layer();
        }
      }

      stage.add(dragLayer);
      stage.add(tooltipLayer);

      stage.on('mouseover mousemove dragmove', function(evt) {
        if(evt.target === stage) {
          return;
        }
        var node = evt.target;
        if (node) {
          // update tooltip
          var mousePos = node.getStage().getPointerPosition();
          tooltip.position({
            x: mousePos.x,
            y: mousePos.y - 5
          });
          tooltip
            .getText()
            .text('node: ' + node.id() + ', color: ' + node.fill());
            tooltip.getTag().fill(node.fill());
          tooltip.show();
          tooltipLayer.batchDraw();
        }
      });

      stage.on('mouseout', function(evt) {
        tooltip.hide();
        tooltipLayer.draw();
      });

      var startLayer;

      stage.on('mousedown', function(evt) {
        var shape = evt.target;
        if (shape) {
          startLayer = shape.getLayer();
          shape.moveTo(dragLayer);
          startLayer.draw();
          // manually trigger drag and drop
          shape.startDrag();
        }
      });

      stage.on('mouseup', function(evt) {
        var shape = evt.target;
        if (shape) {
          shape.moveTo(startLayer);
          dragLayer.draw();
          startLayer.draw();
        }
      });

<script src="https://unpkg.com/konva@4.2.2/konva.min.js"></script>
<div id="container"></div>