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

Question

我是画布的新手。我的要求是在 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')

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

但随后输入的字段值以厘米（厘米单位）为单位；

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

如何从输入字段中动态绘制边界，该边界应该在最大宽度和最大高度之间？ 请帮我通过计算相对维度找到解决方案

Answer 1

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

width = maxwidth
height = 5/20 * maxheight

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