无法清除布料帆布

时间:2015-03-22 01:17:26

标签: javascript canvas fabricjs

我是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();
    };

1 个答案:

答案 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()内。