javascript - 将位图字符转换为三 Angular 形

标签 javascript character html5-canvas webgl

我正在尝试使用 html Canvas 元素将字体文件中可用的每个字符绘制到 Canvas 上。为了使这个问题尽可能简单,假设只有一个字符被绘制到 Canvas 上。从那里开始,我想使用 Javascript 分析 Canvas 并创建构成整个 Angular 色的 Canvas 三 Angular 形区域。我在三 Angular 形中需要它的原因是数据稍后可以发送到 WebGL,这样文本就可以呈现,并且数据不会因缩放文本大小而丢失。

我正在寻找某种算法来完成此任务,或者至少需要一些知识让我朝着正确的方向前进。如果您认为我应该使用不同的方法,请告诉我原因,但我认为这是提供一种以多种方式修改文本并使创建 3d block 文本成为可能的方法的最佳方法。

最佳答案

这是一篇关于如何使用着色器绘制分辨率无关曲线的文章

http://research.microsoft.com/en-us/um/people/cloop/loopblinn05.pdf

我的理解是,不是将形状分解成三 Angular 形,而是将它们分解成四边形,并在顶点中排序足够的信息以在每个四边形内绘制一部分曲线。换句话说,当着色器绘制每个四边形时,有一个公式可以为每个像素计算该像素是在曲线内还是在曲线外。

关于javascript - 将位图字符转换为三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12905624/

相关文章:

javascript - React Native + 世博会 : Splash screen close after wait time and when page complete

javascript - 根据字符数动态拆分数组

javascript - 织物弯曲文本间距/字距调整问题

javascript - canvas.toDataURL() 和 drawImage() 的安全错误

javascript - 如果单词有空格,如何计算文本区域中的单词数

javascript - 为什么 'this' 在使用 Promise 时在类方法内部未定义?

c - 如何在c中返回带有变量的字符串

c - For 循环遍历数组导致无限循环

c++ - C 字符集 - 需要说明

javascript - 如何防止 Canvas 的描边像素在放大时保持清晰?