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

我有此代码:

<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/[email protected]/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

最佳答案

好吧，我完全不正确地处理它。

问题不是跨度，填充或除marginX或rotate值以外的任何边距。

由于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/[email protected]/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

关于javascript - CircleType文本在rotateY之后删除空格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49506344/