我是Fabric和JavaScript的新手。我编写了一个简单的书籍应用程序,当用户移动到下一页时,我需要清除画布,以便函数可以绘制下一页。对于某些页面,无论我做什么,我都无法清除画布。我已经尝试使用canvas.clear()并通过后门并使用context.clearRect,在函数内部和外部。以下代码基于" Sliding Ladybirds"在fabricjs.com上进行演示,注意函数的最后一行应该清除画布,但它不会,上面提到的其他选项也没有。谁能告诉我我错过了什么?
window.onload = function () {
function pics() {
var canvas = this.__canvas = new fabric.Canvas('cvs', { selection: false });
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
setInterval(function () {
fabric.Image.fromURL('http://fabricjs.com/assets/ladybug.png', function (img) {
img.set('left', fabric.util.getRandomInt(200, 600)).set('top', -50);
img.movingLeft = !!Math.round(Math.random());
canvas.add(img);
});
}, 1000);
(function animate() {
canvas.forEachObject(function (obj) {
obj.left += (obj.movingLeft ? -1 : 1);
obj.top += 1;
if (obj.left > 900 || obj.top > 500) {
canvas.remove(obj);
}
else {
obj.setAngle(obj.getAngle() + 2);
}
});
canvas.renderAll();
fabric.util.requestAnimFrame(animate);
})();
canvas.clear();
};
pics();
};
答案 0 :(得分:0)
如果仔细查看代码,它会有一个 public Loader<Cursor> onCreateLoader(int id, Bundle arguments) {
return new CursorLoader(this,
// Retrieve data rows for the device user's 'profile' contact.
Uri.withAppendedPath( ContactsContract.Profile.CONTENT_URI,ContactsContract.Contacts.Data.CONTENT_DIRECTORY),
ProfileQuery.PROJECTION,
//Don't select anything here null will return all available fields
null,
null,
null);
}
@Override
public void onLoadFinished(Loader<Cursor> cursorLoader, Cursor cursor) {
ArrayList<String> DataArray = new ArrayList<String>();
cursor.moveToFirst();
while (!cursor.isAfterLast()) {
//here where you get your data and its type
TypeName=cursor.getString(ProfileQuery.ADDRESS);//this will give you field name
Data=cursor.getString(ProfileQuery.NUMBER);//this will give you field data
cursor.moveToNext();
}
}
@Override
public void onLoaderReset(Loader<Cursor> cursorLoader) {
}
private interface ProfileQuery {
String[] PROJECTION = {
ContactsContract.Contacts.Data.MIMETYPE,
ContactsContract.CommonDataKinds.Email.ADDRESS ,
ContactsContract.CommonDataKinds.Email.DISPLAY_NAME,
ContactsContract.CommonDataKinds.Organization.DATA3,
};
int ADDRESS = 0;
int NUMBER = 1;
}
方法,每秒连续调用(1000毫秒)。您在setInterval()
之外使用canvas.clear()
方法。因此,即使清除画布,也会在下次执行setInterval()
时添加图像。您可以使用setInterval()
方法在清除画布时清除clearInterval()
(推荐),也可以根据需要将setInterval()
放在canvas.clear()
内。