我正在尝试用一种颜色填充圆的一部分。例如,有一个 2/3 红色和 1/3 空的圆圈。
Raphael JS 文档帮助不大。解决这个问题的最佳方法是什么?
一些例子可以在下面的图片中看到:
var paper = new Raphael(document.getElementById('shape_container'), 400, 100);
var circle = paper.circle(50, 50, 30);
circle.attr (
{
fill: '#F00'
}
);
用上面的代码,我可以画一个全是红色的圆.. 我找不到任何方法来填充 2/3 红色..
最佳答案
欢迎,Alperen。我相信您真正想要的是弧形路径而不是圆形。看看这个:
function arcpath( canvas, x, y, r, ratio )
{
if ( ratio >= 1.0 ) return canvas.circle( x, y, r );
var degrees = 360 * ratio; // we use this to determine whether to use the large-sweep-flag or not
var radians = ( Math.PI * 2 * ratio ) - Math.PI / 2; // this is actually the angle of the terminal point on the circle's circumference -- up is Math.PI / 2, so we need to subtract that out.
var pathparts =
[
"M" + x + "," + y,
"v" + ( 0 - r ),
"A" + r + "," + r + " " + degrees + " " + ( degrees >= 180 ? "1" : "0" ) + " 1 " + ( x + ( r * Math.cos( radians ) ) ) + "," + ( y + ( r * Math.sin( radians ) ) ),
"z"
];
return canvas.path( pathparts );
}
var partial_circle = arcpath( canvas, 250, 350, 100, 0.75 ).attr( { fill: mapit_red, stroke: mapit_black } );
arcpath 函数中的几何结构相当简单(尽管我不得不查找 large-sweep-flag 的引用资料,这绝对不是显而易见的)。我确信这可以进行实质性优化,但这是实用的第一步。
关于javascript - 使用 Raphael JS,部分填充一个圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11011113/