3

我有一些用 paper.path() 创建的形状，我想填充它们（用于单击和拖动）和透视。但是当我将不透明度设置为零时，形状的轮廓（笔触）以及内部都会消失。反正有没有让我的形状内部的不透明度为0？

我尝试过的两件事：

(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) 创建 opacity-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-events: 'all' 会给你你正在寻找的结果。

于 2013-08-23T10:31:14.440 回答
0

http://jsfiddle.net/uWKdx/

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

请注意，在链接版本中，笔触不透明度设置为 0，并且出现了元素填充：

http://jsfiddle.net/uWKdx/1/

关于拖……有什么问题吗？

于 2013-08-22T21:34:57.720 回答