Javascript 维护新fabric js对象（如文本等）的对象大小和位置（根据通用画布）

现在我正在使用这个程序。我从这个页面获取了一个现有的代码，并通过添加一些添加文本的按钮（并对其进行编辑）进行了修改。每次我点击“添加文本”按钮，文本就会出现在画布上；但问题是，当我单击“放大/缩小”按钮，然后再次按下“添加文本”按钮时，文本在画布上的位置和大小与我预期的不同。很明显，每次我按下“放大/缩小”按钮时，文本都会变小或变大，新文本的定位也是如此。这个职位并不像预期的那样。 我想要的是，新文本显示在画布上，并根据常规画布保持比例和位置。例如，始终定位在中心和相同的大（根据通用画布）

这是当前的代码：

//var$=function（id）{return document.getElementById（id）}；
var canvas=this.\uu canvas=newfabric.canvas（'c'）；
画布设置高度（300）；
画布设置宽度（500）；
var img=新图像（）；
img.onload=函数（）{
setBackgroundImage（img.src，canvas.renderal.bind（canvas），{}）；
}
img.src=”https://static.cineclick.com.br/sites/adm/uploads/banco_imagens/31/602x0_1439644246.jpg";
$（“#btnZoomIn”）。单击（函数（）{
zoomIn（）；
});
$（“#btnZoomOut”）。单击（函数（）{
zoomOut（）；
});
$（“#btnResetZoom”）。单击（函数（）{
重置缩放（）；
});
函数zoomIn（）{
canvas.setZoom（canvas.getZoom（）*1.1）；
canvas.renderAll（）；
}
函数zoomOut（）{
canvas.setZoom（canvas.getZoom（）*0.9）；
canvas.renderAll（）；
}
函数resetZoom（）{
canvas.setZoom（1）；
canvas.renderAll（）；
}
函数Addtext（）{
canvas.add（new fabric.IText（'Tap and Type'）{
左:50,，
前100名，
fontFamily：“arial黑色”，
填写：“#333”，
尺码：50
}));
}
document.getElementById（'text-color'）。onchange=function（）{
canvas.getActiveObject（）.setFill（this.value）；
canvas.renderAll（）；
};
document.getElementById（'text-color'）。onchange=function（）{
canvas.getActiveObject（）.setFill（this.value）；
canvas.renderAll（）；
};
document.getElementById（'text-bg-color'）。onchange=function（）{
canvas.getActiveObject（）.setBackgroundColor（此.value）；
canvas.renderAll（）；
};
document.getElementById（'text-lines-bg-color'）。onchange=function（）{
canvas.getActiveObject（）.setTextBackgroundColor（此.value）；
canvas.renderAll（）；
};
document.getElementById（'text-stroke-color'）。onchange=function（）{
canvas.getActiveObject（）.setStroke（此.value）；
canvas.renderAll（）；
};
document.getElementById（'text-stroke-width'）。onchange=function（）{
canvas.getActiveObject（）.setStrokeWidth（此.value）；
canvas.renderAll（）；
};
document.getElementById（'font-family'）。onchange=function（）{
canvas.getActiveObject（）.setFontFamily（this.value）；
canvas.renderAll（）；
};
document.getElementById（'text-font-size'）。onchange=function（）{
canvas.getActiveObject（）.setFontSize（此.value）；
canvas.renderAll（）；
};
document.getElementById（'text-line-height'）。onchange=function（）{
canvas.getActiveObject（）.setLineHeight（此.value）；
canvas.renderAll（）；
};
document.getElementById（'text-align'）。onchange=function（）{
canvas.getActiveObject（）.setTextAlign（this.value）；
canvas.renderAll（）；
};
radios5=document.getElementsByName（“fonttype”）；//wijzig naar按钮
对于（变量i=0，max=5.length；i

#c{
边框：1px纯红；
顶部：22px；
左：0px；
身高：100%；
宽度：99%；
}
.盒子{
浮动：左；
边缘：1米；
}
.后箱{
清除：左；
}

缩放缩放重置缩放


添加文本
字体系列：
Arial
赫尔维蒂卡
万里达专业酒店
美味的
威尔达纳
佐治亚州
信使
连环漫画
影响
摩纳哥
擎天柱
霍夫勒文本
灰泥
订婚


文本对齐：
左边
居中
赖特
证明正当
背景色：
背景文本颜色：
笔划颜色：
笔划宽度：
字体大小：
线路高度：
大胆的
斜体
强调
线穿过
上划线

对文本对象使用这些值可以在所有缩放级别中获得相同的大小

演示

//var$=函数（id）{返回单据
left: 50/canvas.getZoom(),
top: 100/canvas.getZoom(),
fontSize: 50/canvas.getZoom()