javascript - fabric.js具有许多项目的性能(Performance of fabric.js with many items)

Question

I'm playing around with fabric.js and wonder how to tweak performance on handling object events when having a lot of items (more than 1500...).

(我在玩fabric.js，想知道当有很多项目（超过1500个...）时，如何调整处理对象事件的性能。)

I have build a little example: https://codepen.io/skurrilewelt/pen/XWWvBoP

(我建立了一个小例子： https : //codepen.io/skurrilewelt/pen/XWWvBoP)

    $(document).ready(function () {
        var canvas = new fabric.Canvas('canvas');
        var width = 10;
        var height = 10;
        var dist = 5;

        function add(left, top) {
            canvas.add(new fabric.Rect({
                left: left,
                top: top,
                width: width,
                height: height,
                fill: 'green',
                stroke: 'black',
                strokeWidth: 1,
                padding: 10,
                draggable: false,
                hasControls: false,
                hasBorders: false,
            }));
        }

        var col = 0;
        var row = 0;
        for (row = 0; row < 50; row++) {
            for (col = 0; col < 30; col++) {
                add(row * (width + dist), col * (height + dist));
            }
        }

        canvas.renderOnAddRemove = false;
        canvas.on({
            'mouse:down': function (e) {
                if (e.target) {
                    console.log(e.target);
                    canvas.getActiveObject().set("fill", '#f00');
                    canvas.renderAll();
                }
            }
        });

        canvas.renderAll();
    });

If you click an rect you will have to wait approximatly 3 secs until the rect will change it's color.

(如果单击一个rect，则必须等待大约3秒钟，直到rect改变其颜色。)

Are there other approaches or can I enhance the performance of this?

(还有其他方法还是可以提高其性能？)

I will need up to 3500 objects... Thanks in advance

(我最多需要3500个对象...预先感谢)

  ask by Ole_S translate from so

Answer 1

等待大神答复