我想做的事:
- 选择 Canvas 上的对象
- 单击“更改图像”可更改 Canvas 上选定的图像
发生了什么:
- 当您尝试移动空白区域时，图像会消失，但会重新显示为新图像。
我不知道为什么要这样做。我假设它是对 DOM 的某种重新编译，必须从 Controller 实例化，但我不确定。
提前致谢。 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 完成，没有 Angular ，它仍然有同样的问题。代码如下。
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>最佳答案
我不得不摆弄一些 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();
});
});
编辑:
另一种方法是在织物的图像对象上使用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";
});
}
编辑2:
第三种方法(可能是最直接的)是使用 setSrc:
scope.$on('change', function(event, data) {
if (!fabricImage) return;
fabricImage.setSrc("image2.png",
function(){
scope.canvas.renderAll();
});
});
关于angularjs - Fabric.js/Angular - 当我更改 Canvas 对象的图像时，它会消失然后重新出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28162908/