javascript - CircleType 文本在 rotateY 之后删除空格

Question

我有这段代码:

<div id="curvy">
    This is the curved text
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/circletype@2.2.0/dist/circletype.min.js"></script>
<script>
const circleType = new CircleType(document.getElementById('curvy'));
circleType.dir(-1).radius(1100);

$( document ).ready(function() {
    var counter = 1;
    var deg = -40;

$($($('#curvy div').find('span')).get().reverse()).each(function (index, value ) {
/* var css = $(this).css('transform');
css = css + ' rotateY(-50deg)'; */
if(counter > 5) {
    var text = $(this).html();
    $(this).html('');
    $(this).css('display','flex');
    $(this).css('vertical-align','top');
    console.log(text);

    //$(this).html('');
   var newElem = $('<span></span>').append(text);
   newElem.appendTo($(this));

/*    newElem.css('position','relative');
   newElem.css('z-index',counter); */
   newElem.css('vertical-align','top');
   newElem.css('transform','rotateY('+ deg +'deg)');
   deg = deg - 2.5;
}

//console.log(value);
counter = counter + 1;

});

});

</script>
<style>
html, body {
    font-size: 30px;
}
</style>

这工作正常，但在我开始使用 rotateY 在其自己的跨度中旋转每个字母后，父跨度似乎在我想要摆脱的中间添加了一个空白。

Check jsfiddle

Answer 1

好吧，我完全错误地接近了它。

问题不是跨度、填充或任何边距，而是 translateX 或旋转值。

由于 CircleType 在渲染效果时使用的是字母的初始大小，因此它没有考虑我后来通过 jQuery 进行的操作。

我必须保存矩阵，然后决定是对旋转值还是对 translateX 值进行增量。我选择后者是因为玩起来感觉不那么复杂。由于我需要在特定数量的字符后开始轮换，因此我使用了适当的检查。

<div id="curvy">
   Curved text
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/circletype@2.2.0/dist/circletype.min.js"></script>
<script>
const circleType = new CircleType(document.getElementById('curvy'));
circleType.dir(-1).radius(900);

$( document ).ready(function() {
    var counter = 1;
    var deg = -40;
    var padding = 0;
$($($('#curvy div').find('span')).get().reverse()).each(function (index, value ) {
var css = $(this).css('transform').replace(/[^0-9\-.,]/g, '').split(',');
var x = css[12] || css[4];
var y = css[13] || css[5];

    var a = css[0];
    var b = css[1];
    var angle = Math.atan2(b, a) * (180/Math.PI);

if(counter > 5) {
    if(counter >= 12) {
        padding = padding + 6 ;
    } else
        padding = padding + 4 ;
    var text = $(this).html();
    $(this).html('');
    $(this).css('display','flex');
   x = parseFloat(x) + padding;
   $(this).css('transform', 'translateX('+x+'px) rotate('+angle+'deg)');
   var newElem = $('<span></span>').append(text);
   newElem.appendTo($(this));

   newElem.css('transform','rotateY('+ deg +'deg)');
   deg = deg - 2.5; 
}

counter = counter + 1;

});

});

</script>
<style>
html, body {
    font-size: 30px;
    top: 50%;
    left: 50%;
    position: absolute; 
}
</style>

Updated jsFiddle