Javascript 在小画布上查看大画布的一部分

我有一个1377x740px的大画布，还有一个Dimensions 200x200的大画布。 最后一个画布用于预览下拉列表中选定的对象。当我选择对象的名称时，对象需要以相同的比例出现在小画布中

我的问题是，我该怎么做

我有一个代码，但这个代码，适合对象的宽度和高度的小画布

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

        });

这不管用， 我想要这样的东西：这个

---

与图像的“包含”框类似。

使用以下代码解决：

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();
            }
        }

var BR=obj.getBoundingRect（）；
如果（BR.宽度>画布2.宽度）{
而（BR.宽度+50>画布2.宽度）{
canvas2.zoomToPoint（新的fabric.Point（canvas2.getCenter（）.top，canvas2.getCenter（）.left），canvas2.getZoom（）/1.2）；
BR=obj.getBoundingRect（）；
}
}
if（BR.宽度+3通道2.高度）{
canvas2.zoomToPoint（新的fabric.Point（canvas2.getCenter（）.top，canvas2.getCenter（）.left），canvas2.getZoom（）/1.2）；
BR=obj.getBoundingRect（）；
}
}