浠嬬粛鎺earnD3:Scales绗簲绡囷紝鍙槸鑻辨枃缈昏瘧锛屽彲浠ヤ慨鏀圭殑閮ㄥ垎鐢ㄩ潤鎬佸浘鐗囦唬鏇裤€傚闇€瀹炴椂浜掑姩锛岃闃呰鍘熸枃銆傚師鏂囷細LearnD3:Shapes鐗堟湰锛?020骞?鏈?4鏃ュ彂甯冩潵婧愭垜鐨凣itHubTextSVG鍜孋anvas鏈夋剰閫氱敤浠ュ厑璁镐换浣曠被鍨嬬殑鍥惧舰锛涚浉姣斾箣涓嬶紝D3鏃ㄥ湪鐢ㄤ簬鍙鍖栵紝鍥犳鎻愪緵浜嗕笓闂ㄧ殑褰㈢姸璇嶆眹琛紝杩欎簺褰㈢姸鏄负璺緞鏁版嵁鐢熸垚鐨勫嚱鏁般€傝矾寰勫彲浠ョ粯鍒跺渾褰€佺煩褰€佺洿绾裤€佹洸绾裤€佷刊鍐层€佽€佽檸馃悈锛屼互鍙婁换浣曚綘鑳芥兂璞″埌鐨勪笢瑗裤€傝矾寰勭殑褰㈢姸鐢盨VG璺緞鏁版嵁璇█锛堟垨绛夋晥鐨凜anvas璺緞鏂规硶锛夋寚瀹氾紝绫讳技浜庤€佸紡缁樺浘绗旂殑鍛戒护銆備緥濡傦細Mx,y-绉诲姩鍒版寚瀹氱偣[x,y]Lx,y-鐢讳竴鏉＄嚎鍒版寚瀹氱偣[x,y]hx-鐢讳竴鏉￠暱搴︿负x鐨勬按骞崇嚎vy-鐢讳竴鏉￠暱搴︿负鍨傜洿绾縵-鍏抽棴褰撳墠瀛愯矾寰勫亣璁炬垜浠兂瑕佸皢鍑犲勾鍐呯殑Apple鑲′环鍙鍖栦负鎶樼嚎鍥俱€傝繖鏄竴涓寘鍚棩鏈熷拰鏀剁洏浠凤紙鈥滄敹鐩樹环鈥濇槸鎸囨敹鐩樻椂鐨勮偂绁ㄤ环鏍硷級浠ュ強鐩稿簲姣斾緥鐨勬暟鎹泦銆傝鐢荤嚎锛屾垜浠渶瑕佽矾寰勬暟鎹紝寮€濮嬩娇鐢∕x,y绉诲姩鍒扮涓€涓偣锛岀劧鍚庨噸澶峀x,y浠ョ敾涓€鏉＄嚎鍒版瘡涓悗缁偣銆傛垜浠彲浠ラ€氳繃閬嶅巻杩欎簺鐐规潵鍋氬埌杩欎竴鐐广€備絾d3.line鏇存柟渚裤€傝皟鐢╠3.line灏嗚繑鍥炰竴涓粯璁ょ殑绾跨敓鎴愬櫒锛岄€氳繃璋冪敤line.x鍜宭ine.y鎴戜滑鍙互浣跨敤鍑芥暟閰嶇疆绾夸互杩斿洖缁欏畾鏁版嵁鐐筪鐨剎鍜寉浣嶇疆銆傝繖浜涘嚱鏁版绱㈡墍闇€鐨勬娊璞″€硷紙鏃ユ湡鎴栬鏁帮級骞跺皢鍏惰浆鎹负瑙嗚浣嶇疆锛堥€氳繃搴旂敤姣斾緥锛夈€備娇鐢ㄧ嚎鐢熸垚鍣紝鏁版嵁杩斿洖鐩稿簲鐨凷VG璺緞鏁版嵁瀛楃涓诧紝鍙敤浜庤缃矾寰勫厓绱犵殑d灞炴€с€傦紙涓轰簡閬垮厤閲嶅锛屾垜鍦ㄤ笅闈㈢殑闄勫綍涓畾涔変簡鍙噸鐢ㄧ殑杞淬€傛瘡涓酱閮芥槸涓€涓€夋嫨G鍏冪礌杩涜濉厖鐨勫嚱鏁般€傦級涓婇潰鐨勮矾寰勬槸鐢ㄨ摑鑹茬嚎鏉＄粯鍒剁殑锛屾病鏈夊～鍏呫€備负浜嗛伩鍏嶇嚎娈典箣闂寸殑鏂滄帴浜х敓璇鎬у皷宄帮紝鎴戝皢鏂滄帴闄愬埗璁剧疆涓虹嚎瀹界殑100%(1脳)銆傛垜涔熷彲浠ヤ娇鐢ㄥ渾瑙掔嚎鏉ヨ繛鎺ュ拰瀵嗗皝銆傚浜庨潰绉浘锛屼篃鏈夌被浼肩殑d3.area銆傚尯鍩熺殑褰㈢姸鎸囧畾涓哄叿鏈夊叡浜玿鍊肩殑涓ゆ潯绾匡細area.y0鏄熀绾匡紝area.y1鏄《绾裤€傚浜庡浘琛ㄥ簳閮ㄨ竟缂樺叿鏈夋亽瀹氬熀绾跨殑闈㈢Н鍥撅紝鎴戜滑灏哸rea.y0璁剧疆涓簓(0)銆傚鏋滄偍鎯宠涓€涓叿鏈夊彲鍙樺熀绾跨殑鍖哄煙锛屼緥濡備笅闈㈢殑鍫嗙Н闈㈢Н鍥俱€佹祦鍥炬垨甯冩灄甯︼紝灏嗗嚱鏁颁紶閫掔粰area.y0灏卞彲浠ヤ簡銆備笌area.x鍜宎rea.y1涓€鏍凤紝瀵逛簬姣忎釜鏁版嵁鐐归兘浼氳皟鐢ㄨ繖涓嚱鏁版潵璁＄畻瀵瑰簲鐨剏鍊笺€傝閫氳繃鏄剧ず涓績绉诲姩骞冲潎绾垮拰姣忔棩鏀剁洏浠锋潵瀹屾垚甯冩灄甯︾殑鏄剧ず锛屾垜浠彲浠ュ皢绾挎潯鍙犲姞鍦ㄤ笂闈€傚洜涓烘瘡涓矾寰勫厓绱犲彧鑳芥湁涓€绉嶆牱寮忥紝鎵€浠ユ垜浠澶氫釜璺緞浣跨敤澶氱棰滆壊銆傚綋lines鍜宎reas涓€璧峰伐浣滄椂锛氬垎鍒皟鐢╝rea.lineY0鎴朼rea.lineY1鑾峰彇area鐨刡aseline鎴杢opline瀵瑰簲鐨刲ine銆傝繖瀵逛簬瑁呴グ甯︽湁椤剁嚎鎴栧簳绾跨殑鍖哄煙寰堟湁鐢ㄣ€侺ines鍜孉reas鏈夋洿澶氱殑鍔熻兘锛屾垜浠笉浼氬湪杩欓噷鍏ㄩ儴浠嬬粛锛屼絾鏈変竴浜涙彁绀猴細RadialLines鍜孉reas瀵逛簬鍛ㄦ湡鎬ф暟鎹緢鏈夌敤锛屼緥濡傚鑺傛€ф俯搴︼紱Curves鎻愪緵鍙厤缃殑鎻掑€兼柟娉曪紝渚嬪淇濇寔鍗曚竴鎬х殑鏇茬嚎锛涙偍鍙互鏄剧ず缂哄け鏁版嵁涓殑宸窛銆傚綋鐒讹紝鍙鍖栦笉浠呬粎鏄潯褰㈠浘銆佺嚎鏉″拰鍖哄煙銆傚彟涓€绉嶅父瑙佺殑褰㈢姸D3绉颁负鍦嗗姬锛屼絾鏁板瀹剁О涔嬩负鎵囧舰銆傚畠鐨勫姛鑳介€傜敤浜庨ゼ鍥俱€佸渾鐜浘銆佹棴鏃ュ浘锛堜絾浠や汉鍥版儜鐨勬槸锛屼笉閫傜敤浜庡姬褰㈠浘锛夈€備笌绾垮拰闈㈢敱x鍜寉閰嶇疆鐨勬柟寮忕被浼硷紝寮х敱innerRadius銆乷uterRadius銆乻tartAngle銆乪ndAngle閰嶇疆锛堣搴︿互寮у害琛ㄧず锛夈€備笂闈㈢殑鍦嗗姬鐢熸垚鍣ㄨ閰嶇疆涓烘帴鍙楁暟缁刐startAngle,endAngle]銆傚浜庨ゼ鍥炬垨鑰呯敎鐢滃湀鍥撅紝鎸夌収涓婇潰鐨勬柟娉曡绠楀姬搴︿細寰堢箒鐞愶紝鎵€浠3涓轰簡鏂逛究鎻愪緵浜哾3.pie銆傚洖鎯充竴涓嬬編鍛虫按鏋滄暟鎹泦銆備负楗煎浘甯冨眬鐨勮鏁板睘鎬ч厤缃€艰闂櫒锛屾垜浠彲浠ヨ绠楀姬瑙掞紝浣垮緱姣忎釜寮х殑瑙掑害璺ㄥ害涓庡叾鍊兼垚姝ｆ瘮锛屽苟涓斿姬鐨勬€昏法搴︿粠0鍒?蟺杩炵画澧炲姞銆傝繖浜涙瘡涓暟鎹璞″彲浠ヤ紶閫掔粰鍏锋湁鍥哄畾鍗婂緞鐨勫渾寮х敓鎴愬櫒浠ョ敓鎴愬渾鐜浘锛堟垜灏嗕娇鐢ㄥ～鍏呭拰瑙掑崐寰勶紝鍥犱负鎴戝繊涓嶄綇鐐€€銆?鐜板湪鎴戜滑宸茬粡浠嬬粛浜嗕竴浜涘父瑙佺殑鏁版嵁鍥惧舰锛岃鎴戜滑鐪嬬湅濡備綍涓哄畠浠埗浣滃姩鐢伙紒涓嬩竴绡囬檮褰曟牴鎹簮鐮佸幓闄ゅ钩鍙颁緷璧栵紝鎻愬彇涓昏浠ｇ爜銆傜ず渚嬪涓嬶細绀轰緥1绀轰緥2绀轰緥3绀轰緥4绀轰緥5绀轰緥6绀轰緥7鍙傝€冨涔燚3锛歋hapes
