Vote count:
0
What I want to do:
- Select the object on the canvas
- Click change image to change the selected image on the canvas
What is happening:
- Image disappears, but reappears as the new image when you try to move the empty area.
I have no idea why it's doing this. I assume its some sort of re-compiling of the DOM that has to be instantiated from the controller but I'm not sure.
Thanks in advance. The jsfiddle demonstrates the problem but I've shown the code below as well.
angular.module('canvasApp', [])
.controller('MainCtrl', function($scope){
$scope.up = function(){
$scope.$broadcast('change');
}
})
.directive('ngCanvas', function(){
return {
restrict: 'EA',
scope: true,
template: '<canvas id="canvas" width="1000" height="500" data-drop="true" jqyoui-droppable="{onDrop:\'drop(event, data, obj)\'}" ></canvas>',
controller: function($scope){
$scope.$on('change', function(event){
var tmp = $scope.canvas.getActiveObject();
var el = tmp.getElement();
el.setAttribute('src', "http://ift.tt/1y1uPTy");
$scope.canvas.renderAll();
$scope.canvas.calcOffset();
});
},
link: function(scope, element, attrs){
scope.canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL("http://ift.tt/1y1uPTA", function(oImg) {
scope.canvas.add(oImg);
});
}
}
})
<script src="http://ift.tt/1y1uSOY"></script>
<script src="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/1mQ03rn"></script>
<body ng-app="canvasApp">
<div ng-controller="MainCtrl">
<button id="click" ng-click="up()">Change Image</button>
<div ng-canvas></div>
</div>
</body>
asked 1 min ago
Fabric.js/Angular - When I change the image of a canvas object, it disappears and then reappears
Aucun commentaire:
Enregistrer un commentaire