如何在 FabricJS 中正确对齐反向弯曲文本？

Question

我正在使用这个库：https://github.com/EffEPi/fabric.curvedText用FabricJS获取弯曲的文本，我复制了代码进行测试：

$(function () {
    canvas = new fabric.Canvas('c');
    canvas.on('selection:cleared', onDeSelected);
    canvas.on('object:selected', onSelected);
    canvas.on('selection:created', onSelected);
    var CurvedText = new fabric.CurvedText('CurvedText',{
        left: 100,
        top: 5,
        textAlign: 'center',
        fill: '#0000FF',
        radius: 100,
        fontSize: 20,
        spacing: 20,
        stroke:"#FFFF00",
        strokeWidth:1
    });
    
    var CurvedText1 = new fabric.CurvedText('CurvedText',{
        left: 100,
        top: 100,
        textAlign: 'center',
        fill: '#0000FF',
        radius: 100,
        fontSize: 20,
        spacing: 20,
        stroke:"#FFFF00",
        strokeWidth:1,
        reverse:true
    });
    
    
    canvas.add(CurvedText).renderAll();
    canvas.add(CurvedText1).renderAll();
    //canvas.setActiveObject(canvas.item(canvas.getObjects().length-1));
    $('#text').keyup(function(){
        var obj = canvas.getActiveObject();
        if(obj){
            obj.setText(this.value);
            canvas.renderAll();
        }
    });
    $('#reverse').click(function(){
        var obj = canvas.getActiveObject();
        if(obj){
            obj.set('reverse',$(this).is(':checked')); 
            canvas.renderAll();
        }
    });
    $('#radius, #spacing, #fill').change(function(){
        var obj = canvas.getActiveObject();
        if(obj){
            obj.set($(this).attr('id'),$(this).val()); 
        }
        canvas.renderAll();
    });
    $('#radius, #spacing, #effect').change(function(){
        var obj = canvas.getActiveObject();
        if(obj){
            obj.set($(this).attr('id'),$(this).val()); 
        }
        canvas.renderAll();
    });
    $('#fill').change(function(){
        var obj = canvas.getActiveObject();
        if(obj){
            obj.setFill($(this).val()); 
        }
        canvas.renderAll();
    });
    $('#convert').click(function(){
        var props = {};
        var obj = canvas.getActiveObject();
        if(obj){
            if(/curvedText/.test(obj.type)) {
                default_text = obj.getText();
                props = obj.toObject();
                delete props['type'];
                var textSample = new fabric.Text(default_text, props);
            }else if(/text/.test(obj.type)) {
                default_text = obj.getText();
                props = obj.toObject();
                delete props['type'];
                props['textAlign'] = 'center';
                props['radius'] = 50;
                props['spacing'] = 20;
                var textSample = new fabric.CurvedText(default_text, props);
            }
            canvas.remove(obj);
            canvas.add(textSample).renderAll();
            canvas.setActiveObject(canvas.item(canvas.getObjects().length-1));
        }
    });
});
function onSelected(){
    var obj = canvas.getActiveObject();
    $('#text').val(obj.getText());
    $('#reverse').prop('checked', obj.get('reverse'));
    $('#radius').val(obj.get('radius'));
    $('#spacing').val(obj.get('spacing'));
    $('#fill').val(obj.getFill());
    $('#effect').val(obj.getEffect());
}
function onDeSelected(){
    $('#text').val('');
    $('#reverse').prop('checked', false);
    $('#radius').val(50);
    $('#spacing').val(20);
    $('#fill').val('#0000FF');
    $('#effect').val('curved');
}

canvas {
    border:1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>
<script src="https://amz-rekognition.s3.amazonaws.com/json/fabric.curvedText.js"></script>


<canvas id="c" width="400" height="300"></canvas><br/>
<input type="text" id="text" value="CurvedText" /><br>
Reverse : <input type="checkbox" name="reverse" id="reverse" /><br>
Radius : <input type="range"  min="0" max="500" value="50" id="radius" /><br>
Spacing : <input type="range"  min="5" max="40" value="20" id="spacing" /><br>
Color : <input type="color"  value="blue" id="fill" /><br>
Effect : <select name="effect" id="effect" >
  <option value="curved">Curved</option>
  <option value="arc">Arc</option>
  <option value="STRAIGHT">STRAIGHT</option>
  <option value="smallToLarge">smallToLarge</option>
  <option value="largeToSmallTop">largeToSmallToped</option>
  <option value="largeToSmallBottom">largeToSmallBottom</option>
  <option value="bulge">bulge</option>
</select><br>
<br>
<button id="convert">Convert Text/Curved</button>

如您所见，它有一个反向选项，但对齐方式看起来与原来的不同：

我希望你能帮助我如何修改这个脚本以获得正确的反向对齐，例如：