Search Posts

Category: fabricjs

Fabric multiple group using same objects with out any conflict

I want to create multiple group using same objects but want them to work independently while I am changing any objects it should not be changed in other group using fabric js. As an example, When I am running my fiddle the text is “Default Text” then I am ungrouping it and editing the text,then after group if I add a new group using button then new group text is edited text of previous group,but […]

Angular ng-model update the value in textbox in canvas

Canvas loaded from json with Added Text. I want to update the update text on entering the data in Textbox outside the canvas. Attached the fiddle. Any help <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> Source: AngularJS

AngulaJS + FabricJS + ASP.MVC

I create project asp.mvc and add angularjs and add fabricjs Now i catch error in console: Error: [$injector:unpr] Unknown provider: FabricProvider <- Fabric <- ExampleCtrl My app.js: var app = angular.module(‘myApp’, [‘ngRoute’, ‘ngResource’]); angular.module(‘example’, [ ‘common.fabric’, ‘common.fabric.utilities’, ‘common.fabric.constants’ ]).controller(‘ExampleCtrl’, [‘$scope’, ‘Fabric’, ‘FabricConstants’, ‘Keypress’, function ($scope, Fabric, FabricConstants, Keypress) { $scope.fabric = {}; $scope.FabricConstants = FabricConstants; // // Creating Canvas Objects // ================================================================ $scope.addShape = function (path) { $scope.fabric.addShape(‘’); }; $scope.addImage = function (image) { […]

How do I read a JSON file in Angular?

I am trying to load a JSON file from local disk and use the data from it to fill a FabricJS canvas. I have problems on getting the data from the file. This is what i have till now. app.html <input type=”file” accept=”.json” id=”fileInput” (change)=”loadFile($event)”/> app.ts loadFile(event) { const eventObj: MSInputMethodContext = <MSInputMethodContext> event; const target: HTMLInputElement = <HTMLInputElement>; const files: FileList = target.files; this.file = files[0]; const reader = new FileReader(); reader.readAsText(this.file, ‘utf8’); […]