javascript - 如何在Fabric.js中为文本添加CSS属性

我想在fabric.js或fabric.curvedText.js中使用css属性“ -webkit-transform”
我想在画布上显示文本，例如：http://trentwalton.com/2011/05/10/fit-to-scale/

-webkit-transform: skewY(-15deg);

此css属性用于显示文本，如上面的链接中所示。

我已经在fabric.curvedText.js中添加了此属性，就像添加了其他属性，例如：spacing，radius等。

以下是用于添加-webkit-transform的修改后的代码，此属性的其余部分与fabric.curvedText.js中的相同

var stateProperties = fabric.Text.prototype.stateProperties.concat();
    stateProperties.push(
            'radius',
            'spacing',
            'reverse',
            '-webkit-transform'
    );
    var _dimensionAffectingProps = fabric.Text.prototype._dimensionAffectingProps;
    _dimensionAffectingProps['radius']          = true;
    _dimensionAffectingProps['spacing']         = true;
    _dimensionAffectingProps['reverse']         = true;
    _dimensionAffectingProps['fill']            = true;
    _dimensionAffectingProps['textShadow']          = true;
    _dimensionAffectingProps['-webkit-transform']       = true;

    var delegatedProperties = fabric.Group.prototype.delegatedProperties;
    delegatedProperties['backgroundColor']      = true;
    delegatedProperties['textBackgroundColor']  = true;
    delegatedProperties['textDecoration']       = true;
    delegatedProperties['stroke']           = true;
    delegatedProperties['strokeWidth']      = true;
    delegatedProperties['textShadow']       = true;
    delegatedProperties['-webkit-transform']    = true;

    fabric.CurvedText = fabric.util.createClass(fabric.Text, fabric.Collection, /** @lends fabric.CurvedText.prototype */ {
        type: 'curvedText',
        radius: 50,
        spacing: 15,
        reverse: false,
        bulge: false,
        curve:false,
        pintch:false,
        arch:false,
        wedge:false,
        roof:false,
        bridge:false,
        vally:false,
        -webkit-transform:"skewY(-15deg)",

最佳答案

Fabric对象在文档中不存在。它们是内存中的虚拟对象，通过元素向世界表示为二维图像。

这就是为什么您不能对它们应用CSS转换的原因。它们不是文档中的元素。

这就像试图喂养正在电视上播放的猫。您看到的图像只是猫的代表，因此您无法使用“修饰”常规对象（饲料，宠物，衣服等）所用的东西对其进行“修饰”。

为了使Fabric对象倾斜，您需要增加其表示形式以解决倾斜问题（例如，在fabric.Object.prototype.render方法中）。