mouseover - 无法检测此 KineticJS 形状上的鼠标悬停？

Question

我有一个 KineticJS 形状，它绘制了一条一端更宽的贝塞尔曲线。它正确绘制，但我还无法检测到它上面的“鼠标悬停”事件。我创建了一个关于异常的小型 JSFiddle 演示，位于：

http://jsfiddle.net/VikR0001/nZYxL/6/

如何检测此形状上的“鼠标悬停”事件？

非常感谢大家提供任何信息！

   var mainLayer;

    //bezier curve code:
    //http://stackoverflow.com/questions/8325680/how-to-draw-a-bezier-curve-with-variable-thickness-on-an-html-canvas  
    //draw a bezier curve that gets larger as it flows
    //adapted for use with KineticJS
    function drawBezierCurve() {
        var centerLeft = new Object();
        centerLeft.x = 100;
        centerLeft.y = 400;

        var centerRight = new Object();
        centerRight.x = 400;
        centerRight.y = 100;

        var thicknessLeft = 1;
        var thicknessRight = 50;
        var color = "#000";

        var context = mainLayer.getContext();
        var leftUpper = {
            x: centerLeft.x,
            y: centerLeft.y - thicknessLeft / 2
        };
        var leftLower = {
            x: centerLeft.x,
            y: leftUpper.y + thicknessLeft
        };
        var rightUpper = {
            x: centerRight.x,
            y: centerRight.y - thicknessRight / 2
        };
        var rightLower = {
            x: centerRight.x,
            y: rightUpper.y + thicknessRight
        };

        var center = (centerRight.x + centerLeft.x) / 2;
        var cp1Upper = {
            x: center,
            y: leftUpper.y
        };
        var cp2Upper = {
            x: center,
            y: rightUpper.y
        };
        var cp1Lower = {
            x: center,
            y: rightLower.y
        };
        var cp2Lower = {
            x: center,
            y: leftLower.y
        };

        var bezierCurve = new Kinetic.Shape({
            drawFunc: function (canvas) {
                var context = mainLayer.getContext();
                context.fillStyle = color;
                context.beginPath();
                context.moveTo(leftUpper.x, leftUpper.y);
                context.bezierCurveTo(cp1Upper.x, cp1Upper.y, cp2Upper.x, cp2Upper.y, rightUpper.x, rightUpper.y);
                context.lineTo(rightLower.x, rightLower.y);
                context.bezierCurveTo(cp1Lower.x, cp1Lower.y, cp2Lower.x, cp2Lower.y, leftLower.x, leftLower.y);
                context.lineTo(leftUpper.x, leftUpper.y);
                context.fill();
                canvas.stroke(this);
            },
            fill: color,
            stroke: color,
            strokeWidth: 1
        });

        bezierCurve.on('mouseover', function (evt) {
            document.body.style.cursor = "pointer";
            $("#debug").html("MOUSEOVER DETECTED."); //<==NEVER CALLED
        });

        bezierCurve.on('mouseout', function (evt) {
            document.body.style.cursor = "default";
            $("#debug").html("MOUSEOUT DETECTED."); //NEVER CALLED
        });

        bezierCurve.setAttrs({
            'leftUpper': leftUpper,
            'leftLower': leftLower,
            'rightUpper': rightUpper,
            'rightLower': rightLower,
            'cp1Upper': cp1Upper,
            'cp2Upper': cp2Upper,
            'cp1Lower': cp1Lower,
            'cp2Lower': cp2Lower
        });

        mainLayer.add(bezierCurve);
        mainLayer.draw();

        $("#debug").html("bezier curve has been drawn onscreen.");
    }
    $(document).ready(function () {
        var stage = new Kinetic.Stage({
            container: 'canvasContainer',
            width: 500,
            height: 500
        });

        mainLayer = new Kinetic.Layer('main');
        stage.add(mainLayer);
        mainLayer.draw();

        drawBezierCurve();
    });

Answer 1

解决它！更改显示在原始帖子中的 jsFiddle 链接中。

                //FIXED!
                //OLD VERSION: DOES NOT WORK
    //          var bezierCurve = new Kinetic.Shape({
    //              drawFunc: function (canvas) {
    //                    var context = mainLayer.getContext();
    //                  context.fillStyle = color;
    //                  context.beginPath();
    //                  context.moveTo(leftUpper.x, leftUpper.y);
    //                  context.bezierCurveTo(cp1Upper.x, cp1Upper.y, cp2Upper.x, cp2Upper.y, rightUpper.x, rightUpper.y);
    //                  context.lineTo(rightLower.x, rightLower.y);
    //                  context.bezierCurveTo(cp1Lower.x, cp1Lower.y, cp2Lower.x, cp2Lower.y, leftLower.x, leftLower.y);
    //                  context.lineTo(leftUpper.x, leftUpper.y);
    //                    context.closePath();
    //                  context.fill();
    //                  canvas.stroke(this);
    //              },
    //              fill: color,
    //              stroke: color,
    //              strokeWidth: 1
    //          });

                //NEW VERSION: WORKS!
                var bezierCurve = new Kinetic.Shape({
                    drawFunc: function (canvas) {
                         var context = canvas.getContext('2d');
                         context.beginPath();
                         context.moveTo(leftUpper.x, leftUpper.y);
                         context.bezierCurveTo(cp1Upper.x,cp1Upper.y, cp2Upper.x,cp2Upper.y, rightUpper.x,rightUpper.y);
                         context.lineTo(rightLower.x, rightLower.y);
                         context.bezierCurveTo(cp1Lower.x,cp1Lower.y, cp2Lower.x,cp2Lower.y, leftLower.x,leftLower.y);
                         context.lineTo(leftUpper.x, leftUpper.y);
                        context.fill();
                        canvas.stroke(this);

                    },
                    fill: color,
                    stroke: color,
                    strokeWidth: 3
                });

Answer 2

你能把它定义为一个 SVG 元素，然后给它一个鼠标悬停吗？