Konva js - разный фон подсказки (условный) - PullRequest
Новая
       15

Konva js - разный фон подсказки (условный)

0 голосов
/ 18 апреля 2020

Я пытался проанализировать и написать собственный код, но я не понял. Это следующий пример в документации Konva JS: https://konvajs.org/docs/sandbox/Interactive_Building_Map.html

Можно ли сделать фон подсказок таким же, как в соответствующей области? Ie. когда вы наводите курсор на красную область, фон всплывающей подсказки должен быть красным. Я полагаю, что я должен написать свой код внутри для l oop.

Другой пример: https://konvajs.org/docs/sandbox/20000_Nodes.html Фон подсказки должен совпадать с цветом точки.

1 Ответ

0 голосов
/ 20 апреля 2020

Когда вы запускаете событие для фигуры, вы можете изменить цвет всплывающей подсказки: 

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>
...