Javascript 从用户输入更改行的长度/距离（画布）

希望你们都好

我正在使用画布制作平面布置图，我的墙壁由线条连接，我能够计算两点之间的线条长度/距离。现在我想要实现的是用户输入的动态墙长度

下面是一个示例代码

    var wallPoints = [{
            "label" : 'A',
            "x1": 19.113499999999952, "y1": -76.96199999999996,
            "x2": 19.113499999999952, "y2": 132.33399999999997
        }, {
            "label" : 'B',
            "x1": 19.113499999999952, "y1": 132.33399999999997,
            "x2": 335.08950000000004, "y2": 132.33399999999997
        }, {
            "label" : 'C',
            "x1": 19.113499999999952, "y1": -76.96199999999996,
            "x2": 283.2734999999998, "y2": -76.96199999999996
        }, {
            "label" : 'D',
            "x1": 283.2734999999998, "y1": -76.96199999999996,
            "x2": 283.2734999999998, "y2": -25.146000000000015
        }, {
            "label" : 'E',
            "x1": 283.2734999999998, "y1": -25.146000000000015,
            "x2": 335.08950000000004, "y2": -25.146000000000015
        }, {
            "label" : 'F',
            "x1": 335.08950000000004, "y1": -25.146000000000015,
            "x2": 335.08950000000004, "y2": 132.33399999999997
    }];

    function setWallLength(index, wallLength) {
        // wallLength is from a user input e.g 100,200,300 etc
        var wall = wallPoints[index];

        // how to calculate length and update points here?
        // compute wall length
        // update wall length
        // walls should be relative to each other.
    }

我添加了一个代码片段，您可以查看它。此外，墙的长度应相对于其他墙进行更改，以便楼板平面图保持完整

希望有人能给我们一点启示

非常感谢

var canvas=document.getElementById（'lineDistance'）；
var context=canvas.getContext（'2d'）；
var墙点=[{
“标签”：“A”，
“x1”：19.11349999952，“y1”：-76.9619999996，
“x2”：19.11349999952，“y2”：132.333999997
}, {
“标签”：“B”，
“x1”：19.11349999952，“y1”：132.333999999997，
“x2”：335.08950000000004，“y2”：132.333999997
}, {
“标签”：“C”，
“x1”：19.11349999952，“y1”：-76.9619999996，
“x2”：283.273499998，“y2”：-76.96199996
}, {
“标签”：“D”，
“x1”：283.2734999998，“y1”：-76.96199996，
“x2”：283.2734999998，“y2”：-25.1460000000015
}, {
“标签”：“E”，
“x1”：283.2734999998，“y1”：-25.1460000000015，
“x2”：335.08950000000004，“y2”：-25.1460000015
}, {
“标签”：“F”，
“x1”：335.08950000000004，“y1”：-25.1460000015，
“x2”：335.08950000000004，“y2”：132.333999997
}]
draw（）；
函数getWallLength（x1、y1、x2、y2）{
return Math.sqrt(
数学功率（x2-x1，2）+
数学pow（y2-y1,2））；
}
函数setWallLength（索引，wallLength）{
var wall=wallPoints[指数]；
//这里如何计算长度和更新点？
//计算墙长
//更新墙长度
//墙应该是相对的。
//重新绘制以进行更改
draw（）；
}
函数绘图（）{
var centerX=canvas.width/3；
var centerY=canvas.height/4；
var controls=document.getElementById（'controls'）；
controls.innerHTML=''；
用于（以墙点为单位的var i）{
var wall=墙点[i]；
context.save（）；
上下文。翻译（centerX、centerY）；
//创建输入
var input=document.createElement（'input'）；
setAttribute（'type'，'text'）；
input.setAttribute（'id'，i）；
var wall_length=getWallLength（墙x1，墙y1，墙x2，墙y2）；
input.setAttribute（'value'，墙长）；
//设置墙长度更改的事件
input.addEventListener（'change'，函数（事件）{
setWallLength（event.target.id、event.target.value）；
});
var label=document.createElement（'label'）；
label.innerHTML=wall.label+'：'；
label.appendChild（输入）；
控件。追加子对象（标签）；
//画墙
context.beginPath（）；
上下文移动到（wall.x1，wall.y1）；
context.lineTo（wall.x2，wall.y2）；
context.lineWidth=10；
context.strokeStyle='black'；
stroke（）；
//绘制墙标签
context.font=12+“px arial”；
context.lineWidth=1；
context.fillStyle=context.strokeStyle=“白色”；
context.textAlign=“中心”；
context.textb基线=“中间”；
var dx=wall.x2-wall.x1；
var dy=wall.y2-wall.y1；
var midX=wall.x1+dx*0.50；
var midY=wall.y1+dy*0.50；
context.fillText（wall.label，midX，midY）；
restore（）；
}
}

这似乎是生成画布的正确方法hapenp@LDS你是什么意思？