在画布上使用Fabric js,在加载等随机事件时,更改字体系列/ fontsize / fontstyle会出现问号而不是文本。除了safari和iOS safari之外,所有浏览器都能正常工作。
以下是字体系列列表: -
$scope.fontFamilies = [
{name:'Abril Fatface',value:'Abril Fatface',type:'400'},
{name:'Aldrich',value:'Aldrich',type:'400'},
{name:'Alex Brush',value:'Alex Brush',type:'400'},
{name:'Allura',value:'Allura',type:'400'},
{name:'Balthazar Regular',value:'Balthazar',type:'400'},
{name:'Crimson Text Regular',value:'Crimson Text',type:'400'},
{name:'Graduate',value:'Graduate',type:'400'},
{name:'Gravitas One',value:'Gravitas One',type:'400'},
{name:'Great Vibes',value:'Great Vibes',type:'400'},
{name:'Italianno',value:'Italianno',type:'400'},
{name:'Ledger',value:'Ledger',type:'400'},
{name:'Limelight',value:'Limelight',type:'400'},
{name:'Mate SC Regular',value:'Mate SC',type:'400'},
{name:'Michroma',value:'Michroma',type:'400'},
{name:'Montserrat Regular',value:'Montserrat',type:'400'},
{name:'Mr De Haviland Regular',value:'Mr De Haviland',type:'400'},
{name:'Open Sans Condensed Light',value:'Open Sans Condensed',type:'300'},
{name:'Open Sans Regular',value:'Open Sans',type:'400'},
{name:'Oswald',value:'Oswald',type:'400'},
{name:'Rosarivo',value:'Rosarivo',type:'400'},
{name:'Stint Ultra Condensed',value:'Stint Ultra Condensed',type:'400'},
{name:'Syncopate Regular',value:'Syncopate',type:'400'},
{name:'Vast Shadow',value:'Vast Shadow',type:'400'}
];
下面的一些代码和流程: 创建对象
var canvas = this.__canvas = new fabric.Canvas('canvasArea',
{selection:false,
allowTouchScrolling:true,
preserveObjectStacking: true});
然后从json加载画布
canvas.loadFromJSON(res.data.templateJson, function() {
..
}
下面是更改字体系列函数
$scope.updateFontFamily = function (family) {
console.log(family);
var tempFontFamily = {};
for(var loop=0;loop<$scope.fontFamilies.length;loop++) {
if(family==$scope.fontFamilies[loop].name){
tempFontFamily.type = $scope.fontFamilies[loop].type;
tempFontFamily.value = $scope.fontFamilies[loop].value;
}
}
var tObj = canvas.getActiveObject();
tObj.setFontFamily(tempFontFamily.value);
tObj.setFontStyle(tempFontFamily.type);
var text = tObj.getText();
tObj.setText("");
tObj.setText(text);
canvas.renderAll();
}
导入索引文件中的所有字体系列
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
@import url('https://fonts.googleapis.com/css?family=Aldrich');
@import url('https://fonts.googleapis.com/css?family=Alex+Brush');
@import url('https://fonts.googleapis.com/css?family=Allura');
@import url('https://fonts.googleapis.com/css?family=Balthazar');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600');
@import url('https://fonts.googleapis.com/css?family=Goudy+Bookletter+1911');
@import url('https://fonts.googleapis.com/css?family=Graduate');
@import url('https://fonts.googleapis.com/css?family=Gravitas+One');
@import url('https://fonts.googleapis.com/css?family=Great+Vibes');
@import url('https://fonts.googleapis.com/css?family=Italianno');
@import url('https://fonts.googleapis.com/css?family=Ledger');
@import url('https://fonts.googleapis.com/css?family=Limelight');
@import url('https://fonts.googleapis.com/css?family=Mate+SC');
@import url('https://fonts.googleapis.com/css?family=Michroma');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Mr+De+Haviland');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,800');
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
@import url('https://fonts.googleapis.com/css?family=Rosarivo:400,400i');
@import url('https://fonts.googleapis.com/css?family=Stint+Ultra+Condensed');
@import url('https://fonts.googleapis.com/css?family=Syncopate:400,700');
@import url('https://fonts.googleapis.com/css?family=Vast+Shadow');