是否已经有了AngularJS的画布绘图指令

2024-12-29 04:02:09
推荐回答(2个)
回答1:

我们经常会在ng-click事件传入$event参数,这样在js中我们就可以捕捉到该事件,获得该事件的一些属性和方法(例如获得触发事件的元素$event.target等)。
示例如下:
Html:

image.png
Js:

image.png
效果:

image.png

image.png
但是需要注意的是当你使用ng-change指令时是无法传入该参数的:

image.png
经网上查找原因是:

image.png
简单说就是ng-change并不是一个处理更改事件的指令。因此一般当我们需要用到$event时,需要注意不能使用ng-change。如果可以的话还是用ng-click。
如果只能使用ng-change的话,一个简单的方法是先用ng-click获得$event参数,再传给ng-change,例如:
Html

image.png
Js:

image.png
这样捕捉到的事件可以定位该元素。
或者可以使用jQuery#on() 或者 jqLite#on()绑定事件监听来实现,然而我并不会。。。
第二组:叶佳意 JS重绘图片
在需要上传图片到后台时,图片过大会导致上传失败。此时需要将图片等比例缩小,具体方法如下:
首先,使用createElement() 方法,通过指定名称创建一个元素。此时我们需要一个canvas 元素。canvas 元素本身是没有绘图能力,需使用 JavaScript 在网页上绘制图像。因此,需要使用getContext() 方法返回一个用于在画布上绘图的环境。当前唯一的合法值是 "2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。在计算完缩放比例后,使用drawImage() 方法在画布上绘制图像。drawImage() 方法能够绘制图像的某些部分,或增加或减少图像的尺寸。使用context.drawImage(img,x,y,width,height); 在画布上定位图像,并规定图像的宽度和高度。
代码如下:
var cvs = document.createElement('canvas');var scale = 1;if (this.width > 800 || this.height > 800) { //可以根据具体的要求去设定
if (this.width > this.height) {
scale = 800 / this.width;
} else {
scale = 800 / this.height;
}
}
cvs.width = this.width * scale;
cvs.height = this.height * scale;//计算等比缩小后图片宽高var ctx = cvs.getContext('2d');
ctx.drawImage(this, 0, 0, cvs.width, cvs.height);

回答2:

是有了,兄弟