角度のモデルはキャンバスのテキストボックスの値を更新します

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

適切angularjsでfabric.jsを使用するには、もう少し勉強し、より多くの努力を入れています。 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/