3

グラデーションで塗りつぶされた色の要素で同じレベルの不透明度を維持するのに問題があります

var paper = Raphael(0, 0, 300, 300);

paper.path(["M", 20, 20, "h", 200, "v", 200, "h", -200, "z"]).attr({
"stroke-width": 3,
stroke: 'red',
    "opacity": 0.5,
fill: "90-red-red"
});

http://jsfiddle.net/zhirkovski/vvAaz/1/

ご覧のとおり、グラデーションは 0.5 から始まり、2 番目の色に到達するまでに 1 に増加します。なぜでしょうか? 色を変えてもそのうちの1つが不透明度=1でレンダリングされるのですが、これはバグですか? もしそうなら、回避策はありますか、それとも私が間違っているのでしょうか?

4

1 に答える 1

1

私自身の調査によると、これは VML の制限のように見え、続いて Raphael です。詳細については、次のバグ レポートを参照してください: https://github.com/DmitryBaranovskiy/raphael/issues/211

グラデーションとフェードでできることが本当に制限されており、これは私たち全員にとって悩みの種です. これを行う最善の方法は、jQuery を使用することです。

 // Setting up defaults
 var paper = Raphael("canvas", 200, 200);
 var bgBottom = paper.rect(0, 0, 200, 200).attr({fill: "90-#999-#fff"});
 var bgTop = paper.rect(0, 0, 200, 200).attr({fill: "90-#999-#fff"});

 // New gradient to fade to
 bgBottom.attr({fill: "90-#069-#000"});
 $(bgTop.node).animate({opacity: 0}, 1000);

次に、塗りつぶしの変更で上部をアニメーション化できます。

 bgTop.attr({fill: "90-#f0f-#fff"});
 $(bgTop.node).animate({opacity: 1}, 1000);

デモンストレーションに役立つ私のjsfiddleは次のとおりです。http://jsfiddle.net/spQsf/

お役に立てれば！

于 2013-07-16T08:22:48.297 に答える