Raphael.js - 对圆圈使用填充属性，使圆圈中的元素消失。如何避免这种情况？

请参阅下面的代码。我想围绕一条路径（由Raphael.js创始人，Dimitry制作的图标）绘制一个圆圈，然后用一种颜色填充该圆圈。然而，这在路径的顶部绘制。如果我可以先绘制实心圆并绘制路径，这将得到解决。但是我需要参考路径，因为我需要找到它的中心，以便绘制圆。任何人都可以请建议如何做到这一点？我的代码如下。Raphael.js - 对圆圈使用填充属性，使圆圈中的元素消失。如何避免这种情况？

谢谢。

<script> 
    var myVar = { 
      s: 1,       
      pw: 850, 
      ph: 450 
     }     
</script> 

<script> 
    var paper = new Raphael('figSellerBuyer', myVar.pw * myVar.s, myVar.ph * myVar.s); 

    var market = paper.path(paths.marketBoundary); 
    market.attr({fill: "rgb(75,245,75)", stroke: "None"}); 


    var humanIcon = paper.path("M21.021,16.349c-0.611-1.104-1.359-1.998-2.109-2.623c-0.875,0.641-1.941,1.031-3.103,1.031c-1.164,0-2.231-0.391-3.105-1.031c-0.75,0.625-1.498,1.519-2.111,2.623c-1.422,2.563-1.578,5.192-0.35,5.874c0.55,0.307,1.127,0.078,1.723-0.496c-0.105,0.582-0.166,1.213-0.166,1.873c0,2.932,1.139,5.307,2.543,5.307c0.846,0,1.265-0.865,1.466-2.189c0.201,1.324,0.62,2.189,1.463,2.189c1.406,0,2.545-2.375,2.545-5.307c0-0.66-0.061-1.291-0.168-1.873c0.598,0.574,1.174,0.803,1.725,0.496C22.602,21.541,22.443,18.912,21.021,16.349zM15.808,13.757c2.362,0,4.278-1.916,4.278-4.279s-1.916-4.279-4.278-4.279c-2.363,0-4.28,1.916-4.28,4.279S13.445,13.757,15.808,13.757z") 

    humanIcon.attr({fill: "rgb(75,75,75)"}).scale(2.5,2.5); 
    humanIcon.translate(40,40); 

    var bbox = humanIcon.getBBox(); 

    var xcenter = Math.round(bbox.x + bbox.width/2.0); 
    var ycenter = Math.round(bbox.y + bbox.height/2.0); 

    var circle = paper.circle(xcenter, ycenter, 40); 
    circle.attr({fill:"white"}); 



</script>

来源

2011-12-25 Curious2learn

为什么不重新绘制圆的顶部的路径，一旦你找出了它的中心？可能不是最优的，但应该做的伎俩。 – 2011-12-25 17:58:51

可能会工作。应该有这个想法。但是我找到了更好的解决方案;我已经包含在下面。 – Curious2learn 2011-12-29 18:47:35

在Google上做了大量搜索之后，我在Stackoverflow上找到了答案。当时，我没有保存链接到答案，我不记得它。如果有人发现它，请编辑此答案并发布。但是，我确实记录了解决方案，并且这里是：

可以使用Raphael中的insertBefore()和insertAfter()函数。在问题中给出的示例代码中，可以通过将最后一行更改为：

circle.attr({fill:"white"}).insertBefore(humanIcon);

感谢那些回复。

来源

2011-12-29 18:47:42 Curious2learn

尝试改变两者的绘制顺序。或者查看Raphael文档以查看是否存在可用于永久修改可渲染图层堆栈上的路径位置的“Z-index”属性。

编辑：我没有很好地阅读你的解释。如果你可以在不绘制它的情况下声明你的对象，也许你可以抓住BBox，然后再绘制它。

编辑，编辑：SVG有一个“defs”标签来创建对象而不用绘制它们，所以它也有理由说Raphael也可以处理它。

来源

2011-12-25 21:15:00 rfinz

尝试使用Raphael的Element.toBack()和Element.toFront（）。

就你而言，它听起来像你想绘制路径，然后绘制圆，然后调用circle.toBack()或path.toFront()。

来源

2011-12-26 13:17:42

Raphael.js - 对圆圈使用填充属性，使圆圈中的元素消失。如何避免这种情况？

回答

相关问题