Question

我有一些形状，用paper.path（）创建，我想填充（为了点击和拖动）和透视。但是当我将不透明度设置为零时，形状的轮廓（笔划）以及内部都会消失。无论如何只有我的形状的内部有不透明0？

我尝试了两件事：

（1）设置＆＃34;笔画不透明度＆＃34;属性。这似乎有帮助，例如这里仍然是看不见的：

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概述了我的形状的未填充轮廓，并将这些与填充但透明的原稿一起显示。这有效，但拖延很痛苦。

那里有更好的解决方案吗？

Answer 1

如果您只想使填充透明，则应使用填充不透明度而不是不透明度。或者，您可以将填充设置为无。

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'将为您提供您正在寻找的结果。

Answer 2

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/

关于拖延......它有什么问题？

拉斐尔笔触不透明

2 个答案: