线性渐变圆形进度条的实现研究
时间：2023-03-28 00:55:00
HTML
鏈枃涓昏浠嬬粛鍩轰簬NutUIVue3鐨刢ircleProgress缁勪欢鐨勮璁′笌瀹炵幇鍘熺悊銆備竴涓渾褰㈢殑杩涘害鏉＄粍浠讹紝鐢ㄤ簬鏄剧ず褰撳墠鎿嶄綔鐨勮繘搴︼紝鏀寔淇敼杩涘害鍜屾笎鍙樿壊銆傚渾褰㈣繘搴︽潯鏄竴涓潪甯稿父鐢ㄧ殑缁勪欢锛屽挨鍏舵槸鍦ㄧ鐞嗗悗鍙版暟鎹粺璁℃垨鑰呬竴浜涢渶瑕佺敤鎴风瓑寰呯殑浠诲姟鐨勯〉闈笂銆傚疄鐜版晥鏋滃涓嬪浘鎵€绀恒€傚疄鐜版€濊矾濡備笅銆傞鍏堬紝璁╂垜浠⒊鐞嗕竴涓嬫垜浠殑闇€姹傘€傛垜浠渶瑕佷竴涓渾褰㈢殑杩涘害鏉★紝鍙互鏀瑰彉杩涘害锛屾湁鍔ㄧ敾锛屽彲浠ユ敮鎸佹笎鍙樿壊銆傜洰鍓嶅父瑙佺殑瀹炵幇鏂规鏈変笁绉嶏細CSS瀹炵幇SVG瀹炵幇Canvas瀹炵幇SVG鍒嗕负涓ょ锛屼竴绉嶆槸鐩存帴鐢ㄥ渾鍦堝疄鐜帮紝涓€绉嶆槸鐢ㄨ矾寰勭粯鍒躲€傜劧鍚庡啀鐪嬬湅鍥藉唴姣旇緝鐭ュ悕鐨勪竴浜涚粍浠跺簱鐨勫疄鐜帮細AntdDesignTdesignvarletElementUIvantSVGCircleCircleCirclePathPathAntdDesign鍜孴Design锛寁arlet浣跨敤svgCircle瀹炵幇锛屼絾鏄釜浜鸿寰桝ntdDesign鐨勬笎鍙樿壊棣栨湯灏炬湁闂锛孴Design鑰寁arlet鏆傛椂涓嶆敮鎸佸渾褰㈣繘搴︽潯鍜岀嚎鎬ф笎鍙樸€侲lementUI鍜孷ant浣跨敤svgPath鏉ュ疄鐜般€俈ant鏀寔绾挎€ф笎鍙橈紝涓嶅瓨鍦ㄦ笎鍙橀鑹查灏句笉瀵瑰簲鐨勯棶棰樸€侲lement鏆傛椂涓嶆敮鎸佺嚎鎬ф笎鍙樸€傜洰鍓嶄富娴佺殑缁勪欢搴撴槸寰幆鐨勩€傝繘搴︽潯鍩烘湰閮芥槸鐢╯vg鐢荤殑锛屽洜涓哄疄鐜版€濊矾绠€鍗曪紝鐢╯vg鐢讳袱涓渾锛屼竴涓渾浣滀负鑳屾櫙鑹诧紝涓€涓渾浣滀负杩涘害鏄剧ず锛屼娇鐢ㄧ殑鏃跺€欓棶棰樺緢灏戙€侼utUI涔熼€夋嫨浜嗕娇鐢⊿VG鏉ュ疄鐜拌繘搴︽潯銆備笅闈㈣缁嗕粙缁嶄袱绉嶅疄鐜版柟娉曘€侰ircle鐨勫疄鐜伴鍏堣涓€涓婼VG鐨刢ircle锛圓ntd鐨勫疄鐜帮紝Tdesign锛夛紝涓嬮潰涔熶細浠嬬粛Antd鐨勮繘搴︽潯鐨勭嚎鎬ф笎鍙橀棶棰樸€傜涓€姝ョ敾鏈€绠€鍗曠殑鍦?svgheight="100"width="100"x-mlns="http://www.w3.org/200/svg">浠ヤ笂灞炴€ф垜灏变笉澶氫粙缁嶇粰涓嶆噦鐨勫悓瀛︿簡鍏跺疄锛屼篃鍙互鐪嬪ぇ鎰忥紝r鏄崐寰勶紝cx锛宑y鏄渾鐐圭殑浣嶇疆锛岃繕鏈夊渾寮х殑棰滆壊鍜屽搴︺€傝繖閲屽彲鑳芥湁鍚屽浼氶棶杩欎釜鐢ㄥ渾鑳戒笉鑳藉疄鐜帮紝浣嗘槸鍒繕浜嗘垜浠渶瑕佺殑鏁堟灉锛岄偅鎴戜滑鐢讳竴涓笉鏄?00%杩涘害鐨勫渾锛屾€庝箞鐢诲憿锛熻繖閲屼娇鐢ㄤ簡stroke-dasharray灞炴€с€傚浘褰㈢殑绗旂敾鍙互鍋氭垚铏氱嚎銆傝繖閲岄渶瑕佺悊瑙ｇ殑鏄紝dotteddot鐨勫ぇ灏忔槸鍙互璁剧疆鐨勶紝骞朵笉鏄湡鐨勫彧鏈変竴涓€傚畠鍙互寤堕暱鎴栫缉鐭€傛墍浠ュ鏋滃渾鐨勭偣鐨勯暱搴︽伆濂界瓑浜庡渾鐨勮竟闀匡紝閭ｄ箞杩欎釜鐐圭湅璧锋潵灏辨槸鍦嗙殑杈广€傛垜浠彲浠ヨ绠楃幆鐨勫懆闀匡紝鍙傛暟鏄姬闀匡紝鏈€澶у€硷紝鏈€澶у€煎氨鏄懆闀匡紝寮ч暱灏辨槸杩涘害鍊笺€備綘搴旇涔熷彂鐜颁簡闂銆傝繖鏍风殑璇濓紝褰撹繘搴︿笉鏄?00%鐨勬椂鍊欙紝鏈変簺鍦嗗姬浼氭病鏈夐鑹诧紝鎵€浠ユ垜浠渶瑕佷竴涓儗鏅壊銆傞偅鏄彟涓€涓湀瀛愩€?svg>鍥犱负杩欓噷鎴戜滑闇€瑕佸畠浠庝腑闂寸殑宸﹁竟寮€濮嬶紝鎵€浠ユ垜浠渶瑕佹坊鍔犳棆杞€傝嚦浜庝笅涓€姝ワ紝璁╁畠鍔ㄨ捣鏉ュ緢绠€鍗曪紝閭ｆ€庝箞鍔ㄥ憿锛熷姩鎬佹敼鍙榮troke-dasharray鐨勫€煎氨鍙互浜嗭紝涓嬮潰浠嬬粛璺緞鐨勬椂鍊欏啀璇存€庝箞鏀瑰彉銆傚厛璇翠竴涓嬫垜浠亣鍒扮殑灏忓潙锛屽氨鏄垜浠湪鍋氭笎鍙樿壊鐨勬椂鍊欙紝浼氬彂鐜版垜浠殑娓愬彉鑹蹭笉鏄粠鎴戜滑鐨刾rogress寮€濮嬬殑銆傝繖閲屾垜浠篃鍙互鐪嬬湅Antd鐨勫渾褰㈣繘搴︽潯鐨勬笎鍙樸€傛垜浼氱粰浣犵湅涓€涓孩鑹插埌榛戣壊鐨勩€傦紙Tdesign杩欓噷灏忕紪鍦ㄥ湪绾跨紪杈戝櫒涓瘯杩囷紝绾挎€ф笎鍙樻病鏈夌敓鏁堛€傦級杩欓噷锛屾垜涓汉璁や负antd鐨勬笎鍙樹篃鏄敊璇殑锛堜粎浠ｈ〃涓汉瑙傜偣锛夈€傚綋鐒讹紝浣犱篃鍙互鎻愬嚭鍏朵粬鐨勬兂娉曘€傝璁恒€傚叾瀹炴槸鍥犱负绾挎€ф笎鍙樻槸浠庡乏鍒板彸锛岀幆鍦ㄤ笂闈㈡棆杞€傚ぇ瀹跺彲浠ヨ嚜宸辨悳绱㈠紩鎿庢悳绱㈣В鍐虫柟妗堬紝杩欓噷灏变笉缁嗚浜嗐€備笅闈㈢殑璺緞瀹炵幇涓昏浠嬬粛璺緞鐨勫疄鐜帮紙Vant銆丒lement瀹炵幇鏂规硶锛夈€傚彲浠ョ畝鍗曞畬缇庣殑瑙ｅ喅涓婇潰娓愬彉棰滆壊涓嶅尮閰嶇殑闂锛圗lement鏆傛椂涓嶆敮鎸佺嚎鎬ф笎鍙橈級銆傚疄鐜版€濊矾鍜宑ircle鏄竴鏍风殑銆傜敾涓や釜鍦嗗湀锛屼竴涓敤鏉ヨ〃绀哄簳鑹诧紝涓€涓敤鏉ヨ〃绀哄姬搴︺€傛渶涓昏鐨勬槸鎴戜滑鎬庝箞鐢讳竴涓渾锛熶簡瑙iewBox灞炴€у苟灏嗘灞炴€ф坊鍔犲埌SVG鏍囪涓€傝繖涓睘鎬ф槸鐢ㄦ潵璁剧疆鐢诲竷鐨勫ぇ灏忕殑锛屼絾鏄娉ㄦ剰锛屽畠鏄竴涓浉瀵瑰ぇ灏忥紝浼氭牴鎹垜浠埗鍏冪礌鐨勫彉鍖栧姩鎬侀€傞厤銆傛瘮濡傛垜浠缃畠鐨勫睘鎬т负viewBox="0,0,100,100"锛屽叾瀹炲氨鏄妸鎴戜滑鏁翠釜鐢诲竷鐨勫鍜岄珮鍒嗘垚100浠斤紝SVG鍏冪礌鏄剧ず鍦ㄥ垝鍒嗗ソ鐨勭敾甯冧笂銆傛垜浠笉鍐嶉渶瑕佸叧娉⊿VG鐨勫搴﹀拰楂樺害銆傜幇鍦ㄦ槸鑷€傚簲鐨勶紝浼氳嚜鍔ㄩ€傚簲澶栧眰鐖跺厓绱犵殑瀹介珮銆傛垜浠湪鏈€澶栧眰缁欑敤鎴蜂竴涓狿rops鏉ヨ缃渾褰㈣繘搴︽潯鐨勫ぇ灏忋€?div:style="{height:radius*2+'px',width:radius*2+'px'}">
鐞嗚В璺緞鐨刣灞炴€э紝鏃㈢劧瑕佺敤path鐢诲渾锛岄偅褰撶劧瑕佺啛鎮夝煇傪煃虹殑d灞炴€э紝鍙互鐢诲悇绉嶇嚎銆俤灞炴€х敤浜庡畾涔夎矾寰勬暟鎹€傚厛浜嗚В涓€涓嬫垜浠渶瑕佺敤鍒扮殑鍙傛暟锛歁=moveto(MX,Y):灏嗙敾绗旂Щ鍔ㄥ埌鎸囧畾鍧愭爣浣嶇疆A=ellipticalArc(ARX,RY,XROTATION,FLAG1,FLAG2,X,Y):Pleasepay娉ㄦ剰妞渾寮р殸锔忥紝杩欎簺鍙傛暟鏄尯鍒嗗ぇ灏忓啓鐨勶紝褰撳畠鏄ぇ鍐欏懡浠ゆ椂锛岃〃绀哄畠鐨勫弬鏁版槸涓€涓粷瀵逛綅缃紝灏忓啓鍛戒护琛ㄧず瀹冪殑姝т箟鏄浉瀵逛簬褰撳墠浣嶇疆鐨勭偣銆傛垜浠篃鍙互浣跨敤璐熷€间綔涓烘垜浠懡浠ょ殑鍙傛暟銆傝礋鐨勭浉瀵箈鍊间細鍚戝乏绉诲姩锛岃礋鐨勭浉瀵箉鍊间細鍚戜笂绉诲姩銆傝缁嗚В閲婁竴涓嬫垜浠袱涓弬鏁扮殑moveto灞炴€у叾瀹炲緢濂界悊瑙ｏ紝鐢荤瑪鐨勬寚瀹氫綅缃紝x杞村拰y杞达紝M(缁濆)m(鐩稿)妞渾寮фき鍦嗗姬鐨勮褰曚负濡備笅锛氬懡浠わ細A锛堢粷瀵癸級a锛堢浉瀵癸級妞渾寮у弬鏁板舰寮忥細(rxryx-axis-rotationlarge-arc-flagsweep-flagxy)璇︾粏鍙傛暟锛歳xry涓轰袱涓崐杞寸殑闀垮害妞渾銆倄-axis-rotation鏄き鍦嗙浉瀵逛簬鍧愭爣绯荤殑鏃嬭浆瑙掑害锛屽崟浣嶆槸搴﹁€屼笉鏄姬搴︺€俵arge-arc-flag鏄粯鍒跺ぇ寮э紙1锛夋垨灏忓姬锛?锛夐儴鍒嗙殑鏍囧織銆俿weep-flag鏄爣璁版槸椤烘椂閽?1)杩樻槸閫嗘椂閽?0)缁樺埗鐨勩€倄y鏄渾寮х粓鐐圭殑鍧愭爣銆傚洜涓烘垜浠渶瑕佹妸鍦嗙殑缁樺埗鏂瑰悜浜ょ粰鐢ㄦ埛鏉ユ帶鍒讹紝鎵€浠ヨ繖閲屾垜浠帴鍙椾竴涓猵rops鏉ユ帶鍒剁粯鍒舵柟鍚戙€傛牴鎹笂闈㈢殑鎻忚堪锛屾垜浠彲浠ュ啓鍑鸿矾寰勭殑d灞炴€с€傚湪缁濆浣嶇疆50銆?0锛堝渾蹇冿級澶勶紝鍏堜粠鍦嗗績涓婃柟45鐨勪綅缃紑濮嬬粯鍒讹紙45涓哄崐寰勶級鐒跺悗鏄き鍦嗗姬鐨勫弬鏁皉x銆乺y銆佸崐寰勪负45锛屾棆杞搴︿负0锛岀粯鍒朵竴涓ぇ鍦嗗姬锛岀劧鍚庣粯鍒舵柟鍚戯紝椤烘椂閽堟垨閫嗘椂閽堟棆杞紝鏈€鍚庢槸鍦嗗姬缁堢偣鍧愭爣銆傚彲浠ュ緱鍑轰互涓嬩唬鐮乧onstpath=computed(()=>{constisWise=props.clockwise?1:0;return`M5050m0-45a454501${isWise}090a454501,${isWise}0-90`;});杩欐牱灏变細鐢诲嚭涓€涓渾锛屽叾浠栦娇鐢ㄧ殑灞炴€у拰涓婇潰鐨刢irlce涓€鏍疯矾寰勭殑璺緞锛屼笅涓€姝ュ氨鏄粰鍦嗙幆姝ｅ父涓婅壊锛屽姞涓婂姩鎬佺殑杩涘害鍙樺寲銆傞鍏堬紝璁╂垜浠湪搴曢儴鍐欎笂鑳屾櫙鐜€傜敤鎴峰彲浠ヨ嚜瀹氫箟鑳屾櫙鐜渾寮х殑棰滆壊鍊煎拰鍦嗗姬鐨勫搴︺€?pathclass="nut-circleprogress-path":style="pathStyle":d="path"fill="none":stroke-width="strokeWidth">/>constpathStyle=computed(()=>{杩斿洖{涓:props.pathColor};});鎺ヤ笅鏉ユ槸鏄剧ず杩涘害鏉＄殑鍦嗙幆锛屽洜涓烘垜浠繖閲岃繕闇€瑕佷竴涓笎鍙樿壊锛屾墍浠ユ垜浠渶瑕佸湪SVG涓坊鍔犱竴浜涗唬鐮併€傛鏌VG鏂囨。銆傛垜浠壘鍒颁簡涓€涓彨鍋?linearGradient>SVG鍏冪礌鐨勫伐鍏凤紝鍒╃敤杩欎釜鍏冪礌鎴戜滑鍙互杈惧埌棰滆壊娓愬彉鐨勭洰鐨勩€傚垱寤簂inearGradient鍦ㄥ垱寤鸿繖涓厓绱犱箣鍓嶏紝鎴戜滑闇€瑕佺煡閬?linearGradient>鏍囩蹇呴』宓屽鍦?defs>閲岄潰銆?defs>鏍囩鏄痙efinitions鐨勯瀛楁瘝缂╁啓锛屽畾涔変簡娓愬彉绛夌壒娈婂厓绱犮€傚苟涓旀垜浠繀椤讳负娓愬彉鍐呭鍒嗛厤涓€涓猧d灞炴€э紝鍚﹀垯鏂囨。涓殑鍏朵粬鍏冪礌鏃犳硶寮曠敤瀹冦€備负浜嗕娇娓愬彉鍙噸鐢紝闇€瑕佸湪
鏍囩鍐呭畾涔夋笎鍙樺唴瀹癸紝鑰屼笉鏄湪褰㈢姸涓娿€傝缃鑹叉笎鍙樻柟鍚戠幇鍦?linearGradient>鍏冪礌宸茬粡鍒涘缓鎴愬姛锛屾垜浠彲浠ョ粰瀹冭祴灞炴€ф潵婊¤冻鎸夐渶淇敼娓愬彉棰滆壊鏂瑰悜鐨勯渶瑕併€傛笎鍙樼殑鏂瑰悜鍙互閫氳繃涓や釜鐐规潵鎺у埗锛屽垎鍒槸灞炴€1銆亁2銆亂1鍜寉2锛屽畠浠畾涔変簡娓愬彉璺嚎鐨勬柟鍚戙€傞粯璁ゆ儏鍐典笅锛屾笎鍙樻槸姘村钩鏂瑰悜鐨勶紝浣嗛€氳繃淇敼杩欎簺灞炴€э紝鍙互鏃嬭浆鏂瑰悜銆傝缃笎鍙樿壊銆?linearGradient>涓坊鍔犵殑棰滆壊鐞嗚涓婃槸娌℃湁涓婇檺鐨勶紝浣嗘槸濡傛灉瑕佹湁娓愬彉鐨勬晥鏋滐紝鑷冲皯瑕佹坊鍔犱袱绉嶉鑹层€傛墍浠ヤ綘闇€瑕佸湪涓垱寤鸿嚦灏戜袱涓?stop>鍏冪礌鏉ユ坊鍔犱綘闇€瑕佺殑棰滆壊灞炴€с€倁ndefinedstop-opacity锛氳缃畇top-color棰滆壊鐨勯€忔槑搴︼紙鏆傛椂涓嶇敤锛?defs>conststopArray=computed(()=>{if(!isObject(props.color)){return;}letcolor=props.color;constcolorArr=Object.keys(color).sort((涓€涓?b)=>parseFloat(a)-parseFloat(b));letstopArr:object[]=[];colorArr.map((item,index)=>{letobj={key:'',value:''};obj.key=item;obj.value=color[item];stopArr.push(obj);});returnstopArr;});娣诲姞娓愬彉鑹插悗锛屾垜浠潵澶勭悊杩涘害鏉★紙濡備綍璁╄繘搴︽潯缁戝畾鍒拌繖涓笎鍙樿壊锛夛紝鍏跺疄寰堢畝鍗曪紝鎶婂渾鍦堢殑鎻忚竟鏀规垚
鐨勫敮涓€id鍗冲彲锛涚劧鍚庡鐞嗗渾鐨勮繘搴︽樉绀猴紝鍜屼笂闈㈠渾鐨勫鐞嗘柟娉曚竴鑷达紝浣跨敤stroke-dasharray鍗冲彲銆?pathclass="nut-circleprogress-hover":style="hoverStyle":d="path"fill="none":stroke-linecap="strokeLinecap":stroke-width="strokeWidth">consthoverStyle=computed(()=>{letperimeter=283;letoffset=(perimeter*Number(props.progress))/100;return{stroke:isObject(props.color)?`url(#${refRandomId})`:props.color,strokeDasharray:`${offset}px${perimeter}px`};});涓婇潰鐨剆troke-linecap灞炴€ф槸涓€涓猺epresentation灞炴€э紝瀹冨畾涔変簡opensubpath鍦ㄦ弿杈规椂鎵€浣跨敤鐨勫舰鐘讹紝鍙互鍦╯tyle涓娇鐢ㄣ€傝嚦浜庝笂闈㈢殑283鏄€庝箞鏉ョ殑锛屽叾瀹炲緢绠€鍗曘€傚氨鏄垜浠渾鐜殑鍛ㄩ暱锛?蟺r=23.141592645銆傚叾瀹炲埌杩欓噷锛屾垜浠櫘閫歨5鐜涓嬬殑鍦嗗舰杩涘害鏉″氨瀹屾垚浜嗐€俆aro涓嬬殑SVG鍥犱负鏈塏utUI鍙互鍜孴aro涓€璧峰紑鍙戝井淇″皬绋嬪簭锛屾墍浠ヨ繖閲岀殑寰幆杩涘害鏉″湪灏忕▼搴忕幆澧冧笅褰撶劧瑕佹湁鍚屾牱鐨勫姛鑳姐€傚洜涓哄疄鐜颁簡鎴戜滑鏅€歨5鐜涓嬩娇鐢ㄧ殑SVG锛屾墍浠ユ兂濂楃敤涓€濂椾唬鐮侊紝浣嗘槸鍙戠幇鍦ㄥ皬绋嬪簭鐜涓嬩笉鏀寔浣跨敤SVG銆傝繖涓湪灏忕▼搴忕殑瀹樻柟鏂囨。涓湁鍥炵瓟锛屾墍浠ユ垜杩欓噷鐢ㄥ畠浣滀负鑳屾櫙鍥炬潵灞曠ず銆傞€氳繃涓€浜汼VG杞琤ase64鐨勭綉绔欙紝鎴戜滑鍙戠幇<鍏跺疄鏄?3C锛?鏄?3E锛?鍙互鎹㈡垚%23锛屽洜涓烘垜浠噷闈㈣繕鏈変竴浜涘彉閲忥紝鎵€浠ユ垜杩欓噷鎶婂畠浠媶寮€锛屽垎鎴愬嚑涓彉閲忔潵鍐欍€?div:style="style"> 