テキストの細線化は、通常、マップ関連のニーズを作成するときに使用されます。私はこれを簡略化して、通常の Canvas 上で動作させます。
効果衝突検知キャンバス内のテキストが占める範囲を計算します
// テキストに必要な幅を計算します var p = { x: 10, y: 10, name: test text}; // キャンバス内でテキストが占める最大スペースを見つけます。 drawing board y 座標 var maxX = measure.width + px; // キャンバス内のテキストが占める最大の y 座標を見つけます ドローイング ボード // キャンバスはテキストの幅のみを計算できますが、テキストの高さは計算できません。したがって、テキストの幅をテキストの数で割った値を使用して、おおよその値を計算します。 var min = { x: px, y: py }; x: maxX, y: maxY }; // 境界は、キャンバス内のテキストが占める範囲です。 // ポイント座標を最小範囲とする場合、次の方法で textAlign と textBaseline を設定する方がより正確になります。 // 異なる位置に表示される場合は、範囲の最大点と最小点も調整する必要があります。 // ctx.textAlign = left; // ctx.textBaseline = top;varbounds = new Bounds(min, max);境界範囲オブジェクト
/** * 範囲オブジェクトを定義します */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;};検出
// 各描画の前に、描画されたテキストとの範囲交差検出を実行します。 // 交差が見つかった場合は、現在のテキストの描画を中止します。そうでない場合は、描画されたテキスト リストを描画して保存します (varindex in _textBounds) { // すべてをループします描画されたテキスト範囲が現在のテキスト範囲と交差するかどうかがテストされ、交差がある場合は衝突することを意味し、テキストはスキップされます。 ） { 戻る; }}_textBounds.push(bounds);ctx.fillStyle = red;ctx.textAlign = left;ctx.textBaseline = top;ctx.fillText(p.name, px, py);例、コードアドレスアドレスの例: 例
詳細については、完全なコードを表示できます: Github アドレス
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。