javascript - 缩放 Canvas 不适用于剪辑区域

Question

我使用以下代码来实现放大和缩小效果。问题是我正在 Canvas 上执行剪辑[假设剪辑为带有描边颜色的圆圈]，然后执行此放大操作。发生的情况是所有元素都被缩放，但剪辑区域没有缩放。如何使剪辑区域缩放？

剪辑方法::

canvas.clipTo = function(ctx) {
                        var shp = new fabric.Rect({
                            top : top_Pos,
                            left : left_Pos,
                            width : c_width,
                            height : c_height,
                            fill:'',
                            stroke : 'red',
                            strokeWidth : 5

                        });
                        shp.render(ctx);
                    };

缩放方法::

// Zoom In
    function zoomIn() {
        // TODO limit the max canvas zoom in
        console.log('zoom in called');
        if (zoomEffect == false) {

            canvasScale = canvasScale * SCALE_FACTOR;

            canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
            canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

            var objects = canvas.getObjects();
            for (var i in objects) {
                var scaleX = objects[i].scaleX;
                var scaleY = objects[i].scaleY;
                var left = objects[i].left;
                var top = objects[i].top;

                var tempScaleX = scaleX * SCALE_FACTOR;
                var tempScaleY = scaleY * SCALE_FACTOR;
                var tempLeft = left * SCALE_FACTOR;
                var tempTop = top * SCALE_FACTOR;

                objects[i].scaleX = tempScaleX;
                objects[i].scaleY = tempScaleY;
                objects[i].left = tempLeft;
                objects[i].top = tempTop;

                objects[i].setCoords();
            }

            canvas.renderAll();
            zoomEffect = true;
        }
    }

    // Zoom Out
    function zoomOut() {
        // TODO limit max cavas zoom out
        console.log('zoom out called');
        if (zoomEffect == true) {

        canvasScale = canvasScale / SCALE_FACTOR;

        canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
        canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));

        var objects = canvas.getObjects();
        for (var i in objects) {
            var scaleX = objects[i].scaleX;
            var scaleY = objects[i].scaleY;
            var left = objects[i].left;
            var top = objects[i].top;

            var tempScaleX = scaleX * (1 / SCALE_FACTOR);
            var tempScaleY = scaleY * (1 / SCALE_FACTOR);
            var tempLeft = left * (1 / SCALE_FACTOR);
            var tempTop = top * (1 / SCALE_FACTOR);

            objects[i].scaleX = tempScaleX;
            objects[i].scaleY = tempScaleY;
            objects[i].left = tempLeft;
            objects[i].top = tempTop;

            objects[i].setCoords();
        }
            }
        canvas.renderAll();
            zoomEffect = false;
    }

Answer 1

使用canvas.zoomToPoint(point,zoomFactor);