Javascript - HTML Canvas上的Gecko边框半径自适应（CSS border-radius）

时间：2018-01-27 17:29:36

标签： javascript css math canvas gecko

我正试图弄清楚如何将“border-radius”css属性的行为重现为HTML画布。

所以我已经在Javascript中做了一些事情，以便使用特定的半径（每个角落）计算给定形状的正确边框。

如果需要，以下是上一个问题：Gecko - CSS layout border radius - Javascript conversion

我已经设法接近浏览器改编，但仍然存在问题，似乎它是最后一个，也是最难的部分！

我们举一个例子来解释你的问题

采用100px宽度和宽度的形状100px身高。border-radius : 37px 100px 1px 100px现在将以下半径应用于每个角落：

  • 左上角：37px
  • 右上：100px
  • 右下：1px
  • 左下：100px

因此，css样式为correctRadius(r, w, h)

现在让我们考虑使用下面的代码，以便在画布中绘制此形状。

通过使用函数{tl: 18.5, tr: 81.5, br: 0.5, bl: 81.5}以避免形状不好，每个角将按以下方式计算：

=＆GT; layout/painting/nsCSSRenderingBorders.cpp

以下是这方面的视觉效果：

calc problem css border radius canvas

  

您可以在以下代码段中对其进行测试

如您所见，浏览器形状（绿色）与画布形状重叠（由于不透明度，棕色+'粉红色'）。为了检查坏角（粉红色），我在它上面添加了一些不透明度。

棕色形状不适合绿色形状，左上角正从基座出来，左下角和右上角不要适合绿色的形状。

我已经尝试修复但没有成功，并且还查看了此文件中的Gecko布局引擎（https://github.com/mozilla/gecko-dev）的来源：// Ctx var ctx = document.getElementById("rounded-rect").getContext("2d"); ctx.translate(0, 0); function correctRadius(r, w, h) { var tl = r.tl; var tr = r.tr; var br = r.br; var bl = r.bl; r.tl -= Math.max(Math.max((tl + tr - w) / 2, 0), Math.max((tl + bl - h) / 2, 0)); r.tr -= Math.max(Math.max((tr + tl - w) / 2, 0), Math.max((tr + br - h) / 2, 0)); r.br -= Math.max(Math.max((br + bl - w) / 2, 0), Math.max((br + tr - h) / 2, 0)); r.bl -= Math.max(Math.max((bl + br - w) / 2, 0), Math.max((bl + tl - h) / 2, 0)); } //Round rect func ctx.constructor.prototype.fillRoundedRect = function(xx, yy, ww, hh, rad, fill, stroke) { correctRadius(rad, ww, hh); if (typeof(rad) === "undefined") rad = 5; this.beginPath(); this.moveTo(xx, yy); this.arcTo(xx + ww, yy, xx + ww, yy + hh, rad.tr); this.arcTo(xx + ww, yy + hh, xx, yy + hh, rad.br); this.arcTo(xx, yy + hh, xx, yy, rad.bl); this.arcTo(xx, yy, xx + ww, yy, rad.tl); if (stroke) this.stroke(); // Default to no stroke if (fill || typeof(fill) === "undefined") this.fill(); // Default to fill }; ctx.fillStyle = "red"; 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 last = []; setInterval(function() { /* 1.Top left */ /* 2. Top right */ /* 3. Bottom right */ /* 4. Bottom left */ var bordersCSSProps = [ "border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius" ], elementBorders = [], elementStyle = getComputedStyle(copy); var changed = false; for (var i = 0; i < 4; ++i) { elementBorders[i] = elementStyle.getPropertyValue(bordersCSSProps[i]); if (elementBorders[i] !== last[i]) { changed = true; last[i] = elementBorders[i]; } } if (changed) { var borders = [].concat(elementBorders).map(function(a) { return parseInt(a) }); var rad = { tl: borders[0], tr: borders[1], br: borders[2], bl: borders[3] }; ctx.clearRect(0, 0, 600, 500); ctx.fillRoundedRect(120, 120, 100, 100, rad); } }, 1E3 / 60); function elemBordersSet() { var borders = [tl.value, tr.value, br.value, bl.value].join('px ') + 'px'; copy.style.borderRadius = borders; } tl.oninput = elemBordersSet; tr.oninput = elemBordersSet; bl.oninput = elemBordersSet; br.oninput = elemBordersSet;，但没有找到任何内容+我没有C ++技能

如果有人可以帮我解决这个问题，或者给我一些建议，我将能够解决这个问题并让边界工作

html,
body {
  margin: 0;
  padding: 0;
}
<div style="display:inline-block; position: absolute;
left:120px;top:120px; width: 100px; height: 100px; background:green;

border-radius:  100px 49px 1px 1px;" id="copy">

</div>

<canvas style="opacity:0.5; z-index:1; display: inline-block; position: absolute; left:0; top:0;" id="rounded-rect" width="600" height="500">

</canvas>


<div style="margin-top:250px; position:absolute; z-index:5">
  <label>
        Top left
        <input type="range" min="1" max="100" value="0" class="slider" id="tl"></label><br/>
  <label>
        Top right
        <input type="range" min="1" max="100" value="0" class="slider" id="tr"></label><br/>
  <label>
        Bottom left
        <input type="range" min="1" max="100" value="0" class="slider" id="bl"></label><br/>
  <label>
        Bottom right
        <input type="range" min="1" max="100" value="0" class="slider" id="br"></label><br/>
</div>
{{1}}

1 个答案:

答案 0 :(得分：0)

  

找到了解决方案！

我们只需要计算一个scaleRatio：

首先，我们得到maxRadiusWidth（r.tl + r.tr，r.bl + r.br）＆amp; maxRadiusHeight（r.tl + r.bl，r.tr + r.br）

然后 widthRatio = (w / maxRadiusWidth)＆amp; heightRatio = (h / maxRadiusHeight)具有形状的大小（WIDTH＆amp; HEIGHT）

然后我们将这两个变量中的较低者变为Math.min(Math.min(widthRatio, heightRatio), 1)，以便不会脱离形状和我们确保这一点 比例低于1.

最后，我们只需要将每个角落乘以这个比例，以获得正确的尺寸！

r.tl = tl*scaleRatio;
r.tr = tr*scaleRatio;
r.br = br*scaleRatio;
r.bl = bl*scaleRatio;

请参阅下面的代码段;） 

// Ctx
var ctx = document.getElementById("rounded-rect").getContext("2d");
ctx.translate(0, 0);

function correctRadius(r, w, h) {

        var
            maxRadiusWidth = Math.max(r.tl + r.tr, r.bl + r.br),
            maxRadiusHeight = Math.max(r.tl + r.bl, r.tr + r.br),
            widthRatio = w / maxRadiusWidth,
            heightRatio = h / maxRadiusHeight,
            scaleRatio = Math.min(Math.min(widthRatio, heightRatio), 1);


        for (var k in r)
            r[k] = r[k] * scaleRatio;

}


//Round rect func
ctx.constructor.prototype.fillRoundedRect =
    function(xx, yy, ww, hh, rad, fill, stroke) {
        correctRadius(rad, ww, hh);
        if (typeof(rad) === "undefined") rad = 5;
        this.beginPath();
        this.moveTo(xx, yy);
        this.arcTo(xx + ww, yy, xx + ww, yy + hh, rad.tr);
        this.arcTo(xx + ww, yy + hh, xx, yy + hh, rad.br);
        this.arcTo(xx, yy + hh, xx, yy, rad.bl);
        this.arcTo(xx, yy, xx + ww, yy, rad.tl);
        if (stroke) this.stroke(); // Default to no stroke
        if (fill || typeof(fill) === "undefined") this.fill(); // Default to fill
    };

ctx.fillStyle = "red";
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 last = [];
setInterval(function() {


    /* 1.Top left */
    /* 2. Top right */
    /* 3. Bottom right  */
    /* 4. Bottom left */

    var bordersCSSProps = [
            "border-top-left-radius",
            "border-top-right-radius",
            "border-bottom-right-radius",
            "border-bottom-left-radius"
        ],
        elementBorders = [],
        elementStyle = getComputedStyle(copy);

    var changed = false;

    for (var i = 0; i < 4; ++i) {
        elementBorders[i] = elementStyle.getPropertyValue(bordersCSSProps[i]);
        if (elementBorders[i] !== last[i]) {
            changed = true;
            last[i] = elementBorders[i];
        }
    }

    if (changed) {

        var borders = [].concat(elementBorders).map(function(a) {
            return parseInt(a)
        });
        var rad = {
            tl: borders[0],
            tr: borders[1],
            br: borders[2],
            bl: borders[3]
        };

        ctx.clearRect(0, 0, 600, 500);


        ctx.fillRoundedRect(120, 120, 100, 200, rad);


    }
}, 1E3 / 60);


function elemBordersSet() {
    var borders = [tl.value, tr.value, br.value, bl.value].join('px ') + 'px';
    copy.style.borderRadius = borders;

}

tl.oninput = elemBordersSet;
tr.oninput = elemBordersSet;
bl.oninput = elemBordersSet;
br.oninput = elemBordersSet;
<div style="display:inline-block; position: absolute;
left:120px;top:120px; width: 100px; height: 200px; background:green;

border-radius: 33px 71px 40px 100px;" id="copy">

</div>

<canvas style="z-index: 1;opacity:0.4;display: inline-block; position: absolute; left:0; top:0;" id="rounded-rect"
    width="600"
    height="500">

</canvas>


<div style="position: absolute; z-index: 5;margin-top: 330px;">
<label>
    Top left
    <input type="range" min="1" max="500" value="0" class="slider" id="tl"></label><br/>
<label>
    Top right
    <input type="range" min="1" max="500" value="0" class="slider" id="tr"></label><br/>
<label>
    Bottom left
    <input type="range" min="1" max="500" value="0" class="slider" id="bl"></label><br/>
<label>
    Bottom right
    <input type="range" min="1" max="500" value="0" class="slider" id="br"></label><br/>
</div>

相关问题
最新问题