支持 css3 和 ie8 的弧形文本答案

【问题标题】：arc shape text with css3 and ie8 support支持 css3 和 ie8 的弧形文本
【发布时间】：2013-01-03 02:15:42
【问题描述】：

我尝试为具有 css3 属性的文本赋予弧形，并更改 js 以支持 ie8。但这不起作用。

this.$letters.each(function (i) {
    var $letter = $(this),
        transformation = (_self.options.radius === -1) ? 'none' : 'translateX(' + $letter.data('x') + 'px) translateY(' + $letter.data('y') + 'px) rotate(' + $letter.data('a') + 'deg)',
        transition = (animation) ? 'all ' + (animation.speed || 0) + 'ms ' + (animation.easing || 'linear') : 'none';


    filterIE = 'M11=' + $letter.data('x') + ', M21=' + $letter.data('y') + ',rotation=' + $letter.data("a") + 'deg'; // js function for supporting ie8
    //alert(filterIE);
    $letter.css({
        '-webkit-transition': transition,
        '-moz-transition': transition,
        '-o-transition': transition,
        '-ms-transition': transition,
        'transition': transition
    })
    .css({
        '-webkit-transform': transformation,
        '-moz-transform': transformation,
        '-o-transform': transformation,
        '-ms-transform': transformation,
        'transform': transformation,
        'filter': "progid:DXImageTransform.Microsoft.Matrix(" + filterIE + ")"  // js function for supporting ie8
    });

    function getIEVersion() {
        var rv = -1; // Return value assumes failure.
        if (navigator.appName == 'Microsoft Internet Explorer') {

            var ua = navigator.userAgent;
            var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
            if (re.test(ua) != null)

                rv = parseFloat(RegExp.$1);
        }
        return rv;
    }


    function checkVersion() {
        var ver = getIEVersion();

        if (ver != -1) {
            if (ver <= 9.0) {
                //.css("-ms-filter","progid:DXImageTransform.Microsoft.Matrix(M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand')"
                //);// do something
            }
        }
    }

    checkVersion();
});

用粗体标记的文本是对我的js函数的修改。有人可以帮我从这里出去吗。我在jsfiddle做了一个演示

【问题讨论】：

标签： jquery css canvas internet-explorer-8 css-transforms

【解决方案1】：

您的 IE 转换代码错误。应该是这样的：

var cos = Math.cos;
var sin =Math.sin;
var deg2rad = 180 * Math.PI;
var filterIE = 'M11=' + ($letter.data('x')+cos($letter.data("a")/deg2rad)) + ',M12=' + sin($letter.data("a")/deg2rad) + ', M21=' + ($letter.data('y')-sin($letter.data("a")/deg2rad)) + ',M22=' + cos($letter.data("a")/deg2rad) + ',sizingMethod=\'auto expand\''

另外，IE9+ 支持 CSS3 转换。您只需要 -ms- 前缀。

【讨论】：

感谢@Licson，我已经尝试过您的代码，但文本在 ie8 中的显示方式与其他浏览器不同。
我认为您应该尝试使用 jquery 转换插件。它是跨浏览器的，可以帮助您节省时间和代码。

【解决方案2】：

由于这个问题在 2013 年被问到并且 IE8 正在迅速退出，我想我应该提供一个惊人的弧形文本 CSS 生成器的链接：http://csswarp.eleqtriq.com/。

【讨论】：