Transforming a text element's position relative to path in Raphael.js

问题

I am building a custom chart with Raphael.js which includes arcs and percentages. The text label of an arc needs to move with the arc. I have achieved this by using the onAnimation callback and getting the point of the outer arc and position the text label accordingly:

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>

However, the text label must be positioned where the arc ends, with some nice margin. The text element position must be transformed relative to the arc.

I have tried to use

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

And tried some other x, y values but that does not work, because at some point the x value has to be negative, and at some point the x value has to be positive, depending on the arc's angle.

Is there a way to position this correctly?

来源：https://stackoverflow.com/questions/10479232/transforming-a-text-elements-position-relative-to-path-in-raphael-js

标签

javascript

svg

raphael