2

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

            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
            });

这没用！光标不改变其样式；我们可以只使用半径鼠标悬停吗？我会很感激你的建议，在此先感谢。

4

2 回答 2

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/

于 2013-03-22T01:16:05.197 回答
0

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

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

问题是您正在使用 context.stroke()。您需要使用 canvas.stroke(this);

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

文件：

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

于 2013-03-27T01:26:30.940 回答