Angular.js 和 Fabric.js：一旦代码移动到 Angular 指令，Fabric 画布就会改变行为

Posted 2023-03-25

【中文标题】Angular.js 和 Fabric.js：一旦代码移动到 Angular 指令，Fabric 画布就会改变行为

【英文标题】：Angular.js and Fabric.js: Fabric canvas changes behavior once code is moved to a Angular Directive

【发布时间】：2013-09-12 04:30:18

【问题描述】：

我有一个简单的 AngularJS / FabricJs 应用程序，其目的是允许在上传之前移动/调整图像大小。基本上是四个步骤：

1) I present a form with a canvas, and a rectangle inside of form to represent a clip area 
2) browse for a local file 
3) add it to the canvas 
4) and have a button to capture the clip area inside of the canvas

当我将代码从直接嵌入的表单移动到 angular 指令后面时，就会出现问题。一旦我将表单移动到指令中，就会弹出一个问题，图像被加载并添加到画布中，没有（任何明显的）问题。但是，一旦您单击画布上的任意位置（例如，试图移动图像），您添加的图像将不再出现在画布上（尽管检查 fabricJs Canvas 对象仍将其显示为其对象数组内部）。

JS 应用程序和助手：

var myApp = angular.module('myApp', [])

// helper function to bind tot he on change of a input/file object (angularJs workaround)
var invokeImageChange = function(that) 
    angular.element(that).scope().imageChange(that)
    angular.element(that).scope().$digest();

控制器：

var ImageCtrl = function($scope) 

    var desiredHeight = 300
    var desiredWidth = 770

    // I understand this docucment.gelElementById is not the angular way - and needs to be changed
    var myImageData = document.getElementById('fileData')
    var myImage = document.getElementById('myImage')
    var canvas = new fabric.Canvas('myCanvas')

    var rect = new fabric.Rect(
        fill: 'lightgray',
        left: canvas.width / 2,
        top: canvas.height / 2,
        width: desiredWidth,
        height: desiredHeight,
        stroke: 'darkgray',
        strokeDashArray: [5, 5],
        selectable: false
    );
    canvas.add(rect)
    var clipZone = 
        y: rect.top - (.5 * rect.height),
        x: rect.left - (.5 * rect.width),
        width: desiredWidth,
        height: desiredHeight,
        quality: 1
    

    $scope.caption = "" ;
    $scope.fileUrl = "" ;

    $scope.imageChange = function(inp)  
        console.log('imageChange')
        file = inp.files[0];
        fr = new FileReader();
        fr.onload = createImage;
        fr.readAsDataURL(file);

        var img = null

        function createImage() 
            console.log('createImage')
            img = new Image();
            img.onload = imageLoaded;
            img.src = fr.result;
        

        function imageLoaded() 
            console.log('imageLoaded')
            var fabImg = new fabric.Image(img)

            fabImg.scale(1.0).set(
                left: canvas.width / 2,
                top: canvas.height / 2
            );

            canvas.add(fabImg)
            canvas.setActiveObject(fabImg)
        
    

    $scope.submit = function(event) 

    

    $scope.capture = function() 
        console.log('capture')

    

指令代码：

myApp.directive('ngImageEditor', function() 
  return 
    restrict: 'E',
    transclude: true,
    replace: true,
    controller: 'ImageCtrl',
    templateUrl: '\blah\pathToForm'
  ;
);

TemplateUrl 引用此表单的位置

<form name="uploadForm" ng-controller="ImageCtrl" method="post" enctype="multipart/form-data"
      action="/main/update" ng-submit="submit()">
    <div class="control-group">
        <label class="control-label" for="file">Image File</label>
        <div class="controls">
            <input type="file" name="file" ng-model="file" onchange="invokeImageChange(this)"/>
            <input type="text" id="fileData" name="fileData" ng-model="fileUrl"/>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <input type="button" value="Upload"  ng-click="capture()"/>
        </div>
    </div>
    <div>
        <canvas id="myCanvas"   style="border:1px solid #000000;"></canvas>
    </div>
    <img id="myImage" style="border: 1px solid burlywood">
</form>

希望下面的 JsFiddle 可以帮助人们理解我在说什么。提前致谢！

复制

1) browse to an image
2) move the image (notice the image disappears in the second link)

工作（图像可以移动）（无指令）：

http://jsfiddle.net/PNwbp/1/

损坏/问题（移动时图像消失）（带有指令）：

http://jsfiddle.net/faFVW/23/

【参考方案1】：

从您的模板中删除 ng-controller="ImageCtrl"，创建另一个 $scope 和 Controller 实例，这会破坏它。

<form name="uploadForm" /*ng-controller="ImageCtrl"*/ method="post" enctype="multipart/form-data"
      action="/main/update" ng-submit="submit()">

【讨论】：

我的男人！谢谢你让我发疯 - 转向指令更多的是概念证明 - 所以也许我在他们工作所需的代码中移动得太快了（第一次移植到/编码指令）。或者，我可以从指令代码中删除控制器，这也可以。

Brian，您能告诉我您是如何诊断问题的，从而帮助您了解知识曲线吗？这是一个常见的角度误差吗，至少足够常见，需要注意吗？还是您采用了其他技术？

我已经使用 angular 有一段时间了，我只是注意到了这一点，并从你的 jsfiddle 中删除了它，看看它是否有效并且确实有效。查看angular-ui.github.io/bootstrap 项目。实现指令非常好，它是一个很好的资源。