js中文网【JS中文网】

javascript实现获取中文汉字拼音首字母

今天分享一个日常开发中可能会用到的一个小功能，简单说就是输入中文汉字可转换得到中文汉字拼音首字母。当然我可写不出这样的功能，源码来自于其他民间大神的分享，博主在此记录一下功能demo，方便日后复用，同时方便需要此功能的各位。

如下输入名字张三。

点击按钮获取，得到中文拼音首字母

博主整理了一下代码可阅读性，下面直接上代码。

<!doctype html>

<html>

<head>

</head>

<body>

<button onclick=\”makePy()\”>首字母获取</button><br>

// 汉字拼音首字母列表本列表包含了20902个汉字,用于配合 ToChineseSpell

//函数使用,本表收录的字符的Unicode编码范围为19968至40869, XDesigner 整理

var strChineseFirstPY = \”YDYQSXMWZSSXJBYMGCCZQPSSQBYCDSCDQLDYLYBSSJGYZZJJFKCCLZDHWDWZJLJPFYYNWJJTMYHZWZHFLZPPQHGSCYYYNJQYXXGJHHSDSJNKKTMOMLCRXYPSNQSECCQZGGLLYJLMYZZSECYKYYHQWJSSGGYXYZYJWWKDJHYCHMYXJTLXJYQBYXZLDWRDJRWYSRLDZJPCBZJJBRCFTLECZSTZFXXZHTRQHYBDLYCZSSYMMRFMYQZPWWJJYFCRWFDFZQPYDDWYXKYJAWJFFXYPSFTZYHHYZYSWCJYXSCLCXXWZZXNBGNNXBXLZSZSBSGPYSYZDHMDZBQBZCWDZZYYTZHBTSYYBZGNTNXQYWQSKBPHHLXGYBFMJEBJHHGQTJCYSXSTKZHLYCKGLYSMZXYALMELDCCXGZYRJXSDLTYZCQKCNNJWHJTZZCQLJSTSTBNXBTYXCEQXGKWJYFLZQLYHYXSPSFXLMPBYSXXXYDJCZYLLLSJXFHJXPJBTFFYABYXBHZZBJYZLWLCZGGBTSSMDTJZXPTHYQTGLJSCQFZKJZJQNLZWLSLHDZBWJNCJZYZSQQYCQYRZCJJWYBRTWPYFTWEXCSKDZCTBZHYZZYYJXZCFFZZMJYXXSDZZOTTBZLQWFCKSZSXFYRLNYJMBDTHJXSQQCCSBXYYTSYFBXDZTGBCNSLCYZZPSAZYZZSCJCSHZQYDXLBPJLLMQXTYDZXSQJTZPXLCGLQTZWJBHCTSYJSFXYEJJTLBGXSXJMYJQQPFZASYJNTYDJXKJCDJSZCBARTDCLYJQMWNQNCLLLKBYBZZSYHQQLTWLCCXTXLLZNTYLNEWYZYXCZXXGRKRMTCNDNJTSYYSSDQDGHSDBJGHRWRQLYBGLXHLGTGXBQJDZPYJSJYJCTMRNYMGRZJCZGJMZMGXMPRYXKJNYMSGMZJYMKMFXMLDTGFBHCJHKYLPFMDXLQJJSMTQGZSJLQDLDGJYCALCMZCSDJLLNXDJFFFFJCZFMZFFPFKHKGDPSXKTACJDHHZDDCRRCFQYJKQCCWJDXHWJLYLLZGCFCQDSMLZPBJJPLSBCJGGDCKKDEZSQCCKJGCGKDJTJDLZYCXKLQSCGJCLTFPCQCZGWPJDQYZJJBYJHSJDZWGFSJGZKQCCZLLPSPKJGQJHZZLJPLGJGJJTHJJYJZCZMLZLYQBGJWMLJKXZDZNJQSYZMLJLLJKYWXMKJLHSKJGBMCLYYMKXJQLBMLLKMDXXKWYXYSLMLPSJQQJQXYXFJTJDXMXXLLCXQBSYJBGWYMBGGBCYXPJYGPEPFGDJGBHBNSQJYZJKJKHXQFGQZKFHYGKHDKLJQXPQYKYBNQSXQNSZSWHBSXWHXWBZZXDMNSJBSBKBBZKLYLXGWXDRWYQZMYWSJQLCJXXJXKJEQXSCYETLZHLYYYSDZPAQYZCMTLSHTZCFYZYXYLJSDCJQAGYSLCQLYYYSHMRQQKLDXZSCSSSYDYCJYSFSJBFRSSZQSBXXPXJYSDRCKGJLGDKZJZBDKTCSYQPYHSTCLDJDHMXMCGXYZHJDDTMHLTXZXYLYMOHYJCLTYFBQQXPFBDFHHTKSQHZYYWCNXXCRWHOWGYJLEGWDQCWGFJYCSNTMYTOLBYGWQWESJPWNMLRYDZSZTXYQPZGCWXHNGPYXSHMYQJXZTDPPBFYHZHTJYFDZWKGKZBLDNTSXHQEEGZZYLZMMZYJZGXZXKHKSTXNXXWYLYAPSTHXDWHZYMPXAGKYDXBHNHXKDPJNMYHYLPMGOCSLNZHKXXLPZZLBMLSFBHHGYGYYGGBHSCYAQTYWLXTZQCEZYDQDQMMHTKLLSZHLSJZWFYHQSWSCWLQAZYNYTLSXTHAZNKZZSZZLAXXZWWCTGQQTDDYZTCCHYQZFLXPSLZYGPZSZNGLNDQTBDLXGTCTAJDKYWNSYZLJHHZZCWNYYZYWMHYCHHYXHJKZWSXHZYXLYSKQYSPSLYZWMYPPKBYGLKZHTYXAXQSYSHXASMCHKDSCRSWJPWXSGZJLWWSCHSJHSQNHCSEGNDAQTBAALZZMSSTDQJCJKTSCJAXPLGGXHHGXXZCXPDMMHLDGTYBYSJMXHMRCPXXJZCKZXSHMLQXXTTHXWZFKHCCZDYTCJYXQHLXDHYPJQXYLSYYDZOZJNYXQEZYSQYAYXWYPDGXDDXSPPYZNDLTWRHXYDXZZJHTCXMCZLHPYYYYMHZLLHNXMYLLLMDCPPXHMXDKYCYRDLTXJCHHZZXZLCCLYLNZSHZJZZLNNRLWHYQSNJHXYNTTTKYJPYCHHYEGKCTTWLGQRLGGTGTYGYHPYHYLQYQGCWYQKPYYYTTTTLHYHLLTYTTSPLKYZXGZWGPYDSSZZDQXSKCQNMJJZZBXYQMJRTFFBTKHZKBXLJJKDXJTLBWFZPPTKQTZTGPDGNTPJYFALQMKGXBDCLZFHZCLLLLADPMXDJHLCCLGYHDZFGYDDGCYYFGYDXKSSEBDHYKDKDKHNAXXYBPBYYHXZQGAFFQYJXDMLJCSQZLLPCHBSXGJYNDYBYQSPZWJLZKSDDTACTBXZDYZYPJZQSJNKKTKNJDJGYYPGTLFYQKASDNTCYHBLWDZHBBYDWJRYGKZYHEYYFJMSDTYFZJJHGCXPLXHLDWXXJKYTCYKSSSMTWCTTQZLPBSZDZWZXGZAGYKTYWXLHLSPBCLLOQMMZSSLCMBJCSZZKYDCZJGQQDSMCYTZQQLWZQZXSSFPTTFQMDDZDSHDTDWFHTDYZJYQJQKYPBDJYYXTLJHDRQXXXHAYDHRJLKLYTWHLLRLLRCXYLBWSRSZZSYMKZZHHKYHXKSMDSYDYCJPBZBSQLFCXXXNXKXWYWSDZYQOGGQMMYHCDZTTFJYYBGSTTTYBYKJDHKYXBELHTYPJQNFXFDYKZHQKZBYJTZBXHFDXKDASWTAWAJLDYJSFHBLDNNTNQJTJNCHXFJSRFWHZFMDRYJYJWZPDJKZYJYMPCYZNYNXFBYTFYFWYGDBNZZZDNYTXZEMMQBSQEHXFZMBMFLZZSRXYMJGSXWZJSPRYDJSJGXHJJGLJJYNZZJXHGXKYMLPYYYCXYTWQZSWHWLYRJLPXSLSXMFSWWKLCTNXNYNPSJSZHDZEPTXMYYWXYYSYWLXJQZQXZDCLEEELMCPJPCLWBXSQHFWWTFFJTNQJHJQDXHWLBYZNFJLALKYYJLDXHHYCSTYYWNRJYXYWTRMDRQHWQCMFJDYZMHMYYXJWMYZQZXTLMRSPWWCHAQBXYGZYPXYYRRCLMPYMGKSJSZYSRMYJSNXTPLNBAPPYPYLXYYZKYNLDZYJZCZNNLMZHHARQMPGWQTZMXXMLLHGDZXYHXKYXYCJMFFYYHJFSBSSQLXXNDYCANNMTCJCYPRRNYTYQNYYMBMSXNDLYLYSLJRLXYSXQMLLYZLZJJJKYZZCSFBZXXMSTBJGNXYZHLXNMCWSCYZYFZLXBRNNNYLBNRTGZQYSATSWRYHYJZMZDHZGZDWYBSSCSKXSYHYTXXGCQGXZZSHYXJSCRHMKKBXCZJYJYMKQHZJFNBHMQHYSNJNZYBKNQMCLGQHWLZNZSWXKHLJHYYBQLBFCDSXDLDSPFZPSKJYZWZXZDDXJSMMEGJSCSSMGCLXXKYYYLNYPWWWGYDKZJGGGZGGSYCKNJWNJPCXBJJTQTJWDSSPJXZXNZXUMELPXFSXTLLXCLJXJJLJZXCTPSWXLYDHLYQRWHSYCSQYYBYAYWJJJQFWQCQQCJQGXALDBZZYJGKGXPLTZYFXJLTPADKYQHPMATLCPDCKBMTXYBHKLENXDLEEGQDYMSAWHZMLJTWYGXLYQZLJEEYYBQQFFNLYXRDSCTGJGXYYNKLLYQKCCTLHJLQMKKZGCYYGLLLJDZGYDHZWXPYSJBZKDZGYZZHYWYFQYTYZSZYEZZLYMHJJHTSMQWYZLKYYWZCSRKQYTLTDXWCTYJKLWSQZWBDCQYNCJSRSZJLKCDCDTLZZZACQQZZDDXYPLXZBQJYLZLLLQDDZQJYJYJZYXNYYYNYJXKXDAZWYRDLJYYYRJLXLLDYXJCYWYWNQCCLDDNYYYNYCKCZHXXCCLGZQJGKWPPCQQJYSBZZXYJSQPXJPZBSBDSFNSFPZXHDWZTDWPPTFLZZBZDMYYPQJRSDZSQZSQXBDGCPZSWDWCSQZGMDHZXMWWFYBPDGPHTMJTHZSMMBGZMBZJCFZWFZBBZMQCFMBDMCJXLGPNJBBXGYHYYJGPTZGZMQBQTCGYXJXLWZKYDPDYMGCFTPFXYZTZXDZXTGKMTYBBCLBJASKYTSSQYYMSZXFJEWLXLLSZBQJJJAKLYLXLYCCTSXMCWFKKKBSXLLLLJYXTYLTJYYTDPJHNHNNKBYQNFQYYZBYYESSESSGDYHFHWTCJBSDZZTFDMXHCNJZYMQWSRYJDZJQPDQBBSTJGGFBKJBXTGQHNGWJXJGDLLTHZHHYYYYYYSXWTYYYCCBDBPYPZYCCZYJPZYWCBDLFWZCWJDXXHYHLHWZZXJTCZLCDPXUJCZZZLYXJJTXPHFXWPYWXZPTDZZBDZCYHJHMLXBQXSBYLRDTGJRRCTTTHYTCZWMXFYTWWZCWJWXJYWCSKYBZSCCTZQNHXNWXXKHKFHTSWOCCJYBCMPZZYKBNNZPBZHHZDLSYDDYTYFJPXYNGFXBYQXCBHXCPSXTYZDMKYSNXSXLHKMZXLYHDHKWHXXSSKQYHHCJYXGLHZXCSNHEKDTGZXQYPKDHEXTYKCNYMYYYPKQYYYKXZLTHJQTBYQHXBMYHSQCKWWYLLHCYYLNNEQXQWMCFBDCCMLJGGXDQKTLXKGNQCDGZJWYJJLYHHQTTTNWCHMXCXWHWSZJYDJCCDBQCDGDNYXZTHCQRXCBHZTQCBXWGQWYYBXHMBYMYQTYEXMQKYAQYRGYZSLFYKKQHYSSQYSHJGJCNXKZYCXSBXYXHYYLSTYCXQTHYSMGSCPMMGCCCCCMTZTASMGQZJHKLOSQYLSWTMXSYQKDZLJQQYPLSYCZTCQQPBBQJZCLPKHQZYYXXDTDDTSJCXFFLLCHQXMJLWCJCXTSPYCXNDTJSHJWXDQQJSKXYAMYLSJHMLALYKXCYYDMNMDQMXMCZNNCYBZKKYFLMCHCMLHXRCJJHSYLNMTJZGZGYWJXSRXCWJGJQHQZDQJDCJJZKJKGDZQGJJYJYLXZXXCDQHHHEYTMHLFSBDJSYYSHFYSTCZQLPBDRFRZTZYKYWHSZYQKWDQZRKMSYNBCRXQBJYFAZPZZEDZCJYWBCJWHYJBQSZYWRYSZPTDKZPFPBNZTKLQYHBBZPNPPTYZZYBQNYDCPJMMCYCQMCYFZZDCMNLFPBPLNGQJTBTTNJZPZBBZNJKLJQYLNBZQHKSJZNGGQSZZKYXSHPZSNBCGZKDDZQANZHJKDRTLZLSWJLJZLYWTJNDJZJHXYAYNCBGTZCSSQMNJPJYTYSWXZFKWJQTKHTZPLBHSNJZSYZBWZZZZLSYLSBJHDWWQPSLMMFBJDWAQYZTCJTBNNWZXQXCDSLQGDSDPDZHJTQQPSWLYYJZLGYXYZLCTCBJTKTYCZJTQKBSJLGMGZDMCSGPYNJZYQYYKNXRPWSZXMTNCSZZYXYBYHYZAXYWQCJTLLCKJJTJHGDXDXYQYZZBYWDLWQCGLZGJGQRQZCZSSBCRPCSKYDZNXJSQGXSSJMYDNSTZTPBDLTKZWXQWQTZEXNQCZGWEZKSSBYBRTSSSLCCGBPSZQSZLCCGLLLZXHZQTHCZMQGYZQZNMCOCSZJMMZSQPJYGQLJYJPPLDXRGZYXCCSXHSHGTZNLZWZKJCXTCFCJXLBMQBCZZWPQDNHXLJCTHYZLGYLNLSZZPCXDSCQQHJQKSXZPBAJYEMSMJTZDXLCJYRYYNWJBNGZZTMJXLTBSLYRZPYLSSCNXPHLLHYLLQQZQLXYMRSYCXZLMMCZLTZSDWTJJLLNZGGQXPFSKYGYFZPDKMWGHCXMSGDXJMCJZDYCABXJDLNBCDQYGSKYDQTXDJJYXMSZQAZDZFSLQXYJSJZYLBTXXWXQQZBJZUFBBLYLWDSLJHXJYZJWTDJCZFQZQZZDZSXZZQLZCDZFJHYSPYMPQZMLPPLFFXJJNZZYLSJEYQZFPFZKSYWJJJHRDJZZXTXXGLGHYDXCSKYSWMMZCWYBAZBJKSHFHJCXMHFQHYXXYZFTSJYZFXYXPZLCHMZMBXHZZSXYFYMNCWDABAZLXKTCSHHXKXJJZJSTHYGXSXYYHHHJWXKZXSSBZZWHHHCWTZZZPJXSNXQQJGZYZYWLLCWXZFXXYXYHXMKYYSWSQMNLNAYCYSPMJKHWCQHYLAJJMZXHMMCNZHBHXCLXTJPLTXYJHDYYLTTXFSZHYXXSJBJYAYRSMXYPLCKDUYHLXRLNLLSTYZYYQYGYHHSCCSMZCTZQXKYQFPYYRPFFLKQUNTSZLLZMWWTCQQYZWTLLMLMPWMBZSSTZRBPDDTLQJJBXZCSRZQQYGWCSXFWZLXCCRSZDZMCYGGDZQSGTJSWLJMYMMZYHFBJDGYXCCPSHXNZCSBSJYJGJMPPWAFFYFNXHYZXZYLREMZGZCYZSSZDLLJCSQFNXZKPTXZGXJJGFMYYYSNBTYLBNLHPFZDCYFBMGQRRSSSZXYSGTZRNYDZZCDGPJAFJFZKNZBLCZSZPSGCYCJSZLMLRSZBZZLDLSLLYSXSQZQLYXZLSKKBRXBRBZCYCXZZZEEYFGKLZLYYHGZSGZLFJHGTGWKRAAJYZKZQTSSHJJXDCYZUYJLZYRZDQQHGJZXSSZBYKJPBFRTJXLLFQWJHYLQTYMBLPZDXTZYGBDHZZRBGXHWNJTJXLKSCFSMWQYSJTXKZSCFWJLBXFTZLLJZLLQBLSQMQQCGCZFPBPHZCZJLPYYGGDTGWDCFCZQYYYQYSSCLXZSKLZZZGFFCQNWGLHQYZJJCZLQZZYJPJZZBPDCCMHJGXDQDGDLZQMFGPSYTSDYFWWDJZJYSXYYCZCYHZWPBYKXRYLYBHKJKSFXTZJMMCKHLLTNYYMSYXYZPYJQYCSYCWMTJJKQYRHLLQXPSGTLYYCLJSCPXJYZFNMLRGJJTYZBXYZMSJYJHHFZQMSYXRSZCWTLRTQZSSTKXGQKGSPTGCZNJSJCQCXHMXGGZTQYDJKZDLBZSXJLHYQGGGTHQSZPYHJHHGYYGKGGCWJZZYLCZLXQSFTGZSLLLMLJSKCTBLLZZSZMMNYTPZSXQHJCJYQXYZXZQZCPSHKZZYSXCDFGMWQRLLQXRFZTLYSTCTMJCXJJXHJNXTNRZTZFQYHQGLLGCXSZSJDJLJCYDSJTLNYXHSZXCGJZYQPYLFHDJSBPCCZHJJJQZJQDYBSSLLCMYTTMQTBHJQNNYGKYRQYQMZGCJKPDCGMYZHQLLSLLCLMHOLZGDYYFZSLJCQZLYLZQJESHNYLLJXGJXLYSYYYXNBZLJSSZCQQCJYLLZLTJYLLZLLBNYLGQCHXYYXOXCXQKYJXXXYKLXSXXYQXCYKQXQCSGYXXYQXYGYTQOHXHXPYXXXULCYEYCHZZCBWQBBWJQZSCSZSSLZYLKDESJZWMYMCYTSDSXXSCJPQQSQYLYYZYCMDJDZYWCBTJSYDJKCYDDJLBDJJSODZYSYXQQYXDHHGQQYQHDYXWGMMMAJDYBBBPPBCMUUPLJZSMTXERXJMHQNUTPJDCBSSMSSSTKJTSSMMTRCPLZSZMLQDSDMJMQPNQDXCFYNBFSDQXYXHYAYKQYDDLQYYYSSZBYDSLNTFQTZQPZMCHDHCZCWFDXTMYQSPHQYYXSRGJCWTJTZZQMGWJJTJHTQJBBHWZPXXHYQFXXQYWYYHYSCDYDHHQMNMTMWCPBSZPPZZGLMZFOLLCFWHMMSJZTTDHZZYFFYTZZGZYSKYJXQYJZQBHMBZZLYGHGFMSHPZFZSNCLPBQSNJXZSLXXFPMTYJYGBXLLDLXPZJYZJYHHZCYWHJYLSJEXFSZZYWXKZJLUYDTMLYMQJPWXYHXSKTQJEZRPXXZHHMHWQPWQLYJJQJJZSZCPHJLCHHNXJLQWZJHBMZYXBDHHYPZLHLHLGFWLCHYYTLHJXCJMSCPXSTKPNHQXSRTYXXTESYJCTLSSLSTDLLLWWYHDHRJZSFGXTSYCZYNYHTDHWJSLHTZDQDJZXXQHGYLTZPHCSQFCLNJTCLZPFSTPDYNYLGMJLLYCQHYSSHCHYLHQYQTMZYPBYWRFQYKQSYSLZDQJMPXYYSSRHZJNYWTQDFZBWWTWWRXCWHGYHXMKMYYYQMSMZHNGCEPMLQQMTCWCTMMPXJPJJHFXYYZSXZHTYBMSTSYJTTQQQYYLHYNPYQZLCYZHZWSMYLKFJXLWGXYPJYTYSYXYMZCKTTWLKSMZSYLMPWLZWXWQZSSAQSYXYRHSSNTSRAPXCPWCMGDXHXZDZYFJHGZTTSBJHGYZSZYSMYCLLLXBTYXHBBZJKSSDMALXHYCFYGMQYPJYCQXJLLLJGSLZGQLYCJCCZOTYXMTMTTLLWTGPXYMZMKLPSZZZXHKQYSXCTYJZYHXSHYXZKXLZWPSQPYHJWPJPWXQQYLXSDHMRSLZZYZWTTCYXYSZZSHBSCCSTPLWSSCJCHNLCGCHSSPHYLHFHHXJSXYLLNYLSZDHZXYLSXLWZYKCLDYAXZCMDDYSPJTQJZLNWQPSSSWCTSTSZLBLNXSMNYYMJQBQHRZWTYYDCHQLXKPZWBGQYBKFCMZWPZLLYYLSZYDWHXPSBCMLJBSCGBHXLQHYRLJXYSWXWXZSLDFHLSLYNJLZYFLYJYCDRJLFSYZFSLLCQYQFGJYHYXZLYLMSTDJCYHBZLLNWLXXYGYYHSMGDHXXHHLZZJZXCZZZCYQZFNGWPYLCPKPYYPMCLQKDGXZGGWQBDXZZKZFBXXLZXJTPJPTTBYTSZZDWSLCHZHSLTYXHQLHYXXXYYZYSWTXZKHLXZXZPYHGCHKCFSYHUTJRLXFJXPTZTWHPLYXFCRHXSHXKYXXYHZQDXQWULHYHMJTBFLKHTXCWHJFWJCFPQRYQXCYYYQYGRPYWSGSUNGWCHKZDXYFLXXHJJBYZWTSXXNCYJJYMSWZJQRMHXZWFQSYLZJZGBHYNSLBGTTCSYBYXXWXYHXYYXNSQYXMQYWRGYQLXBBZLJSYLPSYTJZYHYZAWLRORJMKSCZJXXXYXCHDYXRYXXJDTSQFXLYLTSFFYXLMTYJMJUYYYXLTZCSXQZQHZXLYYXZHDNBRXXXJCTYHLBRLMBRLLAXKYLLLJLYXXLYCRYLCJTGJCMTLZLLCYZZPZPCYAWHJJFYBDYYZSMPCKZDQYQPBPCJPDCYZMDPBCYYDYCNNPLMTMLRMFMMGWYZBSJGYGSMZQQQZTXMKQWGXLLPJGZBQCDJJJFPKJKCXBLJMSWMDTQJXLDLPPBXCWRCQFBFQJCZAHZGMYKPHYYHZYKNDKZMBPJYXPXYHLFPNYYGXJDBKXNXHJMZJXSTRSTLDXSKZYSYBZXJLXYSLBZYSLHXJPFXPQNBYLLJQKYGZMCYZZYMCCSLCLHZFWFWYXZMWSXTYNXJHPYYMCYSPMHYSMYDYSHQYZCHMJJMZCAAGCFJBBHPLYZYLXXSDJGXDHKXXTXXNBHRMLYJSLTXMRHNLXQJXYZLLYSWQGDLBJHDCGJYQYCMHWFMJYBMBYJYJWYMDPWHXQLDYGPDFXXBCGJSPCKRSSYZJMSLBZZJFLJJJLGXZGYXYXLSZQYXBEXYXHGCXBPLDYHWETTWWCJMBTXCHXYQXLLXFLYXLLJLSSFWDPZSMYJCLMWYTCZPCHQEKCQBWLCQYDPLQPPQZQFJQDJHYMMCXTXDRMJWRHXCJZYLQXDYYNHYYHRSLSRSYWWZJYMTLTLLGTQCJZYABTCKZCJYCCQLJZQXALMZYHYWLWDXZXQDLLQSHGPJFJLJHJABCQZDJGTKHSSTCYJLPSWZLXZXRWGLDLZRLZXTGSLLLLZLYXXWGDZYGBDPHZPBRLWSXQBPFDWOFMWHLYPCBJCCLDMBZPBZZLCYQXLDOMZBLZWPDWYYGDSTTHCSQSCCRSSSYSLFYBFNTYJSZDFNDPDHDZZMBBLSLCMYFFGTJJQWFTMTPJWFNLBZCMMJTGBDZLQLPYFHYYMJYCHDZJWJCCTLJCLDTLJJCPDDSQDSSZYBNDBJLGGJZXSXNLYCYBJXQYCBYLZCFZPPGKCXZDZFZTJJFJSJXZBNZYJQTTYJYHTYCZHYMDJXTTMPXSPLZCDWSLSHXYPZGTFMLCJTYCBPMGDKWYCYZCDSZZYHFLYCTYGWHKJYYLSJCXGYWJCBLLCSNDDBTZBSCLYZCZZSSQDLLMQYYHFSLQLLXFTYHABXGWNYWYYPLLDLLBJCYXJZMLHLJDXYYQYTDLLLBUGBFDFBBQJZZMDPJHGCLGMJJPGAEHHBWCQXAXHHHZCHXYPHJAXHLPHJPGPZJQCQZGJJZZUZDMQYYBZZPHYHYBWHAZYJHYKFGDPFQSDLZMLJXKXGALXZDAGLMDGXMWZQYXXDXXPFDMMSSYMPFMDMMKXKSYZYSHDZKXSYSMMZZZMSYDNZZCZXFPLSTMZDNMXCKJMZTYYMZMZZMSXHHDCZJEMXXKLJSTLWLSQLYJZLLZJSSDPPMHNLZJCZYHMXXHGZCJMDHXTKGRMXFWMCGMWKDTKSXQMMMFZZYDKMSCLCMPCGMHSPXQPZDSSLCXKYXTWLWJYAHZJGZQMCSNXYYMMPMLKJXMHLMLQMXCTKZMJQYSZJSYSZHSYJZJCDAJZYBSDQJZGWZQQXFKDMSDJLFWEHKZQKJPEYPZYSZCDWYJFFMZZYLTTDZZEFMZLBNPPLPLPEPSZALLTYLKCKQZKGENQLWAGYXYDPXLHSXQQWQCQXQCLHYXXMLYCCWLYMQYSKGCHLCJNSZKPYZKCQZQLJPDMDZHLASXLBYDWQLWDNBQCRYDDZTJYBKBWSZDXDTNPJDTCTQDFXQQMGNXECLTTBKPWSLCTYQLPWYZZKLPYGZCQQPLLKCCYLPQMZCZQCLJSLQZDJXLDDHPZQDLJJXZQDXYZQKZLJCYQDYJPPYPQYKJYRMPCBYMCXKLLZLLFQPYLLLMBSGLCYSSLRSYSQTMXYXZQZFDZUYSYZTFFMZZSMZQHZSSCCMLYXWTPZGXZJGZGSJSGKDDHTQGGZLLBJDZLCBCHYXYZHZFYWXYZYMSDBZZYJGTSMTFXQYXQSTDGSLNXDLRYZZLRYYLXQHTXSRTZNGZXBNQQZFMYKMZJBZYMKBPNLYZPBLMCNQYZZZSJZHJCTZKHYZZJRDYZHNPXGLFZTLKGJTCTSSYLLGZRZBBQZZKLPKLCZYSSUYXBJFPNJZZXCDWXZYJXZZDJJKGGRSRJKMSMZJLSJYWQSKYHQJSXPJZZZLSNSHRNYPZTWCHKLPSRZLZXYJQXQKYSJYCZTLQZYBBYBWZPQDWWYZCYTJCJXCKCWDKKZXSGKDZXWWYYJQYYTCYTDLLXWKCZKKLCCLZCQQDZLQLCSFQCHQHSFSMQZZLNBJJZBSJHTSZDYSJQJPDLZCDCWJKJZZLPYCGMZWDJJBSJQZSYZYHHXJPBJYDSSXDZNCGLQMBTSFSBPDZDLZNFGFJGFSMPXJQLMBLGQCYYXBQKDJJQYRFKZTJDHCZKLBSDZCFJTPLLJGXHYXZCSSZZXSTJYGKGCKGYOQXJPLZPBPGTGYJZGHZQZZLBJLSQFZGKQQJZGYCZBZQTLDXRJXBSXXPZXHYZYCLWDXJJHXMFDZPFZHQHQMQGKSLYHTYCGFRZGNQXCLPDLBZCSCZQLLJBLHBZCYPZZPPDYMZZSGYHCKCPZJGSLJLNSCDSLDLXBMSTLDDFJMKDJDHZLZXLSZQPQPGJLLYBDSZGQLBZLSLKYYHZTTNTJYQTZZPSZQZTLLJTYYLLQLLQYZQLBDZLSLYYZYMDFSZSNHLXZNCZQZPBWSKRFBSYZMTHBLGJPMCZZLSTLXSHTCSYZLZBLFEQHLXFLCJLYLJQCBZLZJHHSSTBRMHXZHJZCLXFNBGXGTQJCZTMSFZKJMSSNXLJKBHSJXNTNLZDNTLMSJXGZJYJCZXYJYJWRWWQNZTNFJSZPZSHZJFYRDJSFSZJZBJFZQZZHZLXFYSBZQLZSGYFTZDCSZXZJBQMSZKJRHYJZCKMJKHCHGTXKXQGLXPXFXTRTYLXJXHDTSJXHJZJXZWZLCQSBTXWXGXTXXHXFTSDKFJHZYJFJXRZSDLLLTQSQQZQWZXSYQTWGWBZCGZLLYZBCLMQQTZHZXZXLJFRMYZFLXYSQXXJKXRMQDZDMMYYBSQBHGZMWFWXGMXLZPYYTGZYCCDXYZXYWGSYJYZNBHPZJSQSYXSXRTFYZGRHZTXSZZTHCBFCLSYXZLZQMZLMPLMXZJXSFLBYZMYQHXJSXRXSQZZZSSLYFRCZJRCRXHHZXQYDYHXSJJHZCXZBTYNSYSXJBQLPXZQPYMLXZKYXLXCJLCYSXXZZLXDLLLJJYHZXGYJWKJRWYHCPSGNRZLFZWFZZNSXGXFLZSXZZZBFCSYJDBRJKRDHHGXJLJJTGXJXXSTJTJXLYXQFCSGSWMSBCTLQZZWLZZKXJMLTMJYHSDDBXGZHDLBMYJFRZFSGCLYJBPMLYSMSXLSZJQQHJZFXGFQFQBPXZGYYQXGZTCQWYLTLGWSGWHRLFSFGZJMGMGBGTJFSYZZGZYZAFLSSPMLPFLCWBJZCLJJMZLPJJLYMQDMYYYFBGYGYZMLYZDXQYXRQQQHSYYYQXYLJTYXFSFSLLGNQCYHYCWFHCCCFXPYLYPLLZYXXXXXKQHHXSHJZCFZSCZJXCPZWHHHHHAPYLQALPQAFYHXDYLUKMZQGGGDDESRNNZLTZGCHYPPYSQJJHCLLJTOLNJPZLJLHYMHEYDYDSQYCDDHGZUNDZCLZYZLLZNTNYZGSLHSLPJJBDGWXPCDUTJCKLKCLWKLLCASSTKZZDNQNTTLYYZSSYSSZZRYLJQKCQDHHCRXRZYDGRGCWCGZQFFFPPJFZYNAKRGYWYQPQXXFKJTSZZXSWZDDFBBXTBGTZKZNPZZPZXZPJSZBMQHKCYXYLDKLJNYPKYGHGDZJXXEAHPNZKZTZCMXCXMMJXNKSZQNMNLWBWWXJKYHCPSTMCSQTZJYXTPCTPDTNNPGLLLZSJLSPBLPLQHDTNJNLYYRSZFFJFQWDPHZDWMRZCCLODAXNSSNYZRESTYJWJYJDBCFXNMWTTBYLWSTSZGYBLJPXGLBOCLHPCBJLTMXZLJYLZXCLTPNCLCKXTPZJSWCYXSFYSZDKNTLBYJCYJLLSTGQCBXRYZXBXKLYLHZLQZLNZCXWJZLJZJNCJHXMNZZGJZZXTZJXYCYYCXXJYYXJJXSSSJSTSSTTPPGQTCSXWZDCSYFPTFBFHFBBLZJCLZZDBXGCXLQPXKFZFLSYLTUWBMQJHSZBMDDBCYSCCLDXYCDDQLYJJWMQLLCSGLJJSYFPYYCCYLTJANTJJPWYCMMGQYYSXDXQMZHSZXPFTWWZQSWQRFKJLZJQQYFBRXJHHFWJJZYQAZMYFRHCYYBYQWLPEXCCZSTYRLTTDMQLYKMBBGMYYJPRKZNPBSXYXBHYZDJDNGHPMFSGMWFZMFQMMBCMZZCJJLCNUXYQLMLRYGQZCYXZLWJGCJCGGMCJNFYZZJHYCPRRCMTZQZXHFQGTJXCCJEAQCRJYHPLQLSZDJRBCQHQDYRHYLYXJSYMHZYDWLDFRYHBPYDTSSCNWBXGLPZMLZZTQSSCPJMXXYCSJYTYCGHYCJWYRXXLFEMWJNMKLLSWTXHYYYNCMMCWJDQDJZGLLJWJRKHPZGGFLCCSCZMCBLTBHBQJXQDSPDJZZGKGLFQYWBZYZJLTSTDHQHCTCBCHFLQMPWDSHYYTQWCNZZJTLBYMBPDYYYXSQKXWYYFLXXNCWCXYPMAELYKKJMZZZBRXYYQJFLJPFHHHYTZZXSGQQMHSPGDZQWBWPJHZJDYSCQWZKTXXSQLZYYMYSDZGRXCKKUJLWPYSYSCSYZLRMLQSYLJXBCXTLWDQZPCYCYKPPPNSXFYZJJRCEMHSZMSXLXGLRWGCSTLRSXBZGBZGZTCPLUJLSLYLYMTXMTZPALZXPXJTJWTCYYZLBLXBZLQMYLXPGHDSLSSDMXMBDZZSXWHAMLCZCPJMCNHJYSNSYGCHSKQMZZQDLLKABLWJXSFMOCDXJRRLYQZKJMYBYQLYHETFJZFRFKSRYXFJTWDSXXSYSQJYSLYXWJHSNLXYYXHBHAWHHJZXWMYLJCSSLKYDZTXBZSYFDXGXZJKHSXXYBSSXDPYNZWRPTQZCZENYGCXQFJYKJBZMLJCMQQXUOXSLYXXLYLLJDZBTYMHPFSTTQQWLHOKYBLZZALZXQLHZWRRQHLSTMYPYXJJXMQSJFNBXYXYJXXYQYLTHYLQYFMLKLJTMLLHSZWKZHLJMLHLJKLJSTLQXYLMBHHLNLZXQJHXCFXXLHYHJJGBYZZKBXSCQDJQDSUJZYYHZHHMGSXCSYMXFEBCQWWRBPYYJQTYZCYQYQQZYHMWFFHGZFRJFCDPXNTQYZPDYKHJLFRZXPPXZDBBGZQSTLGDGYLCQMLCHHMFYWLZYXKJLYPQHSYWMQQGQZMLZJNSQXJQSYJYCBEHSXFSZPXZWFLLBCYYJDYTDTHWZSFJMQQYJLMQXXLLDTTKHHYBFPWTYYSQQWNQWLGWDEBZWCMYGCULKJXTMXMYJSXHYBRWFYMWFRXYQMXYSZTZZTFYKMLDHQDXWYYNLCRYJBLPSXCXYWLSPRRJWXHQYPHTYDNXHHMMYWYTZCSQMTSSCCDALWZTCPQPYJLLQZYJSWXMZZMMYLMXCLMXCZMXMZSQTZPPQQBLPGXQZHFLJJHYTJSRXWZXSCCDLXTYJDCQJXSLQYCLZXLZZXMXQRJMHRHZJBHMFLJLMLCLQNLDXZLLLPYPSYJYSXCQQDCMQJZZXHNPNXZMEKMXHYKYQLXSXTXJYYHWDCWDZHQYYBGYBCYSCFGPSJNZDYZZJZXRZRQJJYMCANYRJTLDPPYZBSTJKXXZYPFDWFGZZRPYMTNGXZQBYXNBUFNQKRJQZMJEGRZGYCLKXZDSKKNSXKCLJSPJYYZLQQJYBZSSQLLLKJXTBKTYLCCDDBLSPPFYLGYDTZJYQGGKQTTFZXBDKTYYHYBBFYTYYBCLPDYTGDHRYRNJSPTCSNYJQHKLLLZSLYDXXWBCJQSPXBPJZJCJDZFFXXBRMLAZHCSNDLBJDSZBLPRZTSWSBXBCLLXXLZDJZSJPYLYXXYFTFFFBHJJXGBYXJPMMMPSSJZJMTLYZJXSWXTYLEDQPJMYGQZJGDJLQJWJQLLSJGJGYGMSCLJJXDTYGJQJQJCJZCJGDZZSXQGSJGGCXHQXSNQLZZBXHSGZXCXYLJXYXYYDFQQJHJFXDHCTXJYRXYSQTJXYEFYYSSYYJXNCYZXFXMSYSZXYYSCHSHXZZZGZZZGFJDLTYLNPZGYJYZYYQZPBXQBDZTZCZYXXYHHSQXSHDHGQHJHGYWSZTMZMLHYXGEBTYLZKQWYTJZRCLEKYSTDBCYKQQSAYXCJXWWGSBHJYZYDHCSJKQCXSWXFLTYNYZPZCCZJQTZWJQDZZZQZLJJXLSBHPYXXPSXSHHEZTXFPTLQYZZXHYTXNCFZYYHXGNXMYWXTZSJPTHHGYMXMXQZXTSBCZYJYXXTYYZYPCQLMMSZMJZZLLZXGXZAAJZYXJMZXWDXZSXZDZXLEYJJZQBHZWZZZQTZPSXZTDSXJJJZNYAZPHXYYSRNQDTHZHYYKYJHDZXZLSWCLYBZYECWCYCRYLCXNHZYDZYDYJDFRJJHTRSQTXYXJRJHOJYNXELXSFSFJZGHPZSXZSZDZCQZBYYKLSGSJHCZSHDGQGXYZGXCHXZJWYQWGYHKSSEQZZNDZFKWYSSTCLZSTSYMCDHJXXYWEYXCZAYDMPXMDSXYBSQMJMZJMTZQLPJYQZCGQHXJHHLXXHLHDLDJQCLDWBSXFZZYYSCHTYTYYBHECXHYKGJPXHHYZJFXHWHBDZFYZBCAPNPGNYDMSXHMMMMAMYNBYJTMPXYYMCTHJBZYFCGTYHWPHFTWZZEZSBZEGPFMTSKFTYCMHFLLHGPZJXZJGZJYXZSBBQSCZZLZCCSTPGXMJSFTCCZJZDJXCYBZLFCJSYZFGSZLYBCWZZBYZDZYPSWYJZXZBDSYUXLZZBZFYGCZXBZHZFTPBGZGEJBSTGKDMFHYZZJHZLLZZGJQZLSFDJSSCBZGPDLFZFZSZYZYZSYGCXSNXXCHCZXTZZLJFZGQSQYXZJQDCCZTQCDXZJYQJQCHXZTDLGSCXZSYQJQTZWLQDQZTQCHQQJZYEZZZPBWKDJFCJPZTYPQYQTTYNLMBDKTJZPQZQZZFPZSBNJLGYJDXJDZZKZGQKXDLPZJTCJDQBXDJQJSTCKNXBXZMSLYJCQMTJQWWCJQNJNLLLHJCWQTBZQYDZCZPZZDZYDDCYZZZCCJTTJFZDPRRTZTJDCQTQZDTJNPLZBCLLCTZSXKJZQZPZLBZRBTJDCXFCZDBCCJJLTQQPLDCGZDBBZJCQDCJWYNLLZYZCCDWLLXWZLXRXNTQQCZXKQLSGDFQTDDGLRLAJJTKUYMKQLLTZYTDYYCZGJWYXDXFRSKSTQTENQMRKQZHHQKDLDAZFKYPBGGPZREBZZYKZZSPEGJXGYKQZZZSLYSYYYZWFQZYLZZLZHWCHKYPQGNPGBLPLRRJYXCCSYYHSFZFYBZYYTGZXYLXCZWXXZJZBLFFLGSKHYJZEYJHLPLLLLCZGXDRZELRHGKLZZYHZLYQSZZJZQLJZFLNBHGWLCZCFJYSPYXZLZLXGCCPZBLLCYBBBBUBBCBPCRNNZCZYRBFSRLDCGQYYQXYGMQZWTZYTYJXYFWTEHZZJYWLCCNTZYJJZDEDPZDZTSYQJHDYMBJNYJZLXTSSTPHNDJXXBYXQTZQDDTJTDYYTGWSCSZQFLSHLGLBCZPHDLYZJYCKWTYTYLBNYTSDSYCCTYSZYYEBHEXHQDTWNYGYCLXTSZYSTQMYGZAZCCSZZDSLZCLZRQXYYELJSBYMXSXZTEMBBLLYYLLYTDQYSHYMRQWKFKBFXNXSBYCHXBWJYHTQBPBSBWDZYLKGZSKYHXQZJXHXJXGNLJKZLYYCDXLFYFGHLJGJYBXQLYBXQPQGZTZPLNCYPXDJYQYDYMRBESJYYHKXXSTMXRCZZYWXYQYBMCLLYZHQYZWQXDBXBZWZMSLPDMYSKFMZKLZCYQYCZLQXFZZYDQZPZYGYJYZMZXDZFYFYTTQTZHGSPCZMLCCYTZXJCYTJMKSLPZHYSNZLLYTPZCTZZCKTXDHXXTQCYFKSMQCCYYAZHTJPCYLZLYJBJXTPNYLJYYNRXSYLMMNXJSMYBCSYSYLZYLXJJQYLDZLPQBFZZBLFNDXQKCZFYWHGQMRDSXYCYTXNQQJZYYPFZXDYZFPRXEJDGYQBXRCNFYYQPGHYJDYZXGRHTKYLNWDZNTSMPKLBTHBPYSZBZTJZSZZJTYYXZPHSSZZBZCZPTQFZMYFLYPYBBJQXZMXXDJMTSYSKKBJZXHJCKLPSMKYJZCXTMLJYXRZZQSLXXQPYZXMKYXXXJCLJPRMYYGADYSKQLSNDHYZKQXZYZTCGHZTLMLWZYBWSYCTBHJHJFCWZTXWYTKZLXQSHLYJZJXTMPLPYCGLTBZZTLZJCYJGDTCLKLPLLQPJMZPAPXYZLKKTKDZCZZBNZDYDYQZJYJGMCTXLTGXSZLMLHBGLKFWNWZHDXUHLFMKYSLGXDTWWFRJEJZTZHYDXYKSHWFZCQSHKTMQQHTZHYMJDJSKHXZJZBZZXYMPAGQMSTPXLSKLZYNWRTSQLSZBPSPSGZWYHTLKSSSWHZZLYYTNXJGMJSZSUFWNLSOZTXGXLSAMMLBWLDSZYLAKQCQCTMYCFJBSLXCLZZCLXXKSBZQCLHJPSQPLSXXCKSLNHPSFQQYTXYJZLQLDXZQJZDYYDJNZPTUZDSKJFSLJHYLZSQZLBTXYDGTQFDBYAZXDZHZJNHHQBYKNXJJQCZMLLJZKSPLDYCLBBLXKLELXJLBQYCXJXGCNLCQPLZLZYJTZLJGYZDZPLTQCSXFDMNYCXGBTJDCZNBGBQYQJWGKFHTNPYQZQGBKPBBYZMTJDYTBLSQMPSXTBNPDXKLEMYYCJYNZCTLDYKZZXDDXHQSHDGMZSJYCCTAYRZLPYLTLKXSLZCGGEXCLFXLKJRTLQJAQZNCMBYDKKCXGLCZJZXJHPTDJJMZQYKQSECQZDSHHADMLZFMMZBGNTJNNLGBYJBRBTMLBYJDZXLCJLPLDLPCQDHLXZLYCBLCXZZJADJLNZMMSSSMYBHBSQKBHRSXXJMXSDZNZPXLGBRHWGGFCXGMSKLLTSJYYCQLTSKYWYYHYWXBXQYWPYWYKQLSQPTNTKHQCWDQKTWPXXHCPTHTWUMSSYHBWCRWXHJMKMZNGWTMLKFGHKJYLSYYCXWHYECLQHKQHTTQKHFZLDXQWYZYYDESBPKYRZPJFYYZJCEQDZZDLATZBBFJLLCXDLMJSSXEGYGSJQXCWBXSSZPDYZCXDNYXPPZYDLYJCZPLTXLSXYZYRXCYYYDYLWWNZSAHJSYQYHGYWWAXTJZDAXYSRLTDPSSYYFNEJDXYZHLXLLLZQZSJNYQYQQXYJGHZGZCYJCHZLYCDSHWSHJZYJXCLLNXZJJYYXNFXMWFPYLCYLLABWDDHWDXJMCXZTZPMLQZHSFHZYNZTLLDYWLSLXHYMMYLMBWWKYXYADTXYLLDJPYBPWUXJMWMLLSAFDLLYFLBHHHBQQLTZJCQJLDJTFFKMMMBYTHYGDCQRDDWRQJXNBYSNWZDBYYTBJHPYBYTTJXAAHGQDQTMYSTQXKBTZPKJLZRBEQQSSMJJBDJOTGTBXPGBKTLHQXJJJCTHXQDWJLWRFWQGWSHCKRYSWGFTGYGBXSDWDWRFHWYTJJXXXJYZYSLPYYYPAYXHYDQKXSHXYXGSKQHYWFDDDPPLCJLQQEEWXKSYYKDYPLTJTHKJLTCYYHHJTTPLTZZCDLTHQKZXQYSTEEYWYYZYXXYYSTTJKLLPZMCYHQGXYHSRMBXPLLNQYDQHXSXXWGDQBSHYLLPJJJTHYJKYPPTHYYKTYEZYENMDSHLCRPQFDGFXZPSFTLJXXJBSWYYSKSFLXLPPLBBBLBSFXFYZBSJSSYLPBBFFFFSSCJDSTZSXZRYYSYFFSYZYZBJTBCTSBSDHRTJJBYTCXYJEYLXCBNEBJDSYXYKGSJZBXBYTFZWGENYHHTHZHHXFWGCSTBGXKLSXYWMTMBYXJSTZSCDYQRCYTWXZFHMYMCXLZNSDJTTTXRYCFYJSBSDYERXJLJXBBDEYNJGHXGCKGSCYMBLXJMSZNSKGXFBNBPTHFJAAFXYXFPXMYPQDTZCXZZPXRSYWZDLYBBKTYQPQJPZYPZJZNJPZJLZZFYSBTTSLMPTZRTDXQSJEHBZYLZDHLJSQMLHTXTJECXSLZZSPKTLZKQQYFSYGYWPCPQFHQHYTQXZKRSGTTSQCZLPTXCDYYZXSQZSLXLZMYCPCQBZYXHBSXLZDLTCDXTYLZJYYZPZYZLTXJSJXHLPMYTXCQRBLZSSFJZZTNJYTXMYJHLHPPLCYXQJQQKZZSCPZKSWALQSBLCCZJSXGWWWYGYKTJBBZTDKHXHKGTGPBKQYSLPXPJCKBMLLXDZSTBKLGGQKQLSBKKTFXRMDKBFTPZFRTBBRFERQGXYJPZSSTLBZTPSZQZSJDHLJQLZBPMSMMSXLQQNHKNBLRDDNXXDHDDJCYYGYLXGZLXSYGMQQGKHBPMXYXLYTQWLWGCPBMQXCYZYDRJBHTDJYHQSHTMJSBYPLWHLZFFNYPMHXXHPLTBQPFBJWQDBYGPNZTPFZJGSDDTQSHZEAWZZYLLTYYBWJKXXGHLFKXDJTMSZSQYNZGGSWQSPHTLSSKMCLZXYSZQZXNCJDQGZDLFNYKLJCJLLZLMZZNHYDSSHTHZZLZZBBHQZWWYCRZHLYQQJBEYFXXXWHSRXWQHWPSLMSSKZTTYGYQQWRSLALHMJTQJSMXQBJJZJXZYZKXBYQXBJXSHZTSFJLXMXZXFGHKZSZGGYLCLSARJYHSLLLMZXELGLXYDJYTLFBHBPNLYZFBBHPTGJKWETZHKJJXZXXGLLJLSTGSHJJYQLQZFKCGNNDJSSZFDBCTWWSEQFHQJBSAQTGYPQLBXBMMYWXGSLZHGLZGQYFLZBYFZJFRYSFMBYZHQGFWZSYFYJJPHZBYYZFFWODGRLMFTWLBZGYCQXCDJYGZYYYYTYTYDWEGAZYHXJLZYYHLRMGRXXZCLHNELJJTJTPWJYBJJBXJJTJTEEKHWSLJPLPSFYZPQQBDLQJJTYYQLYZKDKSQJYYQZLDQTGJQYZJSUCMRYQTHTEJMFCTYHYPKMHYZWJDQFHYYXWSHCTXRLJHQXHCCYYYJLTKTTYTMXGTCJTZAYYOCZLYLBSZYWJYTSJYHBYSHFJLYGJXXTMZYYLTXXYPZLXYJZYZYYPNHMYMDYYLBLHLSYYQQLLNJJYMSOYQBZGDLYXYLCQYXTSZEGXHZGLHWBLJHEYXTWQMAKBPQCGYSHHEGQCMWYYWLJYJHYYZLLJJYLHZYHMGSLJLJXCJJYCLYCJPCPZJZJMMYLCQLNQLJQJSXYJMLSZLJQLYCMMHCFMMFPQQMFYLQMCFFQMMMMHMZNFHHJGTTHHKHSLNCHHYQDXTMMQDCYZYXYQMYQYLTDCYYYZAZZCYMZYDLZFFFMMYCQZWZZMABTBYZTDMNZZGGDFTYPCGQYTTSSFFWFDTZQSSYSTWXJHXYTSXXYLBYQHWWKXHZXWZNNZZJZJJQJCCCHYYXBZXZCYZTLLCQXYNJYCYYCYNZZQYYYEWYCZDCJYCCHYJLBTZYYCQWMPWPYMLGKDLDLGKQQBGYCHJXY\”;

//此处收录了375个多音字,数据来自于http://www.51window.net/page/pinyin

var oMultiDiff = {\”19969\”:\”DZ\”, \”19975\”:\”WM\”, \”19988\”:\”QJ\”, \”20048\”:\”YL\”, \”20056\”:\”SC\”, \”20060\”:\”NM\”, \”20094\”:\”QG\”, \”20127\”:\”QJ\”, \”20167\”:\”QC\”, \”20193\”:\”YG\”, \”20250\”:\”KH\”, \”20256\”:\”ZC\”, \”20282\”:\”SC\”, \”20285\”:\”QJG\”, \”20291\”:\”TD\”, \”20314\”:\”YD\”, \”20340\”:\”NE\”, \”20375\”:\”TD\”, \”20389\”:\”YJ\”, \”20391\”:\”CZ\”, \”20415\”:\”PB\”, \”20446\”:\”YS\”, \”20447\”:\”SQ\”, \”20504\”:\”TC\”, \”20608\”:\”KG\”, \”20854\”:\”QJ\”, \”20857\”:\”ZC\”, \”20911\”:\”PF\”, \”20504\”:\”TC\”, \”20608\”:\”KG\”, \”20854\”:\”QJ\”, \”20857\”:\”ZC\”, \”20911\”:\”PF\”, \”20985\”:\”AW\”, \”21032\”:\”PB\”, \”21048\”:\”XQ\”, \”21049\”:\”SC\”, \”21089\”:\”YS\”, \”21119\”:\”JC\”, \”21242\”:\”SB\”, \”21273\”:\”SC\”, \”21305\”:\”YP\”, \”21306\”:\”QO\”, \”21330\”:\”ZC\”, \”21333\”:\”SDC\”, \”21345\”:\”QK\”, \”21378\”:\”CA\”, \”21397\”:\”SC\”, \”21414\”:\”XS\”, \”21442\”:\”SC\”, \”21477\”:\”JG\”, \”21480\”:\”TD\”, \”21484\”:\”ZS\”, \”21494\”:\”YX\”, \”21505\”:\”YX\”, \”21512\”:\”HG\”, \”21523\”:\”XH\”, \”21537\”:\”PB\”, \”21542\”:\”PF\”, \”21549\”:\”KH\”, \”21571\”:\”E\”, \”21574\”:\”DA\”, \”21588\”:\”TD\”, \”21589\”:\”O\”, \”21618\”:\”ZC\”, \”21621\”:\”KHA\”, \”21632\”:\”ZJ\”, \”21654\”:\”KG\”, \”21679\”:\”LKG\”, \”21683\”:\”KH\”, \”21710\”:\”A\”, \”21719\”:\”YH\”, \”21734\”:\”WOE\”, \”21769\”:\”A\”, \”21780\”:\”WN\”, \”21804\”:\”XH\”, \”21834\”:\”A\”, \”21899\”:\”ZD\”, \”21903\”:\”RN\”, \”21908\”:\”WO\”, \”21939\”:\”ZC\”, \”21956\”:\”SA\”, \”21964\”:\”YA\”, \”21970\”:\”TD\”, \”22003\”:\”A\”, \”22031\”:\”JG\”, \”22040\”:\”XS\”, \”22060\”:\”ZC\”, \”22066\”:\”ZC\”, \”22079\”:\”MH\”, \”22129\”:\”XJ\”, \”22179\”:\”XA\”, \”22237\”:\”NJ\”, \”22244\”:\”TD\”, \”22280\”:\”JQ\”, \”22300\”:\”YH\”, \”22313\”:\”XW\”, \”22331\”:\”YQ\”, \”22343\”:\”YJ\”, \”22351\”:\”PH\”, \”22395\”:\”DC\”, \”22412\”:\”TD\”, \”22484\”:\”PB\”, \”22500\”:\”PB\”, \”22534\”:\”ZD\”, \”22549\”:\”DH\”, \”22561\”:\”PB\”, \”22612\”:\”TD\”, \”22771\”:\”KQ\”, \”22831\”:\”HB\”, \”22841\”:\”JG\”, \”22855\”:\”QJ\”, \”22865\”:\”XQ\”, \”23013\”:\”ML\”, \”23081\”:\”WM\”, \”23487\”:\”SX\”, \”23558\”:\”QJ\”, \”23561\”:\”YW\”, \”23586\”:\”YW\”, \”23614\”:\”YW\”, \”23615\”:\”SN\”, \”23631\”:\”PB\”, \”23646\”:\”ZS\”, \”23663\”:\”ZT\”, \”23673\”:\”YG\”, \”23762\”:\”TD\”, \”23769\”:\”ZS\”, \”23780\”:\”QJ\”, \”23884\”:\”QK\”, \”24055\”:\”XH\”, \”24113\”:\”DC\”, \”24162\”:\”ZC\”, \”24191\”:\”GA\”, \”24273\”:\”QJ\”, \”24324\”:\”NL\”, \”24377\”:\”TD\”, \”24378\”:\”QJ\”, \”24439\”:\”PF\”, \”24554\”:\”ZS\”, \”24683\”:\”TD\”, \”24694\”:\”WE\”, \”24733\”:\”LK\”, \”24925\”:\”TN\”, \”25094\”:\”ZG\”, \”25100\”:\”XQ\”, \”25103\”:\”XH\”, \”25153\”:\”PB\”, \”25170\”:\”PB\”, \”25179\”:\”KG\”, \”25203\”:\”PB\”, \”25240\”:\”ZS\”, \”25282\”:\”FB\”, \”25303\”:\”NA\”, \”25324\”:\”KG\”, \”25341\”:\”ZY\”, \”25373\”:\”WZ\”, \”25375\”:\”XJ\”, \”25384\”:\”A\”, \”25457\”:\”A\”, \”25528\”:\”SD\”, \”25530\”:\”SC\”, \”25552\”:\”TD\”, \”25774\”:\”ZC\”, \”25874\”:\”ZC\”, \”26044\”:\”YW\”, \”26080\”:\”WM\”, \”26292\”:\”PB\”, \”26333\”:\”PB\”, \”26355\”:\”ZY\”, \”26366\”:\”CZ\”, \”26397\”:\”ZC\”, \”26399\”:\”QJ\”, \”26415\”:\”ZS\”, \”26451\”:\”SB\”, \”26526\”:\”ZC\”, \”26552\”:\”JG\”, \”26561\”:\”TD\”, \”26588\”:\”JG\”, \”26597\”:\”CZ\”, \”26629\”:\”ZS\”, \”26638\”:\”YL\”, \”26646\”:\”XQ\”, \”26653\”:\”KG\”, \”26657\”:\”XJ\”, \”26727\”:\”HG\”, \”26894\”:\”ZC\”, \”26937\”:\”ZS\”, \”26946\”:\”ZC\”, \”26999\”:\”KJ\”, \”27099\”:\”KJ\”, \”27449\”:\”YQ\”, \”27481\”:\”XS\”, \”27542\”:\”ZS\”, \”27663\”:\”ZS\”, \”27748\”:\”TS\”, \”27784\”:\”SC\”, \”27788\”:\”ZD\”, \”27795\”:\”TD\”, \”27812\”:\”O\”, \”27850\”:\”PB\”, \”27852\”:\”MB\”, \”27895\”:\”SL\”, \”27898\”:\”PL\”, \”27973\”:\”QJ\”, \”27981\”:\”KH\”, \”27986\”:\”HX\”, \”27994\”:\”XJ\”, \”28044\”:\”YC\”, \”28065\”:\”WG\”, \”28177\”:\”SM\”, \”28267\”:\”QJ\”, \”28291\”:\”KH\”, \”28337\”:\”ZQ\”, \”28463\”:\”TL\”, \”28548\”:\”DC\”, \”28601\”:\”TD\”, \”28689\”:\”PB\”, \”28805\”:\”JG\”, \”28820\”:\”QG\”, \”28846\”:\”PB\”, \”28952\”:\”TD\”, \”28975\”:\”ZC\”, \”29100\”:\”A\”, \”29325\”:\”QJ\”, \”29575\”:\”SL\”, \”29602\”:\”FB\”, \”30010\”:\”TD\”, \”30044\”:\”CX\”, \”30058\”:\”PF\”, \”30091\”:\”YSP\”, \”30111\”:\”YN\”, \”30229\”:\”XJ\”, \”30427\”:\”SC\”, \”30465\”:\”SX\”, \”30631\”:\”YQ\”, \”30655\”:\”QJ\”, \”30684\”:\”QJG\”, \”30707\”:\”SD\”, \”30729\”:\”XH\”, \”30796\”:\”LG\”, \”30917\”:\”PB\”, \”31074\”:\”NM\”, \”31085\”:\”JZ\”, \”31109\”:\”SC\”, \”31181\”:\”ZC\”, \”31192\”:\”MLB\”, \”31293\”:\”JQ\”, \”31400\”:\”YX\”, \”31584\”:\”YJ\”, \”31896\”:\”ZN\”, \”31909\”:\”ZY\”, \”31995\”:\”XJ\”, \”32321\”:\”PF\”, \”32327\”:\”ZY\”, \”32418\”:\”HG\”, \”32420\”:\”XQ\”, \”32421\”:\”HG\”, \”32438\”:\”LG\”, \”32473\”:\”GJ\”, \”32488\”:\”TD\”, \”32521\”:\”QJ\”, \”32527\”:\”PB\”, \”32562\”:\”ZSQ\”, \”32564\”:\”JZ\”, \”32735\”:\”ZD\”, \”32793\”:\”PB\”, \”33071\”:\”PF\”, \”33098\”:\”XL\”, \”33100\”:\”YA\”, \”33152\”:\”PB\”, \”33261\”:\”CX\”, \”33324\”:\”BP\”, \”33333\”:\”TD\”, \”33406\”:\”YA\”, \”33426\”:\”WM\”, \”33432\”:\”PB\”, \”33445\”:\”JG\”, \”33486\”:\”ZN\”, \”33493\”:\”TS\”, \”33507\”:\”QJ\”, \”33540\”:\”QJ\”, \”33544\”:\”ZC\”, \”33564\”:\”XQ\”, \”33617\”:\”YT\”, \”33632\”:\”QJ\”, \”33636\”:\”XH\”, \”33637\”:\”YX\”, \”33694\”:\”WG\”, \”33705\”:\”PF\”, \”33728\”:\”YW\”, \”33882\”:\”SR\”, \”34067\”:\”WM\”, \”34074\”:\”YW\”, \”34121\”:\”QJ\”, \”34255\”:\”ZC\”, \”34259\”:\”XL\”, \”34425\”:\”JH\”, \”34430\”:\”XH\”, \”34485\”:\”KH\”, \”34503\”:\”YS\”, \”34532\”:\”HG\”, \”34552\”:\”XS\”, \”34558\”:\”YE\”, \”34593\”:\”ZL\”, \”34660\”:\”YQ\”, \”34892\”:\”XH\”, \”34928\”:\”SC\”, \”34999\”:\”QJ\”, \”35048\”:\”PB\”, \”35059\”:\”SC\”, \”35098\”:\”ZC\”, \”35203\”:\”TQ\”, \”35265\”:\”JX\”, \”35299\”:\”JX\”, \”35782\”:\”SZ\”, \”35828\”:\”YS\”, \”35830\”:\”E\”, \”35843\”:\”TD\”, \”35895\”:\”YG\”, \”35977\”:\”MH\”, \”36158\”:\”JG\”, \”36228\”:\”QJ\”, \”36426\”:\”XQ\”, \”36466\”:\”DC\”, \”36710\”:\”JC\”, \”36711\”:\”ZYG\”, \”36767\”:\”PB\”, \”36866\”:\”SK\”, \”36951\”:\”YW\”, \”37034\”:\”YX\”, \”37063\”:\”XH\”, \”37218\”:\”ZC\”, \”37325\”:\”ZC\”, \”38063\”:\”PB\”, \”38079\”:\”TD\”, \”38085\”:\”QY\”, \”38107\”:\”DC\”, \”38116\”:\”TD\”, \”38123\”:\”YD\”, \”38224\”:\”HG\”, \”38241\”:\”XTC\”, \”38271\”:\”ZC\”, \”38415\”:\”YE\”, \”38426\”:\”KH\”, \”38461\”:\”YD\”, \”38463\”:\”AE\”, \”38466\”:\”PB\”, \”38477\”:\”XJ\”, \”38518\”:\”YT\”, \”38551\”:\”WK\”, \”38585\”:\”ZC\”, \”38704\”:\”XS\”, \”38739\”:\”LJ\”, \”38761\”:\”GJ\”, \”38808\”:\”SQ\”, \”39048\”:\”JG\”, \”39049\”:\”XJ\”, \”39052\”:\”HG\”, \”39076\”:\”CZ\”, \”39271\”:\”XT\”, \”39534\”:\”TD\”, \”39552\”:\”TD\”, \”39584\”:\”PB\”, \”39647\”:\”SB\”, \”39730\”:\”LG\”, \”39748\”:\”TPB\”, \”40109\”:\”ZQ\”, \”40479\”:\”ND\”, \”40516\”:\”HG\”, \”40536\”:\”HG\”, \”40583\”:\”QJ\”, \”40765\”:\”YQ\”, \”40784\”:\”QJ\”, \”40840\”:\”YK\”, \”40863\”:\”QJG\”};

//参数,中文字符串

//返回值:拼音首字母串数组

function makePy() {

var str = document.getElementById(\”text\”).value;

if (typeof (str) != \”string\”) {

throw new Error(-1, \”\\u51fd\\u6570makePy\\u9700\\u8981\\u5b57\\u7b26\\u4e32\\u7c7b\\u578b\\u53c2\\u6570!\”);

}

var arrResult = new Array(); //保存中间结果的数组

for (var i = 0, len = str.length; i < len; i++) {

//获得unicode码

var ch = str.charAt(i);

//检查该unicode码是否在处理范围之内,在则返回该码对映汉字的拼音首字母,不在则调用其它函数处理

arrResult.push(checkCh(ch));

}

//处理arrResult,返回所有可能的拼音首字母串数组

document.getElementById(\”text_value\”).innerHTML = mkRslt(arrResult)

return mkRslt(arrResult);

}

function checkCh(ch) {

var uni = ch.charCodeAt(0);

//如果不在汉字处理范围之内,返回原字符,也可以调用自己的处理函数

if (uni > 40869 || uni < 19968) {

return ch;

} //dealWithOthers(ch);

//检查是否是多音字,是按多音字处理,不是就直接在strChineseFirstPY字符串中找对应的首字母

return (oMultiDiff[uni] ? oMultiDiff[uni] : (strChineseFirstPY.charAt(uni – 19968)));

}

function mkRslt(arr) {

var arrRslt = [\”\”];

for (var i = 0, len = arr.length; i < len; i++) {

var str = arr[i];

var strlen = str.length;

if (strlen == 1) {

for (var k = 0; k < arrRslt.length; k++) {

arrRslt[k] += str;

console.log(str)

}

} else {

var tmpArr = arrRslt.slice(0);

arrRslt = [];

for (k = 0; k < strlen; k++) {

//复制一个相同的arrRslt

var tmp = tmpArr.slice(0);

//把当前字符str[k]添加到每个元素末尾

for (var j = 0; j < tmp.length; j++) {

tmp[j] += str.charAt(k);

}

//把复制并修改后的数组连接到arrRslt上

arrRslt = arrRslt.concat(tmp);

}

return arrRslt;

}

// //两端去空格函数

// String.prototype.trim = function () {

// return this.replace(/(^\\s*)|(\\s*$)/g, \”\”);

// };

</script>

</body>

</html>

原文链接：https://blog.csdn.net/ZXW_Future/article/details/89048811

Fabric.js 中文入门教程

Fabric.js 是一个功能强大且操作简单的 Javascript HTML5 canvas 工具库。

如果你需要用 canvas 做特效，那我推荐你使用 Fabric.js ，因为 Fabric.js 语法更加简单易用，而且还提供了很多交互类的 api。

Fabric.js 简化了很多 Canvas 里的概念，代码看上去也更加语义化。

Fabric.js 能做什么？

可以打开Fabric.js 官网首页直接看例子，也可以看看『Fabric.js Demos』查看更炫酷的例子。

『Fabric.js 官网首页』

如果是 0基础 的读者，希望可以从头读到尾，读完起码大概知道 Fabric.js 有哪些功能。

本文是根据我的学习过程来编写的，只要跟着本文一步一步操作，一定可以入门 Fabric.js 。

本文适合人群：

有原生三件套基础的开发者
最好有 canvas 基础（这是加分项，完全没有也没关系的）

本文主要讲解 Fabric.js 基础，包括：

画布的基本操作
基础图形绘制方法（矩形、圆形、三角形、椭圆、多边形、线段等）
图片和滤镜的使用
文本和文本框
动画
分组和打散分组
基础事件
自由绘画
裁剪
序列化和反序列化
……

除此之外，还会讲一些进阶一点的操作，比如：

自定义操作角样式和状态
自定义控件
复制粘贴图形
使用事件方式操作图形和分组
……

除了上述内容外，我还会根据日后的工作中整理出更多常用和好玩的操作，本文即学习仓库会不定期更新！！！

『Fabric.js npm地址』

『Fabric.js github地址』

‍『本文代码仓库』https://gitee.com/k21vin/fabricjs-demo

本文使用 Fabric.js 的版本是 4.6。
本文的开发环境是使用 Vite 构建的 Vue 3.2 项目。

没有 Vite 和 Vue3.2 基础的同学也不用怕，因为 Vite 真的足够简单。

本文的目的是讲解 Fabric.js ，所以用到 Vue 3.2 的地方其实很少，用到时我也会有详细说明。

如果你不打算使用 Vite 和 Vue 3.2 也没关系，用你喜欢的方式去搭建项目即可。

现在只需跟着以下步骤搭建项目即可。

Vite 官网

Vue3 官网

如果你不想使用 Vite + Vue3 的话，可以跳过本节。

我也建议你直接使用原生 (HTML+CSS+JS) 的方式直接学习 Fabric.js，因为这样上手速度最快。

之后会让你选 vue 或者 vue + ts，我选择了 vue ，你随意。

为什么不选 ts ？因为一人开发的练手项目使用 ts 有点得不偿失。

其实做完上一步就会给出提示（3条命令），跟着敲完就能运行项目了

如果 npm 太慢的话，可以使用 cnpm 。

如果不知道 cnpm 怎么搞，请自行百度。

你可以使用 CDN 的方式引入，因为这样对学习来说是最快捷的。

本文使用该方法！！！

安装完后，package.json 会出现箭头指向的那行代码。

只需 3个操作 就能展示点东西了。

如果是原生项目，使用 <script> 标签引入即可：

本文使用了 Vite 构建的项目，所以可以使用 import 引入

在 HTML 中创建 <canvas>，并设置容器的 id 和宽高，width/height

这里创建了一个 canvas 容器，id=\”c\”。

指定长宽都为 400px ，值得注意的是，这里不需要加 px 这个单位。

style=\”border: 1px solid #ccc;\” 这句其实可以不加，这里只是为了在浏览器看到 canvas 元素到底在哪。

在 JS 中实例化 fabric ，之后就可以使用 fabric 的 api 管理 canvas 了。

详情请看代码中每一行注释。

就算我不写备注也可以看出 Fabric.js 的代码是极具语义化的，看单词就大概能猜出代码效果。

如果是用原生的 canvas 方法来写，没了解过的同学根本看不懂在写啥。

Fabric.js 的画布操作性是非常强的，这里我列举几个常用例子，其他操作可以查看官方文档。

基础版就是“起步”章节所说的那个例子。

创建不可交互的画布，其实只需把 new fabric.Canvas 改成 new fabric.StaticCanvas 即可。

new fabric.Canvas 的第二个参数是用来设置画布基础功能的。更多配置参数可以查看『官方文档』。

setBackgroundImage 这个很好懂，设置背景图片。

需要注意的是，在 Fabric.js 里使用 gif 只会渲染第一帧。

setBackgroundImage 还有第三个参数，嘿嘿嘿没想到吧

第三个参数除了旋转，还可以设置 scaleX、scaleY 之类的操作。

但这个例子存在一个问题，如果图片的尺寸没 canvas 容器大，就填不满，否则就溢出（只显示图片的局部）。

解决方案请看下一个案例。

这个例子使用了 fabric.Image.fromURL 这个 api 来加载图片，第一个参数是图片地址，第二个参数是回调函数。

拿到图片的参数和画布的宽高进行计算，从而使图片充满全屏。

这个例子使用的图片尺寸是比较小的，所以在 setBackgroundColor 的第3个参数中设置了 repeat: \’repeat\’ ，表示重复渲染图片。

值得注意的2点：

使用 canvas.setOverlayImage 代替原本的 canvas.setBackgroundImage 。
所使用的图片最好是带透明层的 png ，这样就能展示案例所示的效果，背景图叠在图案元素上面。

本例所使用的图片地址

Fabric.js 提供了以下几种基础图形：

『矩形』
『圆形』
『椭圆形』
『三角形』
『线段』
『折线』
『多边形』

本节案例在线预览 – 基础图形

本节代码仓库

使用 new fabric.Rect 创建矩形。

画圆角矩形，需要添加 rx 和 ry，这两个属性的值可以不一样，如果知道 css 圆角的原理，其实对 rx 和 ry 不难理解。

自己修改一下这两个值看看效果理解会更深刻。

使用 new fabric.Circle 创建圆形。

圆形需要使用 radius 设置半径大小。

需要使用 new fabric.Ellipse 创建椭圆。

和圆形不同，椭圆不需要设置 radius ，但要设置 rx 和 ry。

当 rx > ry ：椭圆是横着的
当 rx < ry：椭圆是竖着的
当 rx = ry：看上去就是个圆形

使用 new fabric.Triangle 创建三角形，三角形是需要给定 “底和高” 的。

使用 new fabric.Line 创建线段。

new fabric.Line 需要传入2个参数。

第一个参数是数组，数组需要传4个值，前2个值是起始坐标的x和y，后2个值是结束坐标的x和y。
第二个参数是 线段的样式，要设置线段的颜色，需要使用 stroke 。

使用 new fabric.Polyline 创建线段。

new fabric.Polyline 需要传入2个参数。

第一个参数是数组，描述线段的每一个点
第二个参数用来描述线段样式

需要注意的是， fill 设置成透明才会显示成线段，如果不设置，会默认填充黑色，如下图所示：

你也可以填充自己喜欢的颜色，new fabric.Polyline 是不会自动把 起始点 和 结束点 自动闭合起来的。

使用 new fabric.Polygon 绘制多边形，用法和 new fabric.Polyline 差不多，但最大的不同点是 new fabric.Polygon 会自动把 起始点 和 结束点 连接起来。

使用 new fabric.Path 创建路径。

M：可以理解为新的起始点x，y坐标
L：每个折点的x，y坐标
z：自动闭合（自动把结束点和起始点连接起来）

Fabric.js 有3类跟文本相关的 api。

普通文本
可编辑文本
文本框

使用 new fabric.Text 创建文本，传入第一个参数就是文本内容。

new fabric.Text 还支持第二个参数，可以设置文本样式，这方面内容将在下一章讲到，往下滑动页面就能见到。

使用 new fabric.IText 可以创建可编辑文本，用法和 new fabric.Text 一样。

IText 比 Text 多了个大写 “I” 在首字母上。

使用 new fabric.Textbox 可以创建文本框。

new fabric.Textbox 第二个参数是对象，使用 width 可以设定了文本框的宽度，文本内容超过设定的宽度会自动换行。

new fabric.Textbox 的内容同样是可编辑的。

其实样式属性是非常多的，这里只列举常用的属性，其他属性可以自行查阅官方文档。

本例以圆形为例（不要在意配色，我随便输入颜色演示一下）

上面这个例子的样式分为正常状态和被选中状态，详情请看代码注释。

除此之外，还可以配置 上划线 、下划线 、删除线 、左对齐 、 右对齐 、 居中对齐 、行距等。

上面的上划线、下划线、删除线的配置，可以同时使用。

渐变分别有：线性渐变和径向渐变

r1、r2、x1、y1、x2、y2 这几个参数可以自己修改值然后看看效果，自己亲手改一下会理解得更深刻。

需要使用 onload 方法监听图片是否加载完成。

只有在图片完全加载后再添加到画布上才能展示出来。

使用该方法，如果不想在画布外展示图片，需要使用 display: none; 把图片隐藏起来。

使用 fabric.Image.fromURL 加载图片。

第一个参数是图片资源，可以放入本地图片，也可以放网络图片；

第二个参数是回调函数，图片加载完就可以对图片对象进行操作。

给图片添加滤镜，fabric.Image.fromURL 的回调函数里返回一个图片对象，图片对象可以使用 filters 添加滤镜。

fabric 内置滤镜

BaseFilter 基本过滤器
Blur 模糊
Brightness 亮度
ColorMatrix 颜色矩阵
Contrast 对比
Convolute 卷积
Gamma 伽玛
Grayscale 灰度
HueRotation 色调旋转
Invert 倒置
Noise 噪音
Pixelate 像素化
RemoveColor 移除颜色
Resize 调整大小
Saturation 饱和
Sepia 色偏

可以直接设置元素的 top 和 left 进行平移。

可参照前面的例子。

new fabric.Group 可以创建一个组（其实有点像 Photoshop 里面的组，把多个图层放在同一个组内，实现同步的操作，比如拖拽、缩放等）。

Fabric.js 的组提供了很多方法，这里列一些常用的：

getObjects() 返回一组中所有对象的数组
size() 所有对象的数量
contains() 检查特定对象是否在 group 中
item() 组中元素
forEachObject() 遍历组中对象
add() 添加元素对象
remove() 删除元素对象
fabric.util.object.clone() 克隆

我拿其中一个举例：item()

在上一个例子的基础上，把椭圆改成红色，把 “Hello World” 改成 “雷猴，世界”。

使用 canvas.getActiveObject() 可以获取画布当前选中的对象，然后再通过 toActiveSelection() 将组打散。

先别管什么绝对值动画和相对值动画，等学完这节再往下看就知道了。

本节是动画的基础用法。

每个 Fabric 对象都有一个 animate 方法，该方法可以动画化该对象。

用法：animate(动画属性, 动画的结束值, [画的详细信息])

第一个参数是要设置动画的属性。

第二个参数是动画的结束值。

第三个参数是一个对象，包括:

这个例子用了 fabric.util.ease.easeOutBounce 缓冲效果。

其实绝对值动画和相对值动画的用法是差不多的，只是 第二个参数 用法不同。

相对值动画是把 animate 改成带上运算符的值，这样就会在原基础上做计算。

Fabric.js 提供了一套很方便的事件系统，我们可以用 on 方法可以初始化事件监听器，用 off 方法将其删除。

Fabric.js 还提供了很多事件，详情可以查看官方案例

在使用 new fabric.Canvas 创建画布时，设置 isDrawingMode: true 就可以开始自由绘画模式。

canvas.freeDrawingBrush 里有一堆属性可以设置画笔样式。

使用 lockMovementX 禁止对象水平移动。

使用 lockMovementY 禁止对象垂直移动。

使用 lockRotation 禁止对象旋转。

使用 lockScalingX 禁止对象水平缩放。

使用 lockScalingY 禁止对象垂直缩放。

要缩放画布，其实是在监听鼠标事件。

这里监听的是鼠标的滚轮事件：mouse:wheel。

本例的需求是，按下 alt键后才能触发移动画布的功能。

根据这个需求，可以把任务拆解成3步：

鼠标点击（刚按下那刻）
鼠标移动
鼠标松开

鼠标点击 mouse:down

该步骤使用 mouse:down 可以监听到。
在回调函数里监听是否按下 alt键。
如果按下 alt键，设置一个值记录开启移动状态。
记录鼠标当前所在的 x 和 y 轴坐标。

鼠标移动 mouse:move

判断是否需要移动（鼠标点击的第三步）。
如需移动，立刻转换画布视图模式
将画布移动到鼠标x和y轴坐标。

鼠标松开 mouse:up

把画布定格在鼠标松开的坐标。
关闭移动状态（鼠标点击的第三步）

Fabric.js 创建出来的元素（图形、图片、组等）默认是可以被选中的。

是否可以选中。

选空白位置可以选中吗？

选中后的样式。

蓝色三角形要鼠标完全放入才能选中

没有控制角将意味着无法用鼠标直接操作缩放和旋转，只允许移动操作。

本例设置了当鼠标在元素上出现 ”等待指针“ 。

不允许从画布框选，但允许选中元素。

所谓的序列化其实就是将画布的内容转成 JSON，方便保存。

但 Fabric.js 除了能将画布转成字符串，还可以输出 base64 和 svg。

打开控制台可以看到输出。

本例分别使用了 JSON.stringify() 、canvas.toJSON() 和 canvas.toObject() 进行序列化一个空画布。

Fabric.js 提供了 toJSON 和 toObject 两个方法，把画布及内容转换成 JSON 。

因为本例输出的是一个空画布，所以在输出内容里的 objects 字段是一个空数组。

如果有背景、有图形之类的元素存在，objects 对象里就会出现相应的数据。

详情可查看本节案例在线预览 – 序列化

使用 canvas.toDataURL(\’png\’) 可以输出 png 图片。但这个操作可能会打断 canvas 的渲染，所以之后要再执行以下 canvas.requestRenderAll() 。

输出以下内容，可以把这段复制到浏览器地址打开看看

输出 SVG 很简单，直接调用 canvas.toSVG() 即可。

输出：

本节案例在线预览 – 反序列化

本节代码仓库

反序列化就是把 JSON 数据渲染到画布上。

通常把从后台请求回来的数据渲染到画布上。

使用 canvas.loadFromJSON() 可以进行反序列化，里面传入一个 JSON格式的字符串即可。

本例的 str 保存了一个 Fabric.js 导出的数据。

点赞 + 收藏 + 关注 = 学会了

将 Three 带到 Vue 生态系统，TresJs 中文文档上线

ThreeJS 在创建 WebGL 3D 网站方面是一个奇妙的库，同时他也是一个保持不断更新的库，一些对其封装的维护者，如 TroisJS，往往很难跟上其所有的更新。

React 生态系统中有一个令人印象深刻的使用自定义渲染器的解决方案叫 React-three-fiber，它能让你使用一些可重用，独立的对状态做出反应的组件进行声明式的构建你的场景。

在 VueJS 生态系统中寻找类似的东西时，发现了这个名为 Lunchbox 的神奇库，它的工作原理与 React-three-fiber 相同，提供了一个自定义的 Vue3 渲染器。同时唯一的问题是，混合编译不同的渲染器是 Vue 社区仍在努力解决的问题 —— 更多信息参阅此处。

因此，受到这两个库的启发，Alvaro Saburido 为 ThreeJS 创建了一个 Vue 自定义渲染器，这就是 TresJS。

近日，TresJS 作者宣布 TresJs 文档中文翻译已上线，可以帮助更多中文环境的开发者们更好的了解和学习 TresJS 以及 ThreeJS，在 Vue 生态系统中创建炫酷的 WebGL 3D 网站。

中文文档地址：https://docs.tresjs.org/zh

TresJS 是用 Typescript 编写的，是完全类型化的。如果您使用的是 Typescript，您就能充分享受类型的好处，只需要保证你安装了 three 的类型定义。

你可以像其他的 Vue 插件一样安装 TresJS

或者你可以直接在你的组件中使用

出于性能和捆绑包大小的考虑，建议采用这种方法，Tree Shaking 的效果会更好，而且您只需导入您使用的组件。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG

全部

行业动态

C4D教程

C4D百科

js中文网【JS中文网】收藏 0

2025-02-03 07:20 作者：中望小编来源：互联网点击：0

javascript实现获取中文汉字拼音首字母

Fabric.js 中文入门教程

将 Three 带到 Vue 生态系统，TresJs 中文文档上线

继续阅读本文相关话题

C4D百科

3Dmax和C4D有什么区别？

上一篇

C4D百科

js中有什么网页动态效果 js实现动态页面

下一篇

中望小编

C4D百科

jsp项目源码—jsp项目源代码

中望小编

C4D百科

js下载文件(js下载文件流保存到指定目录)

中望小编

C4D百科

js下载文件到本地(js下载文件到本地文件夹)

中望小编

C4D百科

js下雪特效;js下雪特效代码

中望小编

C4D百科

js中array对象的常用方法(js array对象)

js中文网【JS中文网】 收藏 0

2025-02-03 07:20 作者： 中望小编 来源：互联网 点击：0

javascript实现获取中文汉字拼音首字母

Fabric.js 中文入门教程

将 Three 带到 Vue 生态系统，TresJs 中文文档上线

继续阅读本文相关话题

C4D百科

3Dmax和C4D有什么区别？

上一篇

C4D百科

js中有什么网页动态效果 js实现动态页面

下一篇

中望小编

中望小编

中望小编

中望小编

中望小编

js中文网【JS中文网】收藏 0

2025-02-03 07:20 作者：中望小编来源：互联网点击：0