如何在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方法中）。