Question

使用添加文本从json加载的画布。我想在画布外的文本框中输入数据时更新更新文本。

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

public void ConfigureServices(IServiceCollection services)
{
     services.AddSingleton(new PingService());
     services.AddMvc();
     //rest goes here
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env,  ILoggerFactory loggerFactory)
{
    app.UseSoapEndpoint(path: "/PingService.svc", binding: new BasicHttpBinding());
    app.UseMvc();
    //rest goes here
}

Answer 1

要正确使用具有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/

Answer 2

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事件。用它来更新用户对象。

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

2 个答案: