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

Question

我想在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 中添加了这个属性，就像添加了其他属性一样，例如：间距、半径等。

以下是添加-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

文档中不存在结构对象。它们是内存中的虚拟对象，通过元素以二维图像的形式呈现给世界。

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

这就像试图喂一只正在电视上播放的猫。您看到的图像只是一只猫的表示，因此您不能用您用来“修改”常规对象（饲料、宠物、衣服等）的东西“修改”它.).

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