Question

当鼠标悬停在圆圈上时，我正在使用以下内容更改光标的样式：

            circle1.on('mouseover', function () {
                document.body.style.cursor = 'pointer';
            });
            circle1.on('mouseout', function () {
                document.body.style.cursor = 'default';
            });

如果我使用以下方法绘制圆圈，它会很有效。

  var circle1 = new Kinetic.Circle({
            x: 512,
            y: 512,
            radius: 140,
            stroke: '#00ffff',
            strokeWidth: 4,
            opacity: 0.5
        });

但是，如果我使用：

var circle1 = new Kinetic.Circle({
                drawFunc: function (canvas) {
                    var context1 = canvas.getContext();
                    context1.beginPath();
                    context1.arc(512, 512, this.getRadius(), 0, 2 * Math.PI, false);
                    context1.lineWidth = this.getStrokeWidth();
                    context1.strokeStyle = this.getStroke();
                    context1.stroke();
                },
                radius: 140,
                stroke: '#00ffff',
                strokeWidth: 15,
                opacity: 0.5
            });

它不起作用！光标不会改变它的风格;我们可以只使用半径鼠标悬停。我要感谢你的建议，提前谢谢。

Answer 1

据我所知，你还需要定义“drawHitFunc”：

circle1.setDrawHitFunc(function (canvas) {
                var context2 = canvas.getContext();
                context2.beginPath();
                context2.arc(100, 100, this.getRadius(), 0, 2 * Math.PI, false);
               context2.closePath();
                canvas.fillStroke(this);
            });

示例：http://jsfiddle.net/lavrton/4DJdU/1/

Answer 2

不，你只需要在创建自定义形状时正确构造drawFunc。这是一个例子：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/

问题是你正在使用context.stroke（）。你需要使用canvas.stroke（this）;

任何时候你实际渲染某些东西，比如笔触和填充，你需要使用画布渲染器对象，因为它绘制了场景图（你看到的）和专门的命中图（用于事件检测）

文档：

http://kineticjs.com/docs/symbols/Kinetic.Canvas.php

KineticJS鼠标悬停圈 - 光标样式

2 个答案: