Angular.js 和 Fabric.js:一旦代码移动到 Angular 指令,Fabric canvas 就会改变
Angular.js and Fabric.js: Fabric canvas changes behavior once code is moved to a Angular Directive
我有一个简单的AngularJS/FabricJs应用程序,目的是允许在上传之前移动/调整图像大小。 基本上是四个步骤:
1) I present a form with a canvas, and a rectangle inside of form to represent a clip area
2) browse for a local file
3) add it to the canvas
4) and have a button to capture the clip area inside of the canvas
当我将代码从直接嵌入的表单移动到角度指令后面时,就会出现问题。 一旦我将表单移动到指令中,就会弹出一个问题,图像被加载并添加到画布中,而没有(任何明显的)问题。 但是,一旦您单击画布上的任意位置(例如,尝试移动图像),您添加的图像将不再出现在画布上(尽管对 fabricJs Canvas 对象的检查仍显示它在其对象数组内部)。
JS应用和助手:
var myApp = angular.module('myApp', [])
// helper function to bind tot he on change of a input/file object (angularJs workaround)
var invokeImageChange = function(that) {
angular.element(that).scope().imageChange(that)
angular.element(that).scope().$digest();
}
控制器:
var ImageCtrl = function($scope) {
var desiredHeight = 300
var desiredWidth = 770
// I understand this docucment.gelElementById is not the angular way - and needs to be changed
var myImageData = document.getElementById('fileData')
var myImage = document.getElementById('myImage')
var canvas = new fabric.Canvas('myCanvas')
var rect = new fabric.Rect({
fill: 'lightgray',
left: canvas.width / 2,
top: canvas.height / 2,
width: desiredWidth,
height: desiredHeight,
stroke: 'darkgray',
strokeDashArray: [5, 5],
selectable: false
});
canvas.add(rect)
var clipZone = {
y: rect.top - (.5 * rect.height),
x: rect.left - (.5 * rect.width),
width: desiredWidth,
height: desiredHeight,
quality: 1
}
$scope.caption = "" ;
$scope.fileUrl = "" ;
$scope.imageChange = function(inp) {
console.log('imageChange')
file = inp.files[0];
fr = new FileReader();
fr.onload = createImage;
fr.readAsDataURL(file);
var img = null
function createImage() {
console.log('createImage')
img = new Image();
img.onload = imageLoaded;
img.src = fr.result;
}
function imageLoaded() {
console.log('imageLoaded')
var fabImg = new fabric.Image(img)
fabImg.scale(1.0).set({
left: canvas.width / 2,
top: canvas.height / 2
});
canvas.add(fabImg)
canvas.setActiveObject(fabImg)
}
}
$scope.submit = function(event) {
}
$scope.capture = function() {
console.log('capture')
}
}
指令代码:
myApp.directive('ngImageEditor', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
controller: 'ImageCtrl',
templateUrl: ''blah'pathToForm'
};
});
其中模板网址引用此表单
<form name="uploadForm" ng-controller="ImageCtrl" method="post" enctype="multipart/form-data"
action="/main/update" ng-submit="submit()">
<div class="control-group">
<label class="control-label" for="file">Image File</label>
<div class="controls">
<input type="file" name="file" ng-model="file" onchange="invokeImageChange(this)"/>
<input type="text" id="fileData" name="fileData" ng-model="fileUrl"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="button" value="Upload" ng-click="capture()"/>
</div>
</div>
<div>
<canvas id="myCanvas" width="800" height="400" style="border:1px solid #000000;"></canvas>
</div>
<img id="myImage" style="border: 1px solid burlywood">
</form>
希望下面的JsFiddle可以帮助人们理解我在说什么。 提前感谢!
要重现
1) browse to an image
2) move the image (notice the image disappears in the second link)
工作(图像可以移动)(无指令):
http://jsfiddle.net/PNwbp/1/
损坏/问题(图像在移动时消失)(带有指令):
http://jsfiddle.net/faFVW/23/
从模板中删除 ng-controller="ImageCtrl",正在创建控制器的另一个$scope和实例,这会破坏它。
<form name="uploadForm" /*ng-controller="ImageCtrl"*/ method="post" enctype="multipart/form-data"
action="/main/update" ng-submit="submit()">
相关文章:
- Angular JS IE9 Hashbang url rewriting
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- angular.js没有'无法在PhoneGap中处理视图标记
- Angular js-返回一个包含类似
- 如何使用 Angular JS 将数据保存在数据库中
- 将Angular js与taglib结合使用
- Angular JS Filter-通过3个复选框进行筛选
- vaadin:使用自定义布局集成angular js
- angular js密码强度显示问题
- 使用angular.js问题的JavaSpringREST服务
- 将复杂对象从angular js传递到web api,它总是返回404
- entre上的angular js阻止提交
- 根据Angular.JS上一次的内容禁用选择
- 如何在angular js中使用指令.不适用于我的情况,为什么
- 预期响应包含一个对象,但在angular js中得到一个数组错误
- angular.js:13424错误:[ng:areq]参数'fn'不是函数,getObject
- 使用Angular js-量角器e2e测试上传文件
- Angular.js延迟控制器初始化
- 如何在angular.js中动态应用自定义过滤器
- 谷歌地图/Angular JS:地图更新并不总是反映数据,并且可以't删除标记