Как добавить свойства CSS для текста в Fabric.js

Question

Я хочу использовать свойство css «-webkit-transform» в fabric.js или fabric.curvedText.js Я хочу отобразить текст на холсте наподобие: http://trentwalton.com/2011/05/10/fit-to-scale/

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

Это свойство css используется для отображения текста, как в приведенной выше ссылке.

У меня добавить это свойство в fabric.curvedText.js, как и другие свойства добавляются eg.:spacing, радиус и т.д.

Ниже приведен модифицированный код для добавления -webkit-преобразование это свойство Остальное кода такой же, как и в 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).