1

rgba 色を使用する RaphaelJS でグラデーション塗りつぶしを作成しようとしています。つまり、開始点と終了点の両方にある程度の透明度が必要です。たとえば、20% の黒から 0% の黒。これはどのように行われますか？

このフィドルは、これが達成されると私が期待する方法ですが、ご覧のとおり、下部の黒は完全に不透明です。http://jsfiddle.net/4aPj2/

r.circle(50,50,50).attr({fill:'90-rgba(0,0,0,0)-rgba(0,0,0,0.2)',opacity:0})
4

2 に答える 2

0

回避策はありますが、それには編集が必要ですraphael.js

コード ブロックを見つけます。

el.appendChild($("stop", {
    offset: dots[i].offset ? dots[i].offset : i ? "100%" : "0%",
        "stop-color": dots[i].color || "#fff"
}));

そして、次を使用して置き換えます。

el.appendChild($("stop", {
    offset: dots[i].offset ? dots[i].offset : i ? "100%" : "0%",
        "stop-color": dots[i].color || "#fff",
        "stop-opacity": R.is(dots[i].opacity, "undefined") ? 1 : dots[i].opacity
}));

更新: 後で、パッチから 1 行の変更を誤って見逃していたことに気付きました。

次に、関数内で次の行を見つけますR._parseDots

par[2] && (dot.offset = par[2] + "%");

そしてそれを

dot.opacity = dot.color.opacity;
par[2] && (dot.offset = par[2] + "%");

上記のコードでは、次のようなものを簡単に使用できますがmyRect.attr("fill", "90-rgba(255,0,0,0.25)-rgba(0,255,0,0.75)-rgba(0,0,255,0.25)");、ソリューションは SVG 出力用であり、VML はこれをサポートしていないことに注意してください。VML は、0% の位置でグラデーションの単一の不透明度のみをサポートし、オプションで 100% の位置で最後の不透明度の 2 番目の不透明度をサポートします。ここには含めていない VML のコード変更がさらにいくつかあります。

コードは、フィドルhttp://jsfiddle.net/shamasis/SYdJW/で実際に見ることができます

于 2013-04-27T12:08:35.353 に答える