javascript - HTML Canvas - 随着内容的增长自动调整大小

标签 javascript html canvas

当其中的内容超出其边距时,如何设置 HTML5 Canvas 自动调整大小?我正在开发一个家谱应用程序,当一代人的宽度超过 Canvas 的定义限制时,将节点连接在一起的线就会消失。

最佳答案

Canvas 没有自动功能。它是一个被动位图,您可以使用它来绘制图形,因此所有形式的逻辑都需要“手动”实现。

因此,为了让它变大,您必须跟踪正在绘制的所有内容的位置和大小,以便您可以计算当前图形的总边界框

如果该边界框的位置 + 大小超过 Canvas 大小,则更新 Canvas 大小( Canvas 大小 = 边界框的位置 + 大小)。

但是,当调整 Canvas 大小时,所有当前内容和状态都将丢失,因此您将不得不重新渲染和重新初始化内容,就像第一次绘制它一样。这是您需要规划并纳入设计的内容。

关于javascript - HTML Canvas - 随着内容的增长自动调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37275610/

相关文章:

javascript - AngularJS 身份验证安全性

javascript - 使 HTML 表单元素出现(jQuery 或 JS)

jquery - 在当前完成之前停止下一个悬停动画的发生

javascript - HTML5 Canvas 粒子爆炸

javascript - 如何让多个球在点击时掉落?

javascript - DropZone.js 判断何时上传成功

javascript - 响应式侧边栏推送菜单

html - 在复选框值更改时更改 div 的类

java - 用于提取某些 <div> 标记的正则表达式

javascript - 删除 Canvas 然后在同一位置添加新的 Canvas