0

これは、パス内に入力しようとしたときの現在の結果です： スクリーンショット 。

ストロークは正しいが、塗りはそうではないことに注意してください： jsfiddle 。

塗りつぶしルールを見てきましたが、あまり効果がないようです。問題は、形が適切に閉じないことだと思います。

助けてください！

これは、上記に対して生成されたsvgです。

<svg height="75" version="1.1" width="150" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: 0px; top: 0px;"><desc>Created with Raphaël 2.1.0</desc><defs/>
<path style="" fill="#949598" stroke="#000000" d="M75,75L150,75.00000000000001A75,75,0,0,0,0,74.99999999999999M75,75L45,75A30,30,0,1,1,105,75.00000000000001Z" stroke-width="0"/>
<path style="fill-opacity: 1.2;" fill="#c9532f" stroke="#00ff00" d="M75,75M48.144896960365074,4.972837836089695A75,75,0,0,0,0,74.99999999999999M75,75M64.25795878414603,46.989135134435884A30,30,0,0,0,45,75M64.25795878414603,46.989135134435884L48.144896960365074,4.972837836089695M45,75L0,75Z" stroke-width="1" fill-opacity="1.2"/>
<circle cx="75" cy="75" r="5" fill="#333333" stroke="#000" style="" stroke-width="0"/>    
</svg>
4

1 に答える 1

1

小さいドーナツへのパスは、ページを飛び回る4つの部分に描かれています。これは、形状の内側と外側を決定する際にRaphaelを混乱させるように見えます。（私はそれがこの決定をどのように行うかについて正確に話すことはできません。）

最も簡単な解決策は、ページから「ペンを持ち上げる」ことなく、つまり、最初に1つの「M」のみを使用するようにパス文字列を作成することによって形状を描画することです。これはすべての形で可能というわけではありませんが、あなたの場合は非常に簡単です。以下では、新しい座標にジャンプすることなく、パスがバラバラに描画されるようにパスを再配置しました。

var p2 = paper.path("M48.1,5A75,75,0,0,0,0,75L45,75A30,30,0,0,1,64.2,47L48.1,5").attr("fill", "#c9532f");

（読みやすくするために値も丸めました。小数点以下10桁のピクセル値は必要ありません）。

ご覧のとおり、これは同じ場所から始まり、外側の曲線を0.75に描画し、内側の曲線の下部に線を描画し、内側の曲線を時計回りに描画してから、元のポイントに再接続します。内側の曲線を逆方向に正しく描画するには、2番目のブール値である「スイープフラグ」を0から1に変更する必要があることに注意してください。

一般に、パスを手で描くのと同じ方法で（可能な場合は）作成し、目玉に戻ったときに一貫性を保つことをお勧めします。

これが全体です：

var paper = Raphael(0, 0, 800, 600);    
var p1 = paper.path("M75,75L150,75.00000000000001A75,75,0,0,0,0,74.99999999999999M75,75L45,75A30,30,0,1,1,105,75.00000000000001Z").attr("fill", "#949598");

var p2 = paper.path("M48.1,5A75,75,0,0,0,0,75L45,75A30,30,0,0,1,64.2,47L48.1,5").attr("fill", "#c9532f");  

var c = paper.circle(64.2,47, 5).attr("fill", "#333333");
于 2013-01-11T20:04:20.457 に答える