Canvas文字衝突検出と減算

需要背景
一般的に地図に関する需要は文字を薄くすることですが、私も会社の地図エンジンのために機能を実現したときに実現しました.ここではそれを簡略化し、一般的なCanvasで操作し、地図の概念を導入していません.
効果
衝突検出
計算文字がcanvasで占める範囲

//          
var p = {
  x: 10,
  y: 10,
  name: "    "
};
var measure = ctx.measureText(p.name);
//       canvas          y   
var maxX = measure.width + p.x;
//       canvas          y   
// canvas          ，           。                     
var maxY = measure.width / p.name.length + p.y;

var min = { x: p.x, y: p.y };
var max = { x: maxX, y: maxY };
// bounds       canvas        。
//              ，textAlign、textBaseline              。
//            ，    、         
// ctx.textAlign = "left";
// ctx.textBaseline = "top";
var bounds = new Bounds(min, max);

Boundsレンジオブジェクト

/**
 *       
 */
function Bounds(min, max) {
  this.min = min;
  this.max = max;
}

/**
 *                 
 */
Bounds.prototype.intersects = function(bounds) {
  var min = this.min,
    max = this.max,
    min2 = bounds.min,
    max2 = bounds.max,
    xIntersects = max2.x >= min.x && min2.x <= max.x,
    yIntersects = max2.y >= min.y && min2.y <= max.y;

  return xIntersects && yIntersects;
};

けんしゅつ

//                       
//       ，         ，              
for (var index in _textBounds) {
  //             ，              ，          ，      
  var pointBounds = _textBounds[index];
  if (pointBounds.intersects(bounds)) {
    return;
  }
}

_textBounds.push(bounds);
ctx.fillStyle = "red";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText(p.name, p.x, p.y);

例、コードアドレス
サンプルアドレス:サンプル詳細は完全コードを表示できます:Githubアドレス
原文を読む