Angular 的 FabricJS：更改字体系列、大小、对齐方式等

Question

我在 AngularJS 应用程序中使用 FabricJS。我能够向 canvas 添加文本，并且使用位于 here 的 kitchensink 示例，我可以执行粗体、斜体、下划线等功能。

但是，我遇到的问题是如何更改字体系列、文本对齐方式、字体大小等。因为当我从字体系列的下拉列表中创建 selection 时，没有发生任何变化。 . 但它适用于 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');
};

正如我所说，这按预期工作。我遇到的挑战是更改字体系列或字体大小之类的东西，因为无需单击按钮即可实现更改。这是 Kitchensink 示例中字体系列 select 的示例 HTML：

<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);

比起bind-value-to，我更习惯使用ng-model，事实上，我以前从未见过或使用过bind-value-to Angular apps/not 确定如何和如果我应该使用它。

我的主要问题是，如果我 select 根据文本 here 的 Kitchensink 示例更新一个值，我如何让下拉菜单工作？我是什么missing/is鉴于我的需要是添加和编辑程式化文本，有更好的方法。

Answer 1

您需要将更改事件绑定到 select 元素，以便在更改 select 值时执行将更改字体系列的函数。

bind-value-to 是 kitchensink 应用程序中的自定义指令，所以不用担心。

Angular 的 FabricJS：更改字体系列、大小、对齐方式等

FabricJS with Angular: Change Font Family, Size, Alignment, etc

fabricjs

angularjs