Question

我正在使用FabricJS和AngularJS应用程序。我可以将文本添加到画布中，并使用位于here的kitchen.sink示例，我可以执行粗体，斜体，下划线等功能。

但是，我遇到的问题是如何更改字体系列，文本对齐，字体大小等，因为当我从字体系列的下拉列表中进行选择时，不会发生任何更改...但它可以在Kitchensink中使用例。

我正在使用Kitchensink示例，因为我不仅需要添加文本，还要在Canvas上显示后对其进行编辑，这似乎符合我的需要。

按钮（正在运行）有一个HTML元素，例如：

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

在Controller中由以下内容备份：

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

正如我所说，这是按预期工作的。我遇到挑战的地方正在改变字体系列或字体大小之类的东西，因为没有点击按钮就可以实现更改。以下是从Kitchensink示例中选择字体系列的示例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);

我更习惯使用ng-model而不是bind-value-to，事实上，我以前从未见过或使用过bind-value-to之前的Angular应用程序/不确定如何以及我是否应该使用它。

我的主要问题是，如果根据适用于文本here的Kitchensink示例选择更新的值，如何让下拉列表工作？我缺少什么/有更好的方法，因为我需要添加和编辑风格化文本。

Answer 1

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

bind-value-to是kitchennsink app中的自定义指令，所以不要担心。

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

1 个答案: