Question

在RaphaelJS中，我使用路径功能绘制黑线。这条线是可拖动的，但由于它的宽度很难在平板电脑上拖动。我喜欢做的是用透明的“边框”填充线条。通过这种方式，线条看起来不会更宽，但是在平板电脑设备上会有更多区域可供使用。有没有简单的方法来实现这个目标？

以下是我如何绘制线条的示例：

paper.path("M 150 250 h 200").attr({
fill: "#ff0",
gradient: "90-#526c7a-#64a0c1",
stroke: "#3b4449",
"stroke-width": 5
});

Answer 1

答案可能取决于它是否会覆盖其他一些对象等。如果其他解决方案不起作用，您可以尝试将2个对象分组到一个集合中，并将其中一个作为触发点。所以喜欢以下......

var set = r.set();
var rect = r.rect(200,200,50,70).attr({ fill: 'red' });

set.push(
   r.path("M 150 250 h 200").attr({
    fill: "#ff0",
    gradient: "90-#526c7a-#64a0c1",
    stroke: "#3b4449",
    "stroke-width": 5
    })
    );
set.push( 
  r.path("M 150 250 h 200").attr({
    fill: "#ff0",
    gradient: "90-#526c7a-#64a0c1",
    stroke: "#3b4449",
    "stroke-width": 20,
    "stroke-opacity": 0.05,
    "stroke-linecap": "round"
    })
);

set.mouseover(function(){
alert('mouse over');
});

在http://jsfiddle.net/Ap29U/2/上有一个小提琴显示在另一个物体上（不透明度可以进一步调整，0.01可能会使它非常隐蔽）。我还在http://jsfiddle.net/Ap29U/3/添加了一个小提琴，展示了如何让它们一起移动。

RaphaelJS：在中心打造一条坚固的线条并拥有透明的“边框”

1 个答案: