1

Chrome が正しくレンダリングされなくなったため、4.0.5 から 4.4.1 にアップグレードしました。

ただし、バージョン 4.0.5 では、Kinetic.Shape オブジェクトに線を描画し、その上でマウス イベントを検出することができました。これはもはや当てはまらないようです。推奨される Canvas.fillStroke(this) 呼び出しを使用する場合でも。

ここにいくつかのコードがあります：

var myshape = new Kinetic.Shape({
    drawFunc: function(canvas) {
        var context = canvas.getContext();
        context.beginPath();
        context.setLineWidth(20);
        context.moveTo(100, 10);
        context.lineTo(100, 60);
        context.closePath();
        context.stroke(); //this does
        //canvas.fillStroke(this); //this doesn't bring the line on the screen
        //context.fill(); //this doesn't make the event work either
        context.beginPath();
        context.setLineWidth(10);
        context.moveTo(100, 60);
        context.lineTo(100, 120);
        context.closePath();
        //canvas.fillStroke(this); //this doesn't bring the line on the screen
        context.stroke(); //this does
        canvas.fillStroke(this);
    },
    draggable: true
});


myshape.on('mousedown', function(event){
    alert('mousedown');
});

このフィドルの例: http://jsfiddle.net/GDQ6G/ (Chrome でのみ行をレンダリングするようです。Firefox ではありません)

このテスト ページの別の例: http://www.planetinaction.com/linetest.htm

このコードは Firefox でレンダリングされないため、何か間違っていることは明らかです。これがリンクされたフィドルで行われていることを誰かに見せてもらえますか? 形状のドキュメントには、単一のアイテムを描画する方法が示されています。この単純化された 2 行の例で示されているように、複数のアイテムを描画してカスタム シェイプを形成する必要があります。

4

2 に答える 2

1

各 KineticJS シェイプには、1 つの beginPath() と 1 つの closePath() の実行のみが必要です。また、コンテキストを使用して直接ストロークしたり塗りつぶしたりしないでください。KineticJS キャンバス レンダラーに関連付けられたメソッドを使用する必要があります。

canvas.stroke(これ); canvas.fill(これ); canvas.fillStroke(これ);

カスタム シェイプを描画する例を次に示します。

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

そのチュートリアルの三角形に単純なリスナーをバインドすると、イベントが正しく発生します (ページ上でコードを変更できます)。

于 2013-04-08T04:04:28.350 に答える