javascript - Raphael.js のパスに対するテキスト要素の位置を変換する

Question

アークとパーセンテージを含むRaphael.jsを使用してカスタム グラフを作成しています。円弧のテキスト ラベルは、円弧とともに移動する必要があります。onAnimation コールバックを使用して外側の円弧のポイントを取得し、それに応じてテキスト ラベルを配置することで、これを実現しました。

var paper = Raphael("paper", 200, 200);
var centerX = paper.width / 2;
var centerY = paper.height / 2;

// This is a dummy percentage; in real app this corresponds to actual value
var percentage = 0;

paper.customAttributes.arc = function(centerX, centerY, startAngle, endAngle, innerR, outerR) {
  var radians = Math.PI / 180,
    largeArc = +(endAngle - startAngle > 180),
    outerX1 = centerX + outerR * Math.cos((startAngle - 90) * radians),
    outerY1 = centerY + outerR * Math.sin((startAngle - 90) * radians),
    outerX2 = centerX + outerR * Math.cos((endAngle - 90) * radians),
    outerY2 = centerY + outerR * Math.sin((endAngle - 90) * radians),
    innerX1 = centerX + innerR * Math.cos((endAngle - 90) * radians),
    innerY1 = centerY + innerR * Math.sin((endAngle - 90) * radians),
    innerX2 = centerX + innerR * Math.cos((startAngle - 90) * radians),
    innerY2 = centerY + innerR * Math.sin((startAngle - 90) * radians);

  var path = [
    ["M", outerX1, outerY1],
    //move to the start point
    ["A", outerR, outerR, 0, largeArc, 1, outerX2, outerY2],
    //draw the outer edge of the arc
    ["L", innerX1, innerY1],
    //draw a line inwards to the start of the inner edge of the arc
    ["A", innerR, innerR, 0, largeArc, 0, innerX2, innerY2],
    //draw the inner arc
    ["z"]
    //close the path
  ];
  
  return {
    path: path
  };
};

var arc = paper.path().attr({
  'fill': "#cccccc",
  'stroke': 'none',
  'arc': [centerX, centerY, 0, 0, 60, 80]
});
arc.toBack();

var percentagesStart = 0;
var percentagesEnd = 0;
var percentagesDelta = 0;

var label = paper.text(
  arc.attrs.path[1][6],
  arc.attrs.path[1][7],
  "0").toFront();

label.attr({
  'font-size': 16,
  'fill': "#000000",
  'font-family': 'sans-serif',
  'text-anchor': 'middle'
});

arc.onAnimation(function(anim) {
  console.log("test");
  label.attr({
    x: this.attrs.path[1][6],
    y: this.attrs.path[1][7],
    text: (percentage++)
  });
});

arc.animate({
  'arc': [centerX, centerY, 0, 220, 60, 80]
}, 1000, 'easeInOut');

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>

<div id="paper"></div>

ただし、テキスト ラベルは円弧が終了する位置に配置する必要があり、適切なマージンが必要です。テキスト要素の位置は、円弧に対して相対的に変換する必要があります。

私は使用しようとしました

label.transform("t-10,10");

他のいくつかの x、y 値を試してみましたが、円弧の角度に応じて、ある時点で x 値が負でなければならず、ある時点で x 値が正でなければならないため、うまくいきません。

これを正しく配置する方法はありますか？