Javascript 带Raphael.js的Arc文本_Javascript_Raphael

Javascript 带Raphael.js的Arc文本

javascript

Javascript 带Raphael.js的Arc文本,javascript,raphael,Javascript,Raphael,我试图对文本实现弧形效果，如下面的屏幕所示：我试着用它玩了几个小时，但无法让它正常工作，我能达到的最大效果是：以下是我的代码片段：有人能给我指一下正确的方向吗 //更新：好的，我设法将文字放在上面，但如何旋转它以匹配图像？拉斐尔JS： var paper = Raphael("urp"); //var path = paper.path("M50,10 A40,40,0,1,1,49.9,10z"); //var path = paper.path("M 140, 300 C

我试图对文本实现弧形效果，如下面的屏幕所示：

我试着用它玩了几个小时，但无法让它正常工作，我能达到的最大效果是：

以下是我的代码片段：

有人能给我指一下正确的方向吗

//更新：好的，我设法将文字放在上面，但如何旋转它以匹配图像？

拉斐尔JS：

var paper = Raphael("urp");

//var path = paper.path("M50,10 A40,40,0,1,1,49.9,10z");
//var path = paper.path("M 140, 300 C 180, 100, 420, 100, 460, 300").attr({stroke:"#ccc"});
//var path = paper.path("M10,10 L90,90");
//var c = paper.circle(50, 50, 40);

var path1 = paper.path(getCircletoPath(286, 318, 190)).attr({stroke:"#ccc"});
var message = "55,8% Да";
var txt1 = textOnPath(message, path1, 13, 1.3, 3, 3);

var path2 = paper.path(getCircletoPath(286, 318, 170)).attr({stroke:"#ccc"});
var message = "43,3% Нет";
var txt2 = textOnPath(message, path2, 13, 1.3, 3, 3);

var path3 = paper.path(getCircletoPath(286, 318, 150)).attr({stroke:"#ccc"});
var message = "0,4% Не знаю как связаться";
var txt3 = textOnPath(message, path3, 13, 1.3, 3, 3);

var path4 = paper.path(getCircletoPath(286, 318, 130)).attr({stroke:"#ccc"});
var message = "0,5% Не смог связаться";
var txt4 = textOnPath(message, path4, 13, 1.3, 3, 3);

txt1.transform("r45, 286, 31");

 function getCircletoPath(x, y, r) { // x and y are center and r is the radius
       var s = "M";
       s = s + "" + (x) + "," + (y-r) + "A"+r+","+r+",0,1,1,"+(x-0.1)+","+(y-r)+"z";
       //alert(s);
       return s;
   }

function textOnPath(message, path, fontSize, letterSpacing, kerning, geckoKerning) {
    var gecko = /rv:([^\)]+)\) Gecko\/\d{8}/.test(navigator.userAgent||'') ? true : false;

    var letters = [], places = [], messageLength = 0;
    for (var c=0; c < message.length; c++) {
        var letter = paper.text(0, 0, message[c]).attr({"text-anchor" : "middle"});
        var character = letter.attr('text'), kern = 0;
        letters.push(letter);

        if (kerning) {
            if(gecko && geckoKerning) {
                kerning = geckoKerning;
            }
            var predecessor = letters[c-1] ? letters[c-1].attr('text') : '';
            if (kerning[c]) {
                kern = kerning[c];
            } else if (kerning[character]) {
                if( typeof kerning[character] === 'object' ) {
                    kern = kerning[character][predecessor] || kerning[character]['default'] || 0;
                } else {
                    kern = kerning[character];
                }
            }
            if(kerning['default'] ) {
                kern = kern + (kerning['default'][predecessor] || 0);
            }            
        }

    messageLength += kern;
    places.push(messageLength);
    //spaces get a width of 0, so set min at 4px
    messageLength += Math.max(4.5, letter.getBBox().width);
}

if( letterSpacing ){
    if (gecko) {
        letterSpacing = letterSpacing * 0.83;
    }
} else {
    letterSpacing = letterSpacing || path.getTotalLength() /  messageLength;
}
fontSize = fontSize || 10 * letterSpacing;

for (c = 0; c < letters.length; c++) {
    letters[c].attr("font-size", fontSize + "px");
    p = path.getPointAtLength(places[c] * letterSpacing);
    var rotate = 'R' + (p.alpha < 180 ? p.alpha + 180 : p.alpha > 360 ? p.alpha - 360 : p.alpha )+','+p.x+','+p.y;
letters[c].attr({ x: p.x, y: p.y, transform: rotate });

}
}

HTML:


JS-Bin

经过一天和几个小时的各种解决方案的尝试，我终于想出了解决办法。

最后一个例子在这里

我在尝试了一天和几个小时的各种解决方案后想出了如何解决它。

最后一个例子是这里

请在问题中包含您的代码，不要仅链接到外部代码编辑器。好的，帖子已更新：）请在问题中包含您的代码，不要仅链接到外部代码编辑器。好的，帖子已更新：）

#urp { 
  background: url('http://img9.imageshack.us/img9/1980/13s4.png') no-repeat;
  background-position: 50px 120px;
}

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

  <div id="urp">
  </div>

</body>
</html>