我正在尝试编写一个简单的jQuery插件来测试画布是否为空白。但是,我在返回布尔值时遇到了麻烦。
(function ($) {
$.fn.extend({
isBlank : function() {
return this.each(function () {
var context = this.getContext('2d'),
imageData = context.getImageData(0, 0, this.offsetWidth, this.offsetHeight);
for (var i = 0; i < imageData.data.length; i += 4) {
if (imageData.data[i+3] !== 0) {
return false;
}
}
return true;
});
}
});
})(jQuery);
由于某种原因,这将返回canvas
对象,而不是布尔值。但是,当我从each
循环中取出代码时,它会按预期返回布尔值。
如何才能使用each
循环?
答案 0 :(得分:3)
它正在返回画布,因为这是从函数isBlank
返回的内容。 return this.each(...)
返回调用的jQuery对象isBlank
。
您需要在.each
之前设置变量,在需要时将其设置为true或false,然后返回该变量。
注意:在.each
内,return false
功能如break
和return true
等continue
功能。
示例:
(function ($) {
$.fn.extend({
isBlank : function() {
var ret = true;
this.each(function () {
var context = this.getContext('2d'),
imageData = context.getImageData(0, 0, this.offsetWidth, this.offsetHeight);
for (var i = 0; i < imageData.data.length; i += 4) {
if (imageData.data[i+3] !== 0) {
ret = false;
}
}
});
return ret;
}
});
})(jQuery);
答案 1 :(得分:2)
(function ($) {
$.fn.extend({
isBlank : function() {
var result = true;
this.each(function () {
var context = this.getContext('2d'),
imageData = context.getImageData(0, 0, this.offsetWidth, this.offsetHeight);
for (var i = 0; i < imageData.data.length; i += 4) {
if (imageData.data[i+3] !== 0) {
result = false;
}
}
});
return result;
}
});
})(jQuery);
基本上,拉出多余的return
语句,并在函数末尾返回一个值。
答案 2 :(得分:1)
您的代码在this.each
上调用了一个返回值,该返回值应返回您正在调用.isBlank
的对象。我删除了每个上的返回值,看看你期望的行为是通过来声明一个变量,并在.each
调用之外声明一个变量。 {1}}然后返回,就像他在答案中提到的Rocket一样。
答案 3 :(得分:0)
通过设计,您的插件可以采用多个元素。这就是你迭代this
。
如果传入多个对象,有些空白,有些不是?要么将插件编码为仅使用一个对象,要么考虑更改插件如何通知您画布的状态。您可以将类添加到空白元素或数据标记,而不是返回false。
上述答案中的方法可行,但如果您使用它们,我建议您将插件名称更改为“AreAllBlank()”