キャンバスコンテンツのバウンディングボックスの座標を取得する方法は？

Question

私は地図付きのキャンバスを持っています。そのキャンバスにして、ユーザは、（赤で）描画することができ、最終的な結果は次のようになります。

ユーザーの後、彼は私がすべてのコンテンツのバウンディングボックスの座標を計算する必要が望んでいるものは何でも塗装として私は最終的に持っている可能性があり：

今私はできループキャンバスのすべてのピクセルを通って、すべての非空のピクセルに基づいてバウンディングボックスを計算するが、これはかなり重い操作です。意図した結果を達成するためのよりよい論理の考え？

Answer 1

描かれているものとポイントの直径を追跡できます。次に、最小/最大の境界。

これを行う1つの方法は、描画対象の位置と半径（ブラシ）または境界（不規則な形状）を追跡し、現在の最小/最大境界とマージして、必要に応じて新しい境界を更新することです。 "常にインテリアにマッチする境界。

例

var ctx = c.getContext("2d"), 
 
    div = document.querySelector("div > div"), 
 

 
    // keep track of min/max for each axis 
 
    minX = Number.MAX_SAFE_INTEGER, 
 
    minY = Number.MAX_SAFE_INTEGER, 
 
    maxX = Number.MIN_SAFE_INTEGER, 
 
    maxY = Number.MIN_SAFE_INTEGER, 
 
    
 
    // brush/draw stuff for demo 
 
    radius = 10, 
 
    rect = c.getBoundingClientRect(), 
 
    isDown = false; 
 

 
ctx.fillText("Draw something here..", 10, 10); 
 
ctx.fillStyle = "red"; 
 
c.onmousedown = function() {isDown = true}; 
 
window.onmouseup = function() {isDown = false}; 
 
window.onmousemove = function(e) { 
 
    if (isDown) { 
 
    var x = e.clientX - rect.left; 
 
    var y = e.clientY - rect.top; 
 
    
 
    // When something is drawn, calculate its impact (position and radius) 
 
    var _minX = x - radius; 
 
    var _minY = y - radius; 
 
    var _maxX = x + radius; 
 
    var _maxY = y + radius; 
 
    
 
    // calc new min/max boundary 
 
    if (_minX < minX) minX = _minX > 0 ? _minX : 0; 
 
    if (_minY < minY) minY = _minY > 0 ? _minY : 0; 
 
    if (_maxX > maxX) maxX = _maxX < c.width ? _maxX : c.width; 
 
    if (_maxY > maxY) maxY = _maxY < c.height ? _maxY : c.height; 
 
    
 
    // show new bounds 
 
    showBounds(); 
 
    
 
    // draw something 
 
    ctx.beginPath(); 
 
    ctx.arc(x, y, radius, 0, 6.28); 
 
    ctx.fill(); 
 
    } 
 
}; 
 

 
function showBounds() { 
 
    // for demo, using bounds for display purposes (inclusive bound) 
 
    div.style.cssText = 
 
    "left:" + minX + "px;top:" + minY + 
 
    "px;width:" + (maxX-minX-1) + "px;height:" + (maxY-minY-1) + 
 
    "px;border:1px solid blue"; 
 
}

div {position:relative} 
 
div > div {position:absolute;pointer-events:none}

<div> 
 
    <canvas id=c width=600 height=600></canvas> 
 
    <div></div> 
 
</div>