帶有角度的FabricJS：更改字體系列，大小，對齊方式等

Question

我正在使用FabricJS和AngularJS應用程序。我可以將文本添加到畫布上，並使用位於here的kitchensink示例，我可以執行粗體，斜體，下劃線等功能。

但是，我遇到的問題是如何更改字體系列，文本對齊，字體大小等，因爲當我從字體系列的下拉列表中進行選擇時，不會發生任何更改...但它適用於Kitchensink示例。

我使用的是Kitchensink示例，因爲我不僅需要添加文本，而且還要在Canvas上顯示時進行編輯，而且這看起來有我需要的。

的按鈕（其工作）具有一個HTML元素如：

<button class="btn btn-object-action" type="button" ng-class="{'btn-inverse': isBold()}" ng-click="toggleBold()"> 
Bold</button> 

其是通過在控制器的以下備份：

$scope.toggleBold = function() { 
setActiveStyle('fontWeight', 
getActiveStyle('fontWeight') === 'bold' ? '' : 'bold'); 
}; 

正如我說明，本工作原理意。在我面臨挑戰的地方，就是改變類似字體系列或字體大小的東西，因爲無需點擊按鈕即可實現更改。下面是字體家庭樣本HTML從的KitchenSink例如選擇：

<label style="display: inline-block;" for="font-family">Font family:</label><select class="btn-object-action" id="font-family" bind-value-to="fontFamily"> 
<option value="arial">Arial</option> 
<option value="helvetica" selected="">Helvetica</option> 
<option value="myriad pro">Myriad Pro</option> 
</select> 

這是在控制器備份本：

function getActiveProp(name) { 
var object = canvas.getActiveObject(); 
if (!object) return ''; 

return object[name] || ''; 
} 

function setActiveProp(name, value) { 
var object = canvas.getActiveObject(); 
if (!object) return; 

object.set(name, value).setCoords(); 
canvas.renderAll(); 
} 

$scope.getFontFamily = function() { 
return getActiveProp('fontFamily').toLowerCase(); 
}; 
$scope.setFontFamily = function (value) { 
setActiveProp('fontFamily', value.toLowerCase()); 
}; 

function watchCanvas($scope) { 

function updateScope() { 
$scope.$$phase || $scope.$digest(); 
canvas.renderAll(); 
} 

canvas 
.on('object:selected', updateScope) 
.on('group:selected', updateScope) 
.on('path:created', updateScope) 
.on('selection:cleared', updateScope); 
} 

$scope.getSelected = function() { 
return canvas.getActiveObject(); 
}; 


$scope.canvas = canvas; 
$scope.getActiveStyle = getActiveStyle; 

addAccessors($scope); 
watchCanvas($scope); 

我更習慣使用NG-模型比bind-價值，實際上，我從來沒有見過或使用過Angular應用程序中的bind-value-to /不知道如何以及如何使用它。

我的主要問題是如何獲得下拉菜單的工作方式，如果我選擇一個值更新每個Kitchensink示例文本here？我錯過了/有沒有更好的方式，因爲我需要添加和編輯風格化文本。

Answer 1

您需要將更改事件綁定到select元素，以便在更改選擇值時執行將更改字體系列的函數。

bind-value-to是kitchensink應用程序中的自定義指令，所以不用擔心。