2015-12-26 24 views
0

見這個例子:http://merijn.pro/ballen/ 小提琴:http://tinyurl.com/o8gq7z2Paper.js /帆布:平滑文本的緩慢運動

的球慢慢左右移動,而球本身平滑地渲染, 但它們的文本標籤不(他們捕捉到像素網格)。由於運動緩慢,它看起來很醜。

如果可能,我正在尋找一種使文本呈現流暢的方法。 他們創建如下:

this.text = new PointText(this.point); 
this.text.justification = 'center'; 
this.text.fillColor = 'black'; 
this.text.content = text; 

和更新如下:

this.text.position = this.point; 

更新:我試圖通過導入文本作爲SVGs(包含文本)來解決它,但是這給了相同的問題

enter image description here

+0

如果您可以將代碼作爲草圖發佈,我很樂意使用它。我有兩個初始想法:1)製作pointText並圈選一組,然後移動組,而不是兩個項目,2)用某種HTML文本覆蓋畫布,並將它們相對於畫布絕對放置。論文的文字支持有限。 – bmacnaughton

+0

請做!請參閱http://tinyurl.com/o8gq7z2。我確實考慮了選項(2),但正如你所理解的,我更喜歡只用畫布的方式......我也嘗試過像css轉換/翻譯畫布之類的東西,但像素捕捉保持不變。我很想看看你能從中得到什麼,在此先感謝 – Hacktisch

回答

1

該解決方案似乎平滑移動文本和圓雖然我還沒有與ÿ直接測試我們的代碼。這是我上面評論中的選項(1) - 將圓和文本添加到組中,然後移動組。

sketch

即使實施倒計時作爲移動下面的評論並不順利。它看起來像屏幕的物理像素造成障礙,通過使用紙張平穩移動文本。除了總是移動像素單位之外,我沒有其他解決方案。

+0

感謝您向我展示如何將對象分組,但不幸的是,它不會使文本在慢速移動時平穩移動。你的向量是[1,1],所以每次它移動1個像素,然後它是平滑的,但如果我讓它變得更慢([0.1,0.1]),它就像以前一樣:http://tinyurl.com/ zny3vru – Hacktisch

+0

是的,我只是自己試過,我看到了你做過的同樣的事情。這似乎是問題所在 - 文本僅以1像素爲增量進行移動,而圓圈可以以較小的增量移動(由於插值)。我沒有解決方案。 – bmacnaughton

+0

通過使用更新增量計數器而不是特定的矢量長度,您可以一次移動1個像素。所以如果你想每次移動[0.1,0.1],那麼設置一個10的計數器,在每個幀上遞減計數,然後當計數器達到零時將球移動[1.0,1.0](並將計數器重置爲10) 。這種方法將保持球和文本同步。 – bmacnaughton

1

我建議你使用html和css處理文本,如here所述。

Paper.js中的文本工具仍爲in development