我想在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)",
答案 0 :(得分:3)
文档中不存在Fabric对象。它们是记忆中的虚拟物体,通过元素向世界表示,作为二维图像。
这就是为什么你不能对它们应用CSS转换;它们不是文件中的要素。
这就像试图喂养正在电视上播放的猫一样。您看到的图像只是猫的表示,因此您不能使用您用来“修改”常规对象(饲料,宠物,衣服等)的东西来“修改”它。 )。
为了扭曲Fabric对象,你需要增加它们的表示来解释倾斜(例如,在fabric.Object.prototype.render
方法中)。