gpt4 book ai didi

javascript - 如何使用 raphael js 添加和额外的路径箭头到指针路径

转载 作者:行者123 更新时间:2023-11-27 22:38:13 24 4
gpt4 key购买 nike

如何使用 raphael js 添加和额外的路径箭头到指针路径?我一直在尝试添加它,但没有成功。

这是javascript

<script type="text/javascript">

$(function(){
var r = Raphael("gauge_bg2", 200, 200);
var g = r.gauge(0, 180);


g.bg(r.circle(100, 100, 100).attr({fill:'#193442','stroke-width': '0'}), [100, 100]);

g.pointer(r.rect(0, 0, 100, 10).attr({fill: '#fff', 'stroke-width': '0'}), [100, 5]);

// g.Arrowshape(r.triangle(300, 0, 100).attr({fill:'#193442','stroke-width': '0'}), [100, 100]);

setInterval(function(){
var percent = Math.floor(Math.random()*100);
g.move(percent);
}, 3000);
});

</script>

我创建了一个 http://jsfiddle.net/creativestudio/VH3fR/3/

最佳答案

有两种选择:一种是使用 Raphael.Set 将指针路径和箭头结合起来,另一种是将指针的 rect() 替换为更通用的 path() 并在那里绘制箭头。箭头的代码可能如下所示:

    paper.path("M{0},{1}L{2},{3}L{4},{5}M{2},{3}L{4},{6}", a.x, a.y, b.x, b.y, b.x - length, b.y - width, b.y + width);

其中 ab 是起点和终点,lengthwidth 描述箭头。请注意,这个必须是“描边”,而不是“填充”,但也很容易得到实心箭头。

关于javascript - 如何使用 raphael js 添加和额外的路径箭头到指针路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12616427/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com