Question

即使将画布缩放到不同的宽度和高度后，如何保持缩放。

下面是代码片段。

用于更新画布的宽度和高度的代码。

canvas.setWidth(1080);
canvas.setHeight(790);
canvas.renderAll();

用于根据屏幕尺寸缩放对象的代码：

function calculatePositionForMultipleObjects(sample = false){

    if(CLIPPING_OBJECT_COUNT > 2){ 
        var objectCount = CLIPPING_OBJECT_COUNT - 1;
        var rowCount = Math.ceil(objectCount / MAX_OBJECT_IN_LINE);

        //got the width and height of canvas.
        var width = canvas.width,
            height = canvas.height;

        //got the height except padding
        var widthWithoutPadding = width - ( MULTIPLE_OBJECT_PADDING_ON_ONE_SIDE * 2 ),
            heightWithoutPadding = height - ( MULTIPLE_OBJECT_PADDING_ON_ONE_SIDE * 2);

        var elementHeight = (heightWithoutPadding - ((rowCount - 1) * MULTIPLE_OBJECT_PADDING_ON_ONE_SIDE ))/ rowCount;
        var elementWidth = (widthWithoutPadding -  ((MAX_OBJECT_IN_LINE - 1) * MULTIPLE_OBJECT_PADDING_ON_ONE_SIDE))/ MAX_OBJECT_IN_LINE ;

        var calcLeft = MULTIPLE_OBJECT_PADDING_ON_ONE_SIDE;
        var calcTop = MULTIPLE_OBJECT_PADDING_ON_ONE_SIDE;

        // if(sample){
        //     calcTop = 0;
        //     calcLeft = 0;
        // }

        addOffset = true;
        for (index = 1; index <= objectCount; index++) {


            image = canvas.findObjectByClipName(IMAGE_CLIP_NAME_PRE +index );
            object = canvas.findByClipName(IMAGE_CLIP_NAME_PRE +index );

            if(object){

                if(index > 1 && index <= objectCount ){
                    calcLeft += (elementWidth + MULTIPLE_OBJECT_PADDING_ON_ONE_SIDE);
                    if(index > MAX_OBJECT_IN_LINE){
                        if(index % MAX_OBJECT_IN_LINE == 1 ){
                            calcLeft = MULTIPLE_OBJECT_PADDING_ON_ONE_SIDE;
                            if(sample){
                                calcLeft = 0;
                            }
                            calcTop += elementHeight + MULTIPLE_OBJECT_PADDING_ON_ONE_SIDE; 
                            addOffset = false;
                        }
                    }
                }
                if(elementWidth < elementHeight){
                    scale(elementWidth/96,object);
                    if(image){
                        scale(elementWidth/96, image);
                    }
                }else {
                    scale(elementHeight/96,object);
                    if(image){
                        scale(elementHeight/96, image);
                    }
                }

                var temp = calcTop;
                var offset = 0 ;
                if(addOffset && object.isType('rect')){
                    offset = (elementHeight - object.height) /2;


                }else if(addOffset && object.isType('circle')){
                    offset = (elementHeight - (object.radius * 2)) /2;
                }

                calcTop = calcTop + offset;

                object.set({

                    left: calcLeft,
                    top: calcTop
                });
                if(!sample){
                    if(image){
                        if(object.isType('circle')){

                            image.set({
                                left: (calcLeft + object.radius),
                                top: (calcTop + object.radius)
                            });
                        }
                        if(object.isType('rect')){
                            image.set({
                                left: (calcLeft + (object.width/2)),
                                top: (calcTop + (object.height/2))
                            });
                        }

                    }
                }

                calcTop = temp;

                if(object.isType('circle') || object.isType('rect')){
                    positionBtn(object);
                }

            }

        }
        canvas.renderAll();
    }
}

图像1：显示在将画布缩放到“新高度”之前的缩放图像

图像2：显示在缩放画布后，图像位于不同的位置。

我正在使用鼠标滚轮缩放特定图像。以下是该代码段

$(canvas.wrapperEl).on('mousewheel', function(e) {

        var target = canvas.findTarget(e);
        var delta = e.originalEvent.wheelDelta / 2000;

        if (target) {
            if(target.isType('image')){

                var factor = 0.8;
                if (delta < 0) {
                    factor = 1/factor;
                }
                var imageScale = target.getObjectScaling();
                target.scaleX = imageScale.scaleX * factor;
                target.scaleY = imageScale.scaleY * factor;


                // Calculate displacement of zooming position.
                var dx = (currentMouseX - target.left) * (factor - 1),
                    dy = (currentMouseY - target.top) * (factor - 1);
                // Compensate for displacement.
                target.left = target.left - dx;
                target.top = target.top - dy;

                target.setCoords();
                canvas.renderAll();
            }
            return false;
        }
    });

缩放画布后，如何保持缩放？。

我想要达到的全部目的是在 landscape a4 上按原样设置。

先谢谢了。任何帮助都将受到赞赏。

更改画布尺寸后，fabricjs在fabricjs画布中保持缩放图像

0 个答案: