Gecko-CSS布局边框半径-Javascript转换

我试图得到精确的公式，以便计算画布中CSS边界半径属性。我已经尝试过并用javascript编写了一个示例（见下文），但没有成功

看起来浏览器仍在添加一些修改，以调整边框。我无法识别他们。所以我检查了Gecko布局引擎的源代码，但我不确定在哪里可以找到这个公式（在源代码中）

可能在 Dealth/Prime/NSCSSReNeDeNealEng.CPP中，但仍然有很多代码，而且是C++（我没有语言能力）

请参阅Gecko存储库：

所以，如果有人能帮助我实现这种适应，或者给我一些代码块来计算边界半径“弧，方向？”（在gecko中）我就能做到

Javascript/HTML代码片段（当前，从良好改编到接近）

（红色形状=画布形状，绿色形状=HTML形状）

我正在使用此函数绘制形状：

ctx.constructor.prototype.fillRoundedRect

此功能用于接近浏览器自适应：

correctorradius

正如您将看到的，当左上角、右上角和左下角滑块处于最大值时，我会得到这个结果。浏览器（绿色）显示得非常完美，而我的浏览器（红色）显示得不好。

请参见下面的片段

//Ctx
var ctx=document.getElementById（“圆角矩形”）.getContext（“2d”）；
功能校正半径（r、w、h）{
如果（r.tl+r.tr>w）{
r、 tl-=（r.tl+r.tr-w）/2；
r、 tr=w-r.tl；
}
如果（r.bl+r.br>w）{
r、 br-=（r.br+r.bl-w）/2；
r、 bl=w-r.br；
}
如果（r.tl+r.bl>h）{
r、 tl-=（r.tl+r.bl-h）/2；
r、 bl=h-r.tl；
}
如果（r.tr+r.br>h）{
r、 tr-=（r.tr+r.br-h）/2；
r、 br=h-r.tr；
}
}
//圆矩形函数
ctx.constructor.prototype.fillRoundedRect=
功能（xx，yy，ww，hh，rad，fill，stroke）{
校正半径（rad、ww、hh）；
如果（类型（rad）=“未定义”），rad=5；
this.beginPath（）；
此。移动到（xx，yy）；
这个.arcTo（xx+ww，yy，xx+ww，yy+hh，rad.tr）；
这个.arcTo（xx+ww，yy+hh，xx，yy+hh，rad.br）；
这个.arcTo（xx，yy+hh，xx，yy，rad.bl）；
这个.arcTo（xx，yy，xx+ww，yy，rad.tl）；
if（stroke）this.stroke（）；//默认为无笔划
if（fill | | typeof（fill）==“undefined”）this.fill（）；//默认为fill
};
ctx.fillStyle=“红色”；
ctx.strokeStyle=“#ddf”；
var copy=document.getElementById（'copy'）；
var tl=document.getElementById（'tl'）；
var tr=document.getElementById（'tr'）；
var bl=document.getElementById（'bl'）；
var br=document.getElementById（'br'）；
var off=document.getElementById（'off'）；
功能测试（）{
ctx.clearRect（0,060500）；
/*1.左上角*/
/*2.右上角*/
/*3.右下角*/
/*4.左下角*/
var borders=[tl.value，tr.value，br.value，bl.value]。连接（'px'）+'px'；
copy.style.borderRadius=边框；
var copyRad=borders.replace（/px/g''）.split（''）.map（函数（a）{
返回parseInt（a）
});
var rad={
tl:copyRad[0]，
tr:copyRad[1]，
br:copyRad[2]，
bl:copyRad[3]
};
var o=+off.value；
ctx.fillRoundedRect（15+o，15+o，100100，rad）；
}
tl.oninput=测试；
tr.oninput=测试；
bl.oninput=试验；
br.oninput=测试；
off.oninput=测试；
test（）

标题
html，正文{
保证金：0；
填充：0；
}
左上角


右上角


左下角


右下角


抵消


问题在于您的
correctRadius
功能。正如您所看到的，您多次重新计算值，这是不正确的

让我们举一个例子，将TopLeft、TopRight和BottomLeft设置为最大值（100px）：

 1）你会考虑第一个条件，你会更新你的价值观：
TopLeft=50px | TopRight=50px（这些值是正确的）

 2）现在你将考虑第三个条件，因为你有TL+TB（100px+50px）＞h（100px），你会更新这样的值：
左上角=25px |左下角75px（这两个值都是错误的，正确的值都应该是50px）

因此，你不必单独计算值，你应该考虑所有这些值，并且根据<强>初始< /强>值，对每个边做<强> >只有一个<强>计算。< /P>

这个想法是考虑两个相邻边之间的差值的最大值。让我们考虑上面的同一个例子，并做出3个不同的值，比如：

TL=100px | TR=90px | BL=100px | BR=0px

TL与TR和BL相邻：


考虑到TR，我们将有
190px>100px
，因此TL=45px
考虑到BL，我们将有
200px>100px
，这个TL=50px

因此，我们应该考虑最大值<强> 50px < /强>。我们对其他方面也这样做

以下是完整的代码：


//Ctx
var ctx=document.getElementById（“圆角矩形”）.getContext（“2d”）；
功能校正半径（r、w、h）{
var-tl=r.tl；
var-tr=r.tr；
var-br=r.br；
var bl=r.bl；
r、 tl-=数学最大值（数学最大值（（tl+tr-w）/2,0），
数学最大值（（tl+bl-h）/2,0）；
r、 tr-=数学最大值（数学最大值（（tr+tl-w）/2,0），
数学最大值（（tr+br-h）/2,0）；
r、 br-=数学最大值（数学最大值（（br+bl-w）/2,0），
数学最大值（（br+tr-h）/2,0）；
r、 bl-=数学最大值（数学最大值（（bl+br-w）/2,0），
数学最大值（（bl+tl-h）/2,0）；
}
//圆矩形函数
ctx.constructor.prototype.fillRoundedRect=
功能（xx，yy，ww，hh，rad，fill，stroke）{
校正半径（rad、ww、hh）；
如果（类型（rad）=“未定义”），rad=5；
this.beginPath（）；
这个。移动到（xx，