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中添加了这个属性，就像其他属性一样添加了例如：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方法中）。

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

1 个答案: