拉斐爾JS - 創建自定義進度條

我想創建一個自定義進度欄像下面的圖片中：拉斐爾JS - 創建自定義進度條

Custom progress bar

我想創建此類型的組件我的最佳選擇是使用JavaScript和SVG或Canvas，現在我正在試圖在Raphael JS中創建它。

我想知道這是否可行，或者這是一件難以置信的艱難事情，或者拉斐爾不是做這件事的最佳工具，我對拉斐爾來說很新穎，而我設法做的所有事情就是重新塑造形狀通過使用拉斐爾JS。

window.onload = function() { 
var paper = Raphael("holder", 500, 500); 
var border = paper.path("M177.726,35.14c-6.51-19.56-24.73-30.02-46.369-35.14l-4.061,3.7c16.59,5.44,29.609,15.21,33.25,30.37c6.891,28.729-26.721,55.2-70.56,55.2c-43.84,0-77.45-26.471-70.55-55.2c3.64-15.16,16.65-24.93,33.24-30.37L48.616,0c-21.64,5.12-39.86,15.58-46.37,35.14c-12.83,38.52,31.03,74,87.74,74C146.696,109.14,190.556,73.66,177.726,35.14z M89.986,107.014c-33.546,0-64.678-13.115-79.311-33.411C2.173,61.81-0.044,48.742,4.263,35.812C9.725,19.401,24.444,8.14,48.018,2.332l0.595,0.542C31.43,9.313,20.658,19.875,17.369,33.574c-2.601,10.831,0.055,21.67,7.682,31.346c12.873,16.331,37.755,26.477,64.935,26.477c27.177,0,52.06-10.145,64.936-26.475c7.63-9.676,10.29-20.516,7.691-31.348c-3.289-13.696-14.065-24.26-31.253-30.701l0.594-0.542c23.574,5.809,38.293,17.069,43.754,33.48c4.307,12.93,2.09,25.998-6.412,37.791C154.663,93.898,123.532,107.014,89.986,107.014z"); 
var fill = paper.path("M173.587,33.481C168.126,17.069,153.407,5.809,129.833,0l-0.594,0.541c17.188,6.441,27.963,17.004,31.252,30.701c2.6,10.832-0.061,21.672-7.691,31.348c-12.875,16.33-37.758,26.475-64.936,26.475c-27.18,0-52.063-10.146-64.936-26.477c-7.627-9.676-10.283-20.516-7.682-31.346C18.536,17.543,29.309,6.981,46.491,0.542L45.896,0C22.322,5.809,7.603,17.069,2.142,33.48c-4.307,12.931-2.09,25.998,6.412,37.791c14.633,20.296,45.764,33.411,79.311,33.411s64.678-13.115,79.311-33.411C175.677,59.478,177.894,46.411,173.587,33.481z"); 

border.attr({ 
    fill: "#00FFFF", 
}); 

fill.attr({ 
    fill: "#99FF00", 
}); 
}

JS Fiddle with shapes

來源

2013-07-11 hex

圖片沒有加載。你要我檢查小提琴嗎？ –

它爲我加載。這是圖片鏈接[http://i.stack.imgur.com/cmGDv.png](http://i.stack.imgur.com/cmGDv.png） – hex

最好是你使用KineticJS或任何其他API，幫助，以讓你快速入門的幾何形狀和它的操控帆布去。由於您可以輕鬆使用顏色轉換來獲得想要查看的進度。如果你研究Canvas而不是SVG，這將是一個很好的方法。

來源

2013-07-11 11:37:00

如果你可以打破這個填充成多個片斷..說十個片斷。

然後第一塊將是百分之十必須在左邊。然後，你可以填寫那個......用任何你想要的顏色。

然後，你可以用任何你想要的顏色填充下一個。

然後而不是有一個單一的填充路徑，你有很多，你可以將這些路徑放入一個數組並迭代該數組並填充它們。

然後，如果您迭代到例如第三個元素並填充..您將填充整個進度條的前三個十分之一。

然後，當然你可以將它分成任意數量，你可以將它分成幾百或者更多。

然後用製作了一個名爲「fill_progress_bar（{‘up_to’：30}）函數把它包起來」這將隨後例如填充進度條30％的最高

你也可以做一個函數。 'fill_bar_portion（{'number'=> 3，'with_color'：'red'}）'，然後例如用紅色填充進度條的第三個十分之一。這樣，對於你來說也很容易填入你想要什麼顏色組合的進度條。不，這不是必要的，但它表明你現在已經有在進度條的控制水平。

一旦這個設置基本上已經大功告成，並從來沒有WO再來一次。

但記得寫下算法，因爲你編寫的程序看起來很明顯，現在在六個月內可能不會那麼明顯。或者對於其他開發者來說。

來源

2013-07-19 12:41:30

拉斐爾JS - 創建自定義進度條

回答

相關問題