Question

最初，我通过控制对象的顶部和左侧值来实例化一个Rect对象，使其超出画布区域，这样就不会在画布上渲染Rect对象。之后，更改Rect的顶部和左侧值，使其在事件处理程序的画布区域中生成，然后如何在画布上渲染Rect对象。

以下代码是演示：

<canvas id="canvas" width="800" height="600"></canvas>
<script src="js/fabric.js"></script>
<script>
    (function () {
        var canvas = this.__canvas = new fabric.Canvas('canvas');
        fabric.Object.prototype.transparentCorners = false;

        var targetLine = [], paramsG, paramsR;

        for (var k = 0; k < 20; k++) {
            paramsG = {
                left: 200,
                top: 530 - 100 * k,
                width: 20,
                height: 50,
                visibile: false,
                fill: '#62ab59',
                hasBorders: false,
                lockMovementX: true,
                hasControls: false
            };
            paramsR = {
                left: 200,
                top: 580 - 100 * k,
                width: 20,
                height: 50,
                visibile: false,
                fill: '#ed5d5d',
                hasBorders: false,
                lockMovementX: true,
                hasControls: false
            };
            canvas.add(new fabric.Rect(paramsG), new fabric.Rect(paramsR));
        }


        canvas.on('mouse:down', function (e) {
            if (e.target) {
                targetLine = getMemberByLeft(canvas._objects, e.target);
            }
        })

        canvas.on('object:moving', function (e) {
            targetLine.forEach(function (val) {
                canvas._objects[val.index].set({top: e.e.movementY + canvas._objects[val.index].top});
            })
            canvas.renderAll();
        })

        function getMemberByLeft(arr, tar) {
            var returnArr = [];
            arr.forEach(function (value, key) {
                if (value.left == tar.left && value != tar) {
                    returnArr.push({data: value, index: key});
                }
            })
            return returnArr;
        }
    })();
</script>

Answer 1

Fabric具有跳过对象渲染的功能（如果它们在屏幕上不可见），以获得更快的速度。

如果您按代码更改顶部和左侧，除非您致电object.setCoords()

，否则结构将无法理解该对象再次出现在屏幕上

如果您不想自动执行此操作，可以使用

将其禁用

canvas.skipOffscreen = false;

如何渲染对象重新出现在画布上

1 个答案: