我有一个1377x740px的大画布,其他尺寸为200x200的画布。
最后一个画布用于预览模式,该模式是在下拉列表中选择的对象。当我选择对象的名称时,该对象需要以相同的比例出现在小画布中。

我的问题是,我该怎么做?

我有一个代码,但是这个代码可以使对象适合小画布的宽度和高度,

obj.set({
            scaleY:  obj.height / (obj.getBoundingRect().height),
            scaleX:   obj.width / (obj.getBoundingRect().width),

        });


这行不通,
我想要类似的东西:fit-object-css

就像图片的“包含”框一样。

最佳答案

用以下代码解决:

var BR = obj.getBoundingRect();
        if(BR.width>canvas2.width){
            while(BR.width+50>canvas2.width){
                canvas2.zoomToPoint(new fabric.Point(canvas2.getCenter().top, canvas2.getCenter().left), canvas2.getZoom()/1.2);
                BR=obj.getBoundingRect();
            }
        }
        if(BR.width+3<canvas2.width){
            while(BR.width+50<canvas2.width){
                canvas2.zoomToPoint(new fabric.Point(canvas2.getCenter().top, canvas2.getCenter().left), canvas2.getZoom()*1.2);
                BR=obj.getBoundingRect();
            }
        }
        if(BR.height>canvas2.height){
            while(BR.height>canvas2.height){
                canvas2.zoomToPoint(new fabric.Point(canvas2.getCenter().top, canvas2.getCenter().left), canvas2.getZoom()/1.2);
                BR=obj.getBoundingRect();
            }
        }

关于javascript - 在小 Canvas 上看到大 Canvas 的一部分,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39614545/

10-10 01:19