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 に答える