Question

我有一个KineticJS形状，绘制出一端较宽的贝塞尔曲线。它绘制正确，但我还不能检测到它上面的'鼠标悬停'事件。我在：

创建了一个小型的JSFiddle异常演示

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

非常感谢所有人提供任何信息！

   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

你能把它定义为一个SVG元素，然后给它一个onmouseover吗？

Answer 2

修正了它！更改显示在原始帖子的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
                });

无法在此KineticJS形状上检测鼠标悬停？

2 个答案: