如何在Fabric.js中添加文本的CSS属性

Question

我想在fabric.js或fabric.curvedText.js中使用css属性“-webkit-transform”我想在画布上显示文本，如： http://trentwalton.com/2011/05/10/fit-to-scale/ ：//trentwalton.com/2011/05/10/fit-to 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)",

Answer 1

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

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

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

为了扭曲Fabric对象，您需要扩充它们的表示以解决倾斜（例如，在fabric.Object.prototype.render方法中）。