在畫布元素上繪製矢量：如何生成矢量字符串

Question

對於我目前正在做的項目，我需要實現一個交互式畫布元素。 畫布上會有一個形狀，分成若干子區域。 用戶應該能夠從中選擇子區域，並將不同的顏色應用到選定區域[這些區域不是正方形或圓形，而是自定義路徑]

這包含了一些與我想要實現的東西類似的東西。它使用kinetic.js。它顯示瞭如何使用Kinetic.path（）方法繪製世界地圖 - 每個國家都有矢量字符串。

請把我放在線上，以達到類似於腳形/任何其他形狀的東西。我應該如何獲得這個矢量字符串來繪製想要的形狀？

這是最好的方法嗎？

此文件（http://raphaeljs.com/world/world.js）包含世界地圖的矢量字符串。我不確定他們是如何生成它的。那是我感興趣的地方。

有沒有辦法從圖片生成矢量字符串？

Answer 1

使用svg編輯器（例如，這個online svg editor）。然後導入您的圖片並使用路徑回溯圖片的元素。