KineticJS - 用鼠標免費繪製

Question

我正在構建一個畫布繪畫工具，使用時只需拖動鼠標在畫布上繪製即可。據我所知，線條是這項工作的最佳途徑。因此，在鼠標下方，我創建了一個KineticJS線對象，當用戶拖動時，我在最後一個鼠標位置和當前位置之間添加一個點。請注意，我只有一個有多個點的線對象。

當用戶釋放鼠標時，線條就完成了，無論何時再次點擊繪製更多的線條，我都會創建一個新的線條對象。

問題是，如果您要繪製文本，請說「我的名字是x」這將導致許多行對象，每個字符爲1（「x」和「i」爲2）。

有沒有更好的方法來做到這一點？我的想法是隻有一個線條對象，並且你只需在上一個位置添加一行，然後拖動你就可以了。但我認爲KineticJS Line不支持這一點。

所以基本上，我可以改進我讓用戶畫的方式嗎？

Answer 1

您目前的設計有1-2條多義線來定義一個字母是很好的。

帆布和動能都可以在性能滯後之前支撐整段人物。

如果您想爲整個句子定義1個單一定義，則可以使用自定義的Kinetic.Shape。

使用Shape可以完全訪問包裝的畫布上下文。您可以使用該上下文來完成第二個想法 - 單個context.path通過保存的moveTo和lineTo命令來繪製句子。

就我個人而言，我會用你目前的設計（每個字符1-2條折線）去，因爲性能很好，你會得到更多的靈活性。 （例如，如果您想在當前的設計中使用不同顏色繪製人物名稱更容易）。