资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Canvas 文字碰撞检测并抽稀

Canvas 文字碰撞检测并抽稀

2i18ns / 3067人阅读

摘要：所以就利用文字的宽度除以文字个数计算个大概为该文字在中所占据的范围。在取点位坐标作为最小范围时，按照以下方式设置会比较准确。

需求背景

一般在做地图相关的需求是才会用到文字抽稀，我也是在为公司的地图引擎实现一个功能时才实现了该方法，在这里将其简化了，就在普通的 Canvas 上进行操作，并没有引入地图概念

效果

碰撞检测
计算文字在 canvas 中所占据的范围
</>复制代码 
  1. // 计算文字所需的宽度
  2. var p = {
  3.   x: 10,
  4.   y: 10,
  5.   name: "测试文字"
  6. };
  7. var measure = ctx.measureText(p.name);
  8. // 求出文字在 canvas 画板中占据的最大 y 坐标
  9. var maxX = measure.width + p.x;
  10. // 求出文字在 canvas 画板中占据的最大 y 坐标
  11. // canvas 只能计算文字的宽度，并不能计算出文字的高度。所以就利用文字的宽度除以文字个数计算个大概
  12. var maxY = measure.width / p.name.length + p.y;
  13. var min = { x: p.x, y: p.y };
  14. var max = { x: maxX, y: maxY };
  15. // bounds 为该文字在 canvas 中所占据的范围。
  16. // 在取点位坐标作为最小范围时，textAlign、textBaseline 按照以下方式设置会比较准确。
  17. // 如设置在不同的位置展示，范围最大、最小点也需进行调整
  18. // ctx.textAlign = "left";
  19. // ctx.textBaseline = "top";
  20. var bounds = new Bounds(min, max);

Bounds 范围对象

</>复制代码 
  1. /**
  2.  * 定义范围对象
  3.  */
  4. function Bounds(min, max) {
  5.   this.min = min;
  6.   this.max = max;
  7. }
  8. /**
  9.  * 判断范围是否与另外一个范围有交集
  10.  */
  11. Bounds.prototype.intersects = function(bounds) {
  12.   var min = this.min,
  13.     max = this.max,
  14.     min2 = bounds.min,
  15.     max2 = bounds.max,
  16.     xIntersects = max2.x >= min.x && min2.x <= max.x,
  17.     yIntersects = max2.y >= min.y && min2.y <= max.y;
  18.   return xIntersects && yIntersects;
  19. };
检测
</>复制代码 
  1. // 每次绘制之前先与已绘制的文字进行范围交叉检测
  2. // 如发现有交叉，则放弃绘制当前文字，否则绘制并存入已绘制文字列表
  3. for (var index in _textBounds) {
  4.   // 循环所有已绘制的文字范围，检测是否和当前文字范围有交集，如果有交集说明会碰撞，则跳过该文字
  5.   var pointBounds = _textBounds[index];
  6.   if (pointBounds.intersects(bounds)) {
  7.     return;
  8.   }
  9. }
  10. _textBounds.push(bounds);
  11. ctx.fillStyle = "red";
  12. ctx.textAlign = "left";
  13. ctx.textBaseline = "top";
  14. ctx.fillText(p.name, p.x, p.y);
示例、代码地址

示例地址：示例
具体可查看完整代码： Github 地址

</>复制代码 
  1. 阅读原文
GPU云服务器 云服务器 Android碰撞检测 java碰撞检测小球 python 抽稀 Canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109838.html

相关文章

  • 《每周一点canvas动画》——canvas特效插件

    摘要：很长时间没有更新文章了，经过几个月的时间，事情终于忙完了。今天，在这里为大家分享款特效插件，与其说是分享，不如说是为了方便使用，对前面章节的一些效果的封装。前面的文章在我修改完善后会逐渐上传。 很长时间没有更新文章了，经过几个月的时间，事情终于忙完了。今天，在这里为大家分享3款canvas特效插件，与其说是分享，不如说是为了方便使用，对前面章节的一些效果的封装。 1. Martrix....

    Berwin 评论0 收藏0

  • HTML5 Canvas游戏开发实战 PDF扫描版

    摘要：游戏开发实战主要讲解使用来开发和设计各类常见游戏的思路和技巧，在介绍相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧，在介绍HTML5 Canvas相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。在本书...

    cocopeak 评论0 收藏0

发表评论

登陆后可评论

0条评论

2i18ns

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<