角ng-模型更新画布中文本框中的值。

Question

从json加载的画布添加了文本。在画布外的文本框中输入数据时，我希望更新更新文本。

挂上了小提琴。https://jsfiddle.net/sujathavts/km6vc8vs/6/任何帮助

 <div ng-app ng-controller="LoginController" >

    <div>Hello {{ user.firstName }}</div>
    <input ng-model="user.firstName">

    <div ng-repeat="login in logins">{{ login }}</div>

    <canvas id="c" width="500" height="500"></canvas>
   <br/>

</div>

Answer 1

​

function LoginController($scope) {
  $scope.user = {
    firstName: "Foo",
    lastName: "Bar"
  };
  
  jsonobj ={"objects":[{"type":"textbox","originX":"left","originY":"top","left":100,"top":100,"width":220,"height":28.84,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over",
  "text":'{{ user.firstName }}',
  "fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"center","textBackgroundColor":"","styles":{},"minWidth":20}],"background":"#fff"};
  
  var canvas = window._canvas = new fabric.Canvas('c');

  canvas.setBackgroundImage("", canvas.renderAll.bind(canvas));
  canvas.renderAll();
  //alert(jsonobj);
  canvas.loadFromJSON(jsonobj, function(obj) {
    canvas.renderAll();
  });
  
  var text = canvas._objects[0];
  
  text.on('changed',function(){
   $scope.user.firstName = this.text;
   $scope.$apply();
  });
  
  $scope.$watch('user', function(newValue, oldValue) {
    text.set('text', newValue.firstName);
    canvas.renderAll();
  },true)
}

canvas {
    border: 1px solid #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div ng-app ng-controller="LoginController" >
    <div>Hello {{ user.firstName }}</div>
    <input ng-model="user.firstName">
    <div ng-repeat="login in logins">{{ login }}</div>
    <canvas id="c" width="500" height="500"></canvas>
   <br/>

</div>

​

观察您的$scope.user对象，如果将新值设置为text对象；

如果您也想反转它，text对象会触发change事件。使用它来更新用户对象。

Answer 2

要正确地使用fabric.js和angularjs，您将需要更多地学习并投入更多的精力。load fabric js in angular application

但是对于这种特殊情况，我有一个解决方案(解决办法)。

在代码中进行这些更改。

html

<input ng-model="user.firstName" ng-change="render()">

Js

function LoginController($scope) {
    $scope.user = {
        firstName: "Foox",
        lastName: "Bar"
    };


// change-> "text":$scope.user.firstName
jsonobj ={"objects":[{"type":"textbox","originX":"left","originY":"top","left":100,"top":100,"width":220,"height":28.84,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over",
"text":$scope.user.firstName,
"fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"center","textBackgroundColor":"","styles":{},"minWidth":20}],"background":"#fff"};



var canvas = window._canvas = new fabric.Canvas('c');

canvas.setBackgroundImage( "" , canvas.renderAll.bind(canvas));
canvas.renderAll();
canvas.loadFromJSON(jsonobj, function(obj) {
        canvas.renderAll();
    });

  $scope.render = function() {
    jsonobj.objects[0].text = $scope.user.firstName;
    canvas.loadFromJSON(jsonobj, function(obj) {
        canvas.renderAll();
    });
  };


}

这里发生的情况是，它再次使用更改的值呈现画布。

jsfiddle链接:https://jsfiddle.net/harshakj89/La00wahb/