Stroke Fanning Demo

var WIDTH = 400; //px
var HEIGHT = 400; //px

CdlUtils.getSvgPathStrings('你', {
  width: WIDTH,
  height: HEIGHT,
  apiKey: 'your-api-key'
}).then(function(pathStrings) {
  drawFannedChar('target-element-id', pathStrings);
});

var drawFannedChar = function(targetId, pathStrings) {
  var svg = SVG(targetId);
  var numStrokes = pathStrings.length;
  var widthPerGroup = HEIGHT / numStrokes;
  var heightPerGroup = WIDTH / numStrokes;

  var pathStringsUpToNow = [];
  pathStrings.forEach(function(pathString, i) {
    pathStringsUpToNow.push(pathString);
    var group = svg.group();
    group.rect(WIDTH, HEIGHT).fill('none').stroke('#999');
    pathStringsUpToNow.forEach(function(currentPathString) {
      group.path(currentPathString).fill('#333');
    });
    group.scale(0.95 * (1/numStrokes)).translate(i*widthPerGroup, 0);
    svg.text('' + (i + 1))
      .font({
        size: '10px'
      })
      .cx((i + 0.5) * widthPerGroup)
      .y(heightPerGroup)
      .fill('#AAA');
  });
};