Angular ng-model 更新画布文本框中的值

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 对象，如果更改，则将新值设置为文本对象；

如果你也想反转它，文本对象会触发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/