Question

我想做什么：

选择画布上的对象
单击更改图像以更改画布上的所选图像

发生了什么：

当您尝试移动空白区域时，图像会消失，但会重新显示为新图像。

我不知道为什么会这样做。我假设它的某些重新编译的DOM必须从控制器实例化，但我不确定。

提前致谢。 jsfiddle演示了这个问题，但我也展示了下面的代码。

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', "https://www.filepicker.io/api/file/7b3SLVgR65Fx4Q8JZyxQ");

				$scope.canvas.renderAll();
				$scope.canvas.calcOffset();
			});		

		},
		link:  function(scope, element, attrs){

			scope.canvas = new fabric.Canvas('canvas');
			
			fabric.Image.fromURL("https://www.filepicker.io/api/file/jGVMrkPuQ8eNGn5BpsiB", function(oImg) {
				scope.canvas.add(oImg);
			});
		}

	}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="canvasApp">
	<div ng-controller="MainCtrl">

	<button id="click" ng-click="up()">Change Image</button>

	<div ng-canvas></div>
	
</div>
</body>

http://jsfiddle.net/eg4y6d3k/4/

修改

如果相同的代码是直接JS，没有角度，它仍然有相同的问题。代码如下。

		var canvas = new fabric.Canvas('canvas');

		fabric.Image.fromURL("https://www.filepicker.io/api/file/jGVMrkPuQ8eNGn5BpsiB", function(oImg) {
		  canvas.add(oImg);
		});

		var up = function() {
		  var tmp = canvas.getActiveObject();
		  var el = tmp.getElement();

		  el.setAttribute('src', "https://www.filepicker.io/api/file/7b3SLVgR65Fx4Q8JZyxQ");

		  canvas.renderAll();
		  canvas.calcOffset();
		}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.js"></script>

<body>
  <button id="click" onclick="up()">Change Image</button>

  <canvas id="canvas" width="1000" height="500"></canvas>

</body>

Answer 1

我不得不使用fabric.js和canvas进行一些操作 - 以前从未使用它。

以下是我的工作方式：

$scope.$on('change', function(event, data) {

  fabric.Image.fromURL("https://www.filepicker.io/api/file/7b3SLVgR65Fx4Q8JZyxQ", 
    function(oImg) {
      var canvas = $scope.canvas;
      canvas.clear().renderAll();
      canvas.add(oImg);
      $scope.$digest();
    });

});

Your updated fiddle

修改：

另一种方法是在结构的图像对象上使用setElement：

link: function(scope, element, attrs) { var fabricImage; scope.canvas = new fabric.Canvas('canvas'); fabric.Image.fromURL("image1.png", function(oImg) { fabricImage = oImg; scope.canvas.add(oImg); }); scope.$on('change', function(event, data) { if (!fabricImage) return; var image = new Image(); image.onload = function() { fabricImage.setElement(image); scope.canvas.renderAll(); } image.src = "image2.png"; }); }

updated fiddle

编辑2：

第三种方法（可能是最直接的方法）是使用setSrc：

scope.$on('change', function(event, data) { if (!fabricImage) return; fabricImage.setSrc("image2.png", function(){ scope.canvas.renderAll(); }); });

updated fiddle 2

Answer 2

使用object.setSrc，您可以选择指定回调。

http://jsfiddle.net/eg4y6d3k/9/

最初没有选择任何对象，因此我取出了canvas.getActiveObject（） - 没有任何活动。

var tmp = $scope.canvas.getObjects(); tmp[0].setSrc( "https://www.filepicker.io/api/file/7b3SLVgR65Fx4Q8JZyxQ", function(){$scope.canvas.renderAll()});

单击按钮时图像会发生变化。

Fabric.js / Angular - 当我更改画布对象的图像时，它会消失然后重新出现

2 个答案: