12

マウスが要素上にあるときにグローがあり、マウスが離れるとグローが削除されるように、ラファエル要素のホバーを設定しようとしています。グローを追加する方法を見つけましたが、削除するのに苦労しています。私のスクリプトは次のようになります。

$(document).ready(function() {
    var paper = Raphael(0,0,360,360);
    var myCircle = paper.circle(180,180,30).attr('stroke','#FFF');
    myCircle.hover(function() {
        myCircle.glow().attr('stroke','#FFF');
    }, function() {
        // removing the glow from the circle??
    });
});

そのため、ホバーしたときに円にグローを追加することが機能します。ただし、マウスが円要素から離れたときにグローを削除する方法がわかりません。要素からグローを削除する方法を知っていますか?

注: body 要素の背景は黒 (#000) に設定されています。

使用したライブラリ:

  • JQuery
  • Raphael.js
4

5 に答える 5

36

解決策は、おそらくあなたが考えていたよりも簡単です。

http://jsfiddle.net/vszkW/2/ (Matt のフィドルからのフォーク)

要素である「輝き」をストックするだけです。Raphael ではいつものように、要素には .remove() があります。

myCircle.hover(
    // When the mouse comes over the object //
    // Stock the created "glow" object in myCircle.g
    function() {
        this.g = this.glow({color: "#FFF", width: 100});
    },
    // When the mouse goes away //
    // this.g was already created. Destroy it!
    function() {
        this.g.remove();
    });
于 2011-12-08T16:17:25.740 に答える
3

よし、ちょっとハック。

グローは実際には要素の配列であるため、グローを簡単に削除することはできません。何らかの理由で、それらをキャプチャして釘付けにする removeGlow 関数がまだないためです。

これが私が思いついたものです。私は実際にこの機能を必要とするプロジェクトを現在持っており、それを修正するためにここに来て、あなたの投稿を見たら何か思いつくと思いました.

では、ステップ 1:

init の上に空の配列を追加します。これによりグローが保持されます。

var growsToBeRemoved = [];

ステップ 2: raphael.js に移動し、(elproto.glow 内で) 以下を見つけます。

for (var i = 1; i < c + 1; i++) {
        out.push(r.path(path).attr({
            stroke: s.color,
            fill: s.fill ? s.color : "none",
            "stroke-linejoin": "round",
            "stroke-linecap": "round",
            "stroke-width": +(s.width / c * i).toFixed(3),
            opacity: +(s.opacity / c).toFixed(3)
        }));
    }

この直後 (および return の前) に次を追加します。

glowsToBeRemoved.push(out);

これが行っていることは、作成されたすべてのグローを配列にプッシュすることです。

それらを削除するには、.remove(); でループを作成します。あなたのホバーアウトに。これは次のようになります。

var i = 0;
var size=glowsToBeRemoved.length;
for(i=0; i < size; i++)
{
    glowsToBeRemoved[i].remove();
}

それを関数に分割して、ホバーアウトにアタッチするか、それでやりたいことは何でもできます。

よく見える？

于 2011-11-28T01:28:43.187 に答える
2

Lajarreの答えは間違いなく進むべき道ですが、現在Raphaelにはバグがあり、remove（）メソッドがグロー要素だけでなくグローが適用された要素も削除する原因となっています.

これがラジャールのフィドルでまだ機能している理由は、私の理解を超えています。

この問題の詳細については、 https ://github.com/DmitryBaranovskiy/raphael/issues/508 を参照してください。

于 2012-08-17T09:12:10.537 に答える
1

これは奇妙な動作です。たとえば（私はこれをかなりの時間いじりました）：

http://jsfiddle.net/FPE6y/

私が知る限り、これは起こるべきではありません。おそらくバグです。RaphaelJS は歴史的に、元に戻す操作に問題があるようです: Raphael で要素をドラッグ不可にするにはどうすればよいですか?

申し訳ありませんが、おそらく円が消去され、グローが適用されていない新しい円にすぐに置き換えられることを除いて、解決策を提示できませんか?

それまでの間、GitHub で動作を報告してください (まだ報告されていない場合)。必要に応じて、レポートで私の jsFiddle を参照できます (または、フォークして独自のものを送信します)。

于 2011-11-26T05:46:09.660 に答える