Javascript 如何根据用户输入动态计算和绘制画布边框

我是新手。我的要求是在SVG中绘制矩形，我已经用d3库实现了这一点

             this.borderWidth = 300 //(dynamic value);
               this.maxWidth = 600;
             this.borderHeight = 400; //(dynamic value);
            this.maxHeight = 600;
             var svg = d3.select(this.child.canvas.current).append('svg')
                .attr('id','Preview')
                .attr('width', this.borderWidth)
                .attr('height', this.borderHeight)
                .style('border', '1px solid black')

但我必须从输入字段中动态绘制边界，该字段不应跨越
此.maxWidth值和此.maxHeight值

但输入的字段值是厘米（厘米单位）

问题是，当用户输入一个较大的输入值时，边框将跨越“最大宽度”和“最大高度”

如何从输入字段中动态绘制介于“最大宽度”和“最大高度”之间的边框？

---

请通过计算相对尺寸来帮助我找到解决方案

如果用户输入的是以厘米为单位的值，您必须找出哪一个是最大的，例如，如果他输入20厘米宽和5厘米高：

width = maxwidth
height = 5/20 * maxheight

---

那么你的矩形应该是正确的比例，并且永远不会超过maxwidth或maxheight（请注意，某些特定的矩形，如正方形，可能会有问题）。

谢谢你的回答`让maxwidth=600，让maxheight=600；设边界宽度=3；设边界高度=11；设borderAspectRatio=边框宽度/边框高度；如果（borderAspectRatio>1）{maxHeight=maxWidth/borderAspectRatio；}否则{maxWidth=maxHeight*borderAspectRatio；}`我这样实现了，对吗？'我本来会这样做的，但我不确定，试着找出最有效的方法：`让maxWidth=600，让maxHeight=600；设边界宽度=3；设边界高度=11；设borderAspectRatio=边框宽度/边框高度；如果（borderAspectRatio>1）{borderWidth=maxWidth；borderHeight=borderAspectRatio*maxHeight}或者{borderHeight=maxHeight；borderWidth=maxWidth/borderAspectRatio；}`则可以基于borderWidth和borderHeight绘制矩形。