3

paper.path() で作成されたいくつかの形状があり、(クリックしてドラッグする目的で) 塗りつぶしてシースルーにしたいと考えています。しかし、不透明度をゼロに設定すると、シェイプのアウトライン (ストローク) と内部が消えてしまいます。図形の内部のみを不透明度 0 にする方法はありますか?

私が試した2つのこと：

(1) "stroke-opacity" 属性の設定。これは役に立ちそうです。たとえば、ここではまだ見えません。

var paper = Raphael(0, 0, "100%", "100%")var t = paper.path( ["M", 100, 100, "L", 150, 150, "L",     100, 300, "L", 100, 100] ).attr({stroke : "black", 
                                                                                     fill :     "white", 
                                                                                     opacity :     0, 
                                                                                     "stroke-    opacity" : 1})

(2) 不透明度 1 のアウトラインを作成して、塗りつぶされていない図形のアウトラインを作成し、これらを塗りつぶされているが透明なオリジナルと一緒に表示します。これは機能しますが、ドラッグするのは面倒です。

より良い解決策はありますか？

4

2 に答える 2

3

塗りつぶしを透明にしたいだけの場合は、不透明度ではなく塗りつぶし不透明度を使用する必要があります。または、塗りつぶしをなしに設定することもできます。

var t = paper.path('M100 100L150 150L100 300L100 100').attr({
    'stroke': 'black', 
    'fill': 'white',
    'fill-opacity': 0,
    'stroke-width': 15,
    'stroke-opacity': 0.5,
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round'
});

また

var t = paper.path('M100 100L150 150L100 300L100 100').attr({
    'stroke': 'black', 
    'fill': 'none',
    'stroke-width': 15,
    'stroke-opacity': 0.5,
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round'
});

ドラッグに関しては、 pointer-eventプロパティを調整する必要があるように聞こえます。おそらく pointer-events: 'all' で探している結果が得られます。

于 2013-08-23T10:31:14.440 に答える