如何获取画布内容的边界框坐标？ [英] How to get bounding box coordinates for canvas content?

问题描述

我有一张带地图的画布。在该画布中，用户可以绘制（红色），最终结果将是：

在用户绘制任何他想要的东西后，我需要计算所有内容的边界框坐标，这样我最终可以：

现在，我可以遍历画布的每个像素，并根据每个像素计算边界框空像素，但这是一个非常繁重的操作。是否有更好的逻辑来实现预期的结果？

解决方案

您可以跟踪绘制的内容和点的直径。然后是边界的最小值/最大值。

这样做的一种方法是跟踪绘制内容的位置和半径（画笔）或边界（不规则形状），然后将其与当前最小/最大绑定合并以更新新绑定，如果需要，实际上推边界始终匹配内部。

示例

  var ctx = c.getContext（2d），div = document.querySelector（div> div），//跟踪每个轴的最小值/最大值minX = Number.MAX_SAFE_INTEGER，minY = Number.MAX_SAFE_INTEGER，maxX = Number.MIN_SAFE_INTEGER，maxY = Number.MIN_SAFE_INTEGER，// demo / 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; //绘制某些东西时，计算其影响（位置和半径）var _minX = x  -  radius; var _minY = y  -  radius; var _maxX = x + radius; var _maxY = y + radius; //计算新的最小/最大边界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。高度？ _maxY：c.height; // show new bounds showBounds（）; //绘制一些东西ctx.beginPath（）; ctx.arc（x，y，radius，0,6.28）; ctx.fill（）;函数showBounds（）{//用于演示，使用边界用于显示目的（包含边界）div.style.cssText =left：+ minX +px; top：+ minY +px; width： +（maxX-minX-1）+px; height：+（maxY-minY-1）+px; border：1px solid blue;}  

< pre class =snippet-code-css lang-css prettyprint-override> div {position：relative} div> div {position：absolute; pointer-events：none}

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

I have a canvas with a map. In that canvas the user is able to draw (in red) and the final result will be:

After the user as painted whatever he wants I need to calculate the bounding box coordinates of all the content so I could ultimately have:

Now I can loop through every pixel of the canvas and calculate the bounding box based on every non-empty pixel but this is quite a heavy operation. Any idea of a better logic to achieve the intended results?

解决方案

You can track what is being drawn and the diameter of the points. Then min/max that for the boundary.

One way to do this is to track position and radius (brush) or boundary (irregular shape) of what is being drawn, then merge that with current min/max bound to update the new bound if needed in effect "pushing" the bounds to always match the interior.

Example

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>

这篇关于如何获取画布内容的边界框坐标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！