Question

我正在使用Kinetic从json发送的数据中绘制一些气泡。我的代码似乎工作，并产生气泡罚款。我试图让mouser效果开始，然后下一个雄鹿将为每个气泡产生一个工具提示，但目前鼠标只能用于最大的泡泡？任何人都可以看到我的代码有什么问题

我添加了一张图片，以便您可以看到 being generated

<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指数 - 即使对于半透明形状也是如此。

所以你的鼠标悬停＆amp; mouseout事件将仅触发鼠标下的最顶层形状（不适用于鼠标下的所有形状）

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

注意：.getAllIntersections是一项计算成本较高的操作，因此在使用时会受到性能影响。

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

1 个答案: