-1

だから、私はできる限りこれを説明しようとします: 私はタッチするオブジェクトの束を持つキャンバスを持っています。ここではオブジェクト「アプリケーション」と「エンタープライズ」の 2 つの例のみを示していますが、これらのオブジェクトは多数あります。私の目標は、1 つのオブジェクトにホバー イメージを表示し、残りのオブジェクトには表示しないようにすることです。別のオブジェクトをクリックすると、そのオブジェクトのホバー画像がアクティブになり、他のすべてのオブジェクトのホバー画像が削除されます(基本的に「タッチされたマウスアウト」機能を取り除きます.

「このオブジェクトをタッチスタート/マウスオーバーした場合、そのホバー画像を使用し、他のすべてのオブジェクトのすべてのホバー画像を無効にします。

applications.on('touchstart mouseover', function() {
                        writeMessage(messageLayer, 'touchstart applications circle');
                        this.setFill({ image: images.applicationshover});
                        layer.draw();
                    });
applications.on('touchend mouseout', function() {
                        writeMessage(messageLayer, 'Mouseup applications circle');
                        this.setFill({ image: images.applicationsimage});
                        layer.draw();
                    });

enterprises.on('touchstart mouseover', function() {
                        writeMessage(messageLayer, 'touchstart enterprises circle');
                        this.setFill({ image: images.enterpriseshover});
                        layer.draw();
                    });
enterprises.on('touchend mouseout', function() {
                        writeMessage(messageLayer, 'Mouseup enterprises circle');
                        this.setFill({ image: images.enterprisesimage});
                        layer.draw();
                    });
4

1 に答える 1

1

微調整する例がなければ、ほとんど知らないことへの質問に答えるのは嫌いですが、ここに行きます....

何をする代わりに、これを試してみませんか....
形状/画像を作成するときに、ホバー状態ではなくホバー状態に使用する画像である属性をそれらに追加します。
なんかこう……。 

 var thing = new Kinetic.Image({
            x: 0,
            y: 0,
            image: imageObj,
            hoverImage: hoverImageObj,
            notHoverImage: imageObj,
            name: 'image'
        });

次に、すべての画像に対して1つのルーチンを作成できます... 

var hover = function() {
        writeMessage(messageLayer, 'touchstart enterprises circle');
        this.setFill({
            image: this.attrs.hoverImage
        });
        layer.draw();
    }

var notHover = function() {
        writeMessage(messageLayer, 'Mouseup enterprises circle');
        this.setFill({
            image: this.attrs.notHoverImage
        });
        layer.draw();
    }

icons.on('touchstart mouseover', hover);
icons.on('touchend mouseout', notHover);

これを行うにはもっと良い方法があるかもしれません。私は本当にドキュメントを読みに行かなければなりません ;)

于 2012-12-16T17:21:02.350 に答える