沿Bézier曲線的位置圖像

Question

我們目前有一個動態圖像，它保存從用戶輸入創建的文本。本文遵循貝塞爾曲線來定義其位置和旋轉。

由於各種原因，文字需要更改爲一組圖像，因爲字體需要非常具體。因此，我們將爲每個字母表中允許的字符提供一個PNG。因此，如果用戶輸入單詞「TEST」，系統將提取字母T，E，S和T並將它們放在一起。這部分不是問題。

問題是迫使每個圖像遵循相同的貝塞爾曲線作爲文本使用graphics.DrawString。圖像必須正確定位，理想情況下也應正確旋轉。

這是可能的，這怎麼可能呢？

Answer 1

簡單的回答是，你 「只是」

• parametrise貝塞爾曲線均勻（PDF on math）（Explanation of what is wrong with standard parametrisation）
• 計算法線曲線
• 沿曲線排列你的圖片根據均勻參數化使用字形寬度作爲參數距離
• 旋轉您的圖像，使圖像的「向上」是正常的方向曲線

但即使這樣也沒有得到一個相當好看的形象。通常情況下，您需要對每幅圖像應用非線性變換，以使距離曲線的部分具有不同於曲線附近的部分的寬度，具體取決於曲率和凸度。

This site explains many of the details by decomposing the outline of an image in paths

然而，由於以前的鏈接我敢肯定開始顯現，這是一個計算密集的過程。相反，您可能會發現將圖像簡單地轉換爲字體並使用之前使用的方法更容易。這個解決方案將依靠一些第三方工具來完成轉換，並且我毫不猶豫地提出建議。但是，一個方向（很多）會使用像開源Inkscape這樣的光柵到矢量圖形工具，並從矢量圖形輸出中創建字體。此方法可以最好地縮放，但可能涉及將輸出轉換爲True-Type等首選字體格式的單獨步驟。