mouseover, mouseout 仅适用于最大的形状

Question

嗨，我正在使用 Kinetic 从通过 json 发送的数据中绘制一些气泡。 我的代码似乎可以正常工作并且可以很好地生成气泡。 我试图从鼠标悬停的效果开始，然后下一个目标是为每个气泡生成一个工具提示， 但是目前鼠标悬停只能在最大的气泡上工作？ 任何人都可以看到我的代码有什么问题

我添加了一张图片，你可以看到是什么

<script >
    var stage = new Kinetic.Stage({
      container: 'graph',
      width: 1000,
      height: 1000
    });
    var layer = new Kinetic.Layer();
    // setup graph padding
    var graph;
    var xPadding = 30;
    var yPadding = 30;

    var drawGraph = new Kinetic.Shape ({
      sceneFunc: function(ctx){
        ctx.beginPath();
        ctx.moveTo(xPadding, 0);
        ctx.lineTo(xPadding, stage.height() - yPadding);
        ctx.lineTo(stage.width(), stage.height() - yPadding);
        //Draw the X value texts
        // for(var i = 0; i < projects.values.length; i ++) {
        //     ctx.fillText(data.values[i].X, getXPixel(i), graph.height() - yPadding + 20);
        //  }

        // Draw the Y value texts
         ctx.textAlign = "right"
         ctx.textBaseline = "middle";
         ctx.fillStyle = '#333';
         for(var i = 0; i < getMaxY(); i += 5) {
            ctx.fillText((i), xPadding - 15, getYPixel(i));
        }
        ctx.fillStrokeShape(this);
      },
      stroke: 'black',
      strokeWidth: 1
    });![enter image description here][2]     

    $.getJSON( "bubble_data.json", function( data ) {
        var maxHour= data.max_hour_task; 
        $.each( data.projects, function(i) {
            //calculate the number of days between two dates
            var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
            var startOfQ = new Date(2014,00,00);
            var startDate = new Date(data.projects[i].summary.created_on);
            var endDate = new Date(data.projects[i].summary.target_date);
            var startDayPos = (Math.round(Math.abs((startOfQ.getTime() - startDate.getTime())/(oneDay))))*6;
            var diffDays = (Math.round(Math.abs((startDate.getTime() - endDate.getTime())/(oneDay))))*6;
            var endDayPos = startDayPos + diffDays ;
            hours=(data.projects[i].summary.total_hours);
            base = stage.height() - yPadding;
            getMaxY(hours);
            hours_scale =((stage.height()-(stage.height() - (((stage.height() - yPadding) / maxHour)))) *hours)
            total_hours = 970 - hours_scale;
            var bubble = new Kinetic.Shape({
              sceneFunc: function(ctx) {
              var x=this.myX;
              var y=this.myY;
              var w=this.myW;
              var h=this.myH;
              var kappa = .5522848,
              ox = (w / 2) * kappa, // control point offset horizontal
              oy = (h / 2) * kappa, // control point offset vertical
              xe = x + w,           // x-end
              ye = y + h,           // y-end
              xm = x + w / 2,       // x-middle
              ym = y + h / 2;       // y-middle
              ctx.beginPath();
              ctx.moveTo(x, ym);
              ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
              ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
              ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
              ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
              ctx.closePath();
              ctx.fillStrokeShape(this);

              },
              fill: 'rgba(142, 214, 255, 0.1)',
              stroke: 'black',
              strokeWidth: 1
            });
            bubble.myX=startDayPos;
            bubble.myY=base;
            bubble.myW=endDayPos;
            bubble.myH=-hours_scale;

            bubble.on('mouseover', function() {
              console.log(this);
              this.fill('blue');
              bubble.draw();
            });

            bubble.on('mouseout', function() {
              console.log(this);
              this.fill('rgba(142, 214, 255, 0.1)');
              bubble.draw();
            });
            layer.add(bubble);
        });
        layer.add(drawGraph);
        stage.add(layer);
    }); 


    function getMaxY() {
        var max = 0;
            if(hours > max) {
            max = hours;
            }
        max += 10 - max % 10;
        return max;

    }

    // // function getXPixel(val) {
    // //     return ((graph.width() - xPadding) / projects.values.length) * val + (xPadding * 1.5);
    // // }

    function getYPixel(val) {
        return stage.height() - (((stage.height() - yPadding) / getMaxY()) * val) - yPadding;

    }


    </script>

Answer 1

请记住，Kinetic 为每个形状维护一个 z-index - 即使是半透明形状。

因此，您的 mouseover 和 mouseout 事件将仅针对鼠标下的 topmost 形状（并非针对鼠标下的所有形状）触发

如果您想为鼠标下的所有形状触发工具提示，您可以使用stage.getAllIntersections

注意：.getAllIntersections 是一项计算量很大的操作，因此在使用它时会影响性能。