棰樼洰锛氬綋鎴戜滑鎯冲湪canvas涓婄粯鍒朵竴涓熀鏈殑绠€鍗曞浘褰㈡椂锛屼娇鐢–anvas涓嶄細瑙夊緱绻佺悙銆備絾鏄綋闇€瑕佸湪鐢诲竷涓婅繘琛屼换浣曠被鍨嬬殑浜や簰鏃讹紝鍦ㄦ煇浜涙儏鍐典笅缁樺埗澶嶆潅鐨勫浘褰㈠拰鏇存敼鍥惧儚鏃讹紝浣跨敤鍘熺敓鐢诲竷API灏变細鍙樺緱鍥伴毦銆傝€孎abric鏃ㄥ湪瑙ｅ喅杩欎釜闂銆侳abric.js鏄竴涓己澶ц€岀畝鍗曠殑JavascriptHTML5canvas搴揊abric鍦╟anvas鍏冪礌涔嬩笂鎻愪緵浜嗕竴涓氦浜掑紡瀵硅薄妯″瀷Fabric涔熸湁涓€涓猄VG-to-canvas锛堝拰canvas-to-SVG锛夎В鏋愬櫒涓轰簡鏂逛究璧疯锛屾垜灏嗗湪涓嬮潰閫氳繃vue椤圭洰浼氳瑙ｅ浣曚娇鐢‵abric1.瀹夎yarnaddfabric-S#ornpmifabric-S涔熷彲浠ヤ粠瀹樼綉涓嬭浇鏈€鏂扮殑js鏂囦欢锛岄€氳繃script鏍囩瀵煎叆2.浣跨敤2.1缁樺埗绠€鍗曞浘褰abric鎻愪緵浜?绉嶅熀鏈舰鐘讹細fabric.Circle锛堝渾锛塮abric.Ellipse锛堟き鍦嗭級fabric.Line锛堢嚎锛夌粐鐗┿€侾olyline(澶氭潯绾跨粯鍒舵垚鍥惧舰)fabric.triangle(涓夎褰?fabric.Rect(鐭╁舰)fabric.Polygon(澶氳竟褰?鐭╁舰//js//寮曞叆fabricimport{fabric}from"fabric";//鍒涘缓fabric瀹炰緥璁ヽanvas=newfabric.Canvas("鐢诲竷");//鍙互閫氳繃榧犳爣鏂规硶缂╁皬鍜屾棆杞?/or//letcanvas=newfabric.StaticCanvas("canvas");//娌℃湁榧犳爣浜や簰鐨刦abric瀵硅薄//鍒涘缓涓€涓煩褰㈠璞etrect=newfabric.Rect({left:200,//璺濆乏杈圭殑璺濈top:200,//璺濋《閮ㄧ殑璺濈fill:"green",//濉厖棰滆壊width:200,//鐭╁舰瀹藉害height:200,//鐭╁舰楂樺害});//鍦ㄧ敾甯冧笂娣诲姞涓€涓煩褰anvas.add(rect);鍙互鐪嬪埌鐣岄潰涓婂～鍏呬簡涓€涓豢鑹茬殑鐭╁舰锛屽彲浠ラ€氳繃瀵硅薄Form閰嶇疆鍏冪礌鏍峰紡杩涜榧犳爣缂╂斁鍜屾棆杞紝闈炲父鏂逛究锛丆ircleandtriangle//鍒涘缓涓€涓渾褰㈠璞etcircle=newfabric.Circle({left:0,//璺濆乏杈圭殑璺濈top:0,//璺濋《閮ㄧ殑璺濈fill:"red",//濉厖棰滆壊radius:50,//鍦嗙殑鍗婂緞});//鍒涘缓涓€涓笁瑙掑舰Objectlettriangle=newfabric.Triangle({left:200,//绂诲乏涓婅竟鐨勮窛绂?0,//绂讳笂杈圭殑璺濈fill:"blue",//濉厖棰滆壊width:100,//widthheight:100,//height});//娣诲姞鍥惧舰鍒扮敾甯僣anvas.add(circle,triangle);鎴戜滑鍙互閫氳繃璁剧疆浠ヤ笅灞炴€ф潵鍐冲畾鏄惁涓庣浉鍏冲厓绱犺繘琛屼氦浜抍anvas.selection=false;//绂佹鎵€鏈夐€変腑rect.set("selectable",false);//灏辨槸绂佹杩欎釜鐭╁舰琚€変腑2.2閫氳繃url鍜宨mg鏍囩缁樺埗鍥剧墖涓昏鏈変袱绉嶆柟寮?/閫氳繃url缁樺埗鍥剧墖fabric.Image.fromURL(//鏈湴鍥剧墖闇€瑕侀€氳繃require,require("./xxx.jpeg")"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.thaihot.com.cn%2Fuploadimg%2Fico%2F2021%2F0711%2F1625982535739193.jpg&refer=http%3A%2F%2Fimg.thaihot.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630940858&t=e1d24ff0a7eaeea2ff89cedf656a9374",(img)=>{img.scale(0.5);canvas.add(img);});//涔熷彲浠ラ€氳繃鏍囩缁樺埗letimg=document.getElementById("img");letimage=newfabric.Image(img,{left:100,top:100,opacity:0.8,});canvas.add(鍥剧墖);2.3閫氳繃鑷畾涔夎矾寰勭粯鍒跺湪杩欎箣鍓嶏紝鎴戜滑闇€瑕佷簡瑙ｅ嚑涓弬鏁扮殑鍚箟M锛?move"绉诲姩鍒版煇涓偣L锛?line"鐢讳竴鏉＄嚎x,yC锛?curve"鏇茬嚎A锛?arc"鍦嗗姬z锛氶棴鍚堣矾寰勶紙绫讳技浜庡湪PS涓垱寤洪€夊尯锛塴etcustomPath=newfabric.Path("M00L300100L170100z");customPath.set({left:100,top:100,fill:"green",});canvas.add(customPath);letcustomPath=newfabric.Path("M00L300100L170100L70300L20200C136.19,2.98,128.98,0,121.32,0z");鍙互鐪嬪嚭锛岄€氳繃璺緞缁樺埗锛屾垜浠彲浠ュ埗浣滃嚭闈炲父澶嶆潅鐨勫浘褰紙浣嗘槸涓€鑸敤涓嶅埌锛屾垜浠竴鑸敤瀹冩潵瑙ｆ瀽SVG锛岃幏鍙栬矾寰勮繕鍘熷浘褰級2.4鍔ㄧ敾鐨勭涓€涓弬鏁版槸灞炴€nimation锛岀浜屼釜鍙傛暟鏄姩鐢荤殑缁撴潫浣嶇疆锛岀涓変釜鍙傛暟鏄竴涓彲閫夊璞★紝鎸囧畾鍔ㄧ敾鐨勮缁嗕俊鎭細duration锛宑allback锛宎nimation绛夈€傜涓変釜鍙傛暟涓昏鍖呮嫭duration锛岄粯璁や负500ms銆傚彲鐢ㄤ簬鏇存敼鍔ㄧ敾鐨勬寔缁椂闂淬€俧rom鍏佽鎸囧畾鍔ㄧ敾灞炴€х殑璧峰鍊硷紙濡傛灉鎴戜滑涓嶆兂浣跨敤褰撳墠鍊硷級銆俹nComplete鍔ㄧ敾缁撴潫鍚庣殑鍥炶皟銆傜紦鍔ㄥ姩鐢诲姛鑳姐€?.4.1缁濆鍔ㄧ敾letcanvas=newfabric.Canvas("canvas");letrect=newfabric.Rect({left:400,//璺濈宸﹁竟top:200,//璺濈椤堕儴fill:"green",//濉厖棰滆壊width:200,//widthheight:200,//height});rect.animate("left",100,{onChange:canvas.renderAll.bind(canvas),duration:1000,});canvas.add(rect);2.4.2鐩稿鍔ㄧ敾锛堢浜屼釜鍙傛暟鍐冲畾鏈€缁堟晥鏋滃姩鐢婚€氳繃+=,-=绛?rect.animate("left","+=100",{onChange:canvas.renderAll.bind(canvas),duration:1000,});rect.set({angle:45});rect.animate("angle","-=90",{onChange:canvas.renderAll.bind(canvas),duration:2000,});2.4.3瀹氫箟鍔ㄧ敾鐨勮繍鍔ㄥ嚱鏁伴粯璁ゆ儏鍐典笅锛屽姩鐢讳娇鐢ㄢ€渆aseInSine鈥濊繍鍔ㄦ墽琛屻€傚鏋滆繖涓嶆槸浣犻渶瑕佺殑锛宖abric涓烘垜浠彁渚涗簡寰堝鍐呯疆鐨勫姩鐢绘晥鏋滐紝fabric.util.ease涓嬫湁寰堝鍔ㄧ敾閫夐」銆傚父鐢ㄧ殑鏈塭aseOutBounce銆乪aseInCubic銆乪aseOutCubic銆乪aseInElastic銆乪aseOutElastic銆乪aseInBounce鍜宔aseOutExpo绛夈€俽ect.animate("left",100,{onChange:canvas.renderAll.bind(canvas),duration:1000,easing:fabric.util.ease.easeOutBounce,});2.5ImageFilter鐩墠Fabric涓烘垜浠彁渚涗簡浠ヤ笅鍐呯疆婊ら暅BaseFilterBasicFilterBlurBlurBrightnessColorMatrixColorMatrixContrastConvoluteConvoluteGammaGrayscaleHueRotationHueRotationInvertInversionNoisePixelatePixelateRemoveColorRemoveColorResizeResizeSaturationSaturation2.5.1鍗曟护闀渇abric.Image.fromURL(require("./aaa.jpeg"),(img)=>{img.scale(0.5);canvas.add(img);});fabric.Image.fromURL(require("./aaa.jpeg"),(img)=>{img.scale(0.5);//娣诲姞杩囨护鍣╥mg.filters.push(newfabric.Image.filters.Grayscale());//鍥剧墖鍔犺浇瀹屾垚鍚庯紝搴旂敤婊ら暅鏁堟灉img.applyFilters();img.set({left:300,top:250,});canvas.add(img);});2.5.2Overlayfilter鐨勨€渇ilters鈥濆睘鎬ф槸涓€涓暟缁勶紝鎴戜滑鍙互鐢ㄦ暟缁勭殑鏂规硶杩涜浠讳綍鎯宠鐨勬搷浣滐細鍒犻櫎杩囨护鍣紙pop銆乻plice銆乻hift锛夈€佹坊鍔犺繃婊ゅ櫒锛坧ush銆乽nshift銆乻plice锛夛紝鐢氳嚦缁勫悎澶氫釜杩囨护鍣ㄣ€傚綋鎴戜滑璋冪敤applyFilters鏃讹紝鈥渇ilters鈥濇暟缁勪腑瀛樺湪鐨勪换浣曟护闀滈兘灏嗕竴涓帴涓€涓湴搴旂敤锛屾墍浠ヨ鎴戜滑灏濊瘯鍒涘缓涓€涓棦鏈夊亸鑹插張鏈変寒搴︾殑鍥惧儚銆俧abric.Image.fromURL(require("./aaa.jpeg"),(img)=>{img.scale(0.5);//娣诲姞杩囨护鍣╥mg.filters.push(newfabric.Image.filters.Grayscale(),newfabric.Image.filters.Sepia(),//棰滆壊鍋忕Щnewfabric.Image.filters.Brightness({brightness:0.2})//浜害);//鍥剧墖鍔犺浇瀹屾垚鍚庯紝搴旂敤婊ら暅鏁堟灉img.applyFilters();img.set({left:300,top:250,});canvas.add(img);});鍙互鐪嬪埌澶氫釜婊ら暅鐨勬晥鏋滄槸鍙犲姞鏄剧ず鐨勩€傚綋鐒讹紝Fabric涔熸敮鎸佽嚜瀹氫箟婊ら暅Mirror锛岃繖绡囨枃绔犵偣璧?00鍚庯紝鎴戜細鏇存柊fabric杩涢樁绡囷紝璋㈣阿澶у鏀寔~2.6棰滆壊鏃犺浣犱娇鐢?6杩涘埗銆丷GB杩樻槸RGBA棰滆壊锛孎abric閮借兘澶勭悊寰楀緢濂?.6.1瀹氫箟棰滆壊newfabric.Color("#f55");newfabric.Color("#aa3123");newfabric.Color("356333");newfabric.Color("rgb(100,50,100)");newfabric.Color("rgba(100,200,30,0.5)");2.6.2棰滆壊杞崲newfabric.Color('#f55').toRgb();//"rgb(255,85,85)"newfabric.Color('rgb(100,100,100)').toHex();//"646464"newfabric.Color('fff').toHex();//"FFFFFF"鎴戜滑涔熷彲浠ョ敤鍙︿竴绉嶉鑹插彔鍔狅紝鎴栬€呰浆鎹㈡垚鐏板害鐗堟湰銆傝redish=newfabric.Color("#f55");璁ゞreenish=newfabric.Color("#5f5");redish.overlayWith(greenish).toHex();//"AAAA55"redish.toGrayscale().toHex();//"A1A1A1"2.7GradientFabric閫氳繃setGradient鏂规硶鏀寔娓愬彉锛屽畾涔夊湪鎵€鏈夊璞′笂銆傝皟鐢╯etGradient('fill',{...})灏卞儚璁剧疆瀵硅薄鐨勨€滃～鍏呪€濆€笺€俵etcircle=newfabric.Circle({left:100,top:100,radius:50});circle.setGradient("fill",{//娓愬彉寮€濮嬬殑浣嶇疆x1:0,y1:0,//娓愬彉缁撴潫鐨勪綅缃畑2:circle.width,y2:0,//娓愬彉鐨勯鑹瞔olorStops:{//娓愬彉鐨勮寖鍥?0,0.1,0.3,0.5,0.75,1)鍙互鏄?-1:"red",0.2:"orange",0.4:"yellow",0.6:"green",0.8:"钃濊壊",1:"绱壊"},});2.8鏂囨湰fabric.Text瀵硅薄鎻愪緵浜嗘瘮canvas鏇翠赴瀵岀殑鏂囨湰鐗规€э紝鍖呮嫭锛氭敮鎸佸琛孧ultilinesupport涓嶅垢鐨勬槸锛屽師鐢熸枃鏈柟娉曞拷鐣ヤ簡鎹㈣銆傛枃鏈榻愭枃鏈乏瀵归綈銆佸眳涓€佸彸瀵归綈銆傚湪澶勭悊澶氳鏂囨湰鏃跺緢鏈夌敤銆傛枃瀛楄儗鏅枃瀛楄儗鏅篃鏀寔鏂囧瓧瀵归綈銆傛枃鏈慨楗版枃鏈慨楗颁笅鍒掔嚎銆佷笂鍒掔嚎銆佽疮绌跨嚎銆傝楂樿楂樺湪澶勭悊澶氳鏂囨湰鏃跺緢鏈夌敤銆傚瓧绗﹂棿璺濅娇鏂囨湰鏇寸揣鍑戞垨闂磋窛鏇村ぇ銆傚瓙鑼冨洿瀛愯寖鍥村皢棰滆壊鍜屽睘鎬у簲鐢ㄤ簬鏂囨湰瀵硅薄鐨勫瓙瀵硅薄銆侻ultibyteMultibyte鏀寔琛ㄦ儏绗﹀彿銆備氦浜掑紡鐢诲竷缂栬緫鍦ㄧ敾甯冧笂缂栬緫鍙互鐩存帴鍦ㄧ敾甯冧笂閿叆鏂囨湰銆俵ettext=newfabric.Text("澶у濂絶杩欓噷鏄崈閾烘枊\n鎴戞槸鑽ｉ紟~\n涓€涓細鎴愪负寮€鍙戜箣鐜嬬殑鐢蜂汉锛?,{left:0,top:200,fontFamily:"ComicSans",//FontfontSize:50,//瀛椾綋澶у皬fontWeight:800,//瀛椾綋绮楃粏锛屽彲浠ヤ娇鐢ㄥ叧閿瓧锛?normal","bold"锛夋垨鑰呮暟瀛楋紙100,200,400,600,800锛塻hadow:"green3px3px2px",//鏂囧瓧闃村奖,color,horizo鈥嬧€媙taloffset,verticaloffsetandblursize.underline:true,//underlinelinethrough:true,//strikethroughoverline:true,//overlinefontStyle:"italic",//瀛椾綋鏍峰紡锛宯ormal锛堟甯革級鎴栨枩浣擄紙鏂滀綋锛塻troke:"#c3bfbf",//鎻忚竟棰滆壊strokeWidth:1,//鎻忚竟瀹藉害textAlign:"center",//鏂囨湰瀵归綈lineHeight:1.5,//琛岄珮textBackgroundColor:"#91A8D0",//鏂囨湰鑳屾櫙棰滆壊}锛?canvas.add(鏂囨湰);2.9浜嬩欢鍦╢abric涓紝on鏂规硶鐢ㄤ簬鍒濆鍖栦簨浠讹紝off鏂规硶鐢ㄤ簬鍒犻櫎浜嬩欢銆傚父鐢ㄧ殑浜嬩欢鏈変互涓嬪嚑绉?mouse:down"榧犳爣琚寜涓?object:add"瀵硅薄琚坊鍔?after:render"娓叉煋瀹屾垚杩樻湁寰堝锛氶紶鏍囦簨浠讹細"mouse:down","mouse:move鈥濆拰鈥渕ouse:up...鈥濋€夋嫨鐩稿叧浜嬩欢锛氣€渂efore:selection:cleared鈥濄€佲€渟election:created鈥濓紝璇﹁瀹樻柟鏂囨。canvas.on("mouse:down",function(options){canvas.clear();lettext=newfabric.Text("Youclickme~",{left:200,top:200,});canvas.add(text);console.log(options.e.clientX,options.e.clientY);});canvas.on("mouse:up",function(options){this.text="Youdidn'tclickme0.0";canvas.clear();lettext=newfabric.Text("浣犳病鏈夌偣鍑绘垜0.0",{left:200,top:200,});canvas.add(text);console.log(options.e.clientX,options.e.clientY);});Fabric鍏佽妫€娴婰istener鏄惁鐩存帴闄勫姞鍒扮敾甯冧腑鐨勫璞°€俵etrect=newfabric.Rect({width:100,height:50,fill:"green"});rect.on("selected",function(){console.log("鍝︼紝浣犻€夋嫨浜嗘垜");});letcircle=newfabric.Circle({radius:75,fill:"blue"});circle.on("selected",function(){console.log("鍝堝搱鍝垀浣犻€夋嫨浜嗘垜");});3.0寰掓墜鐢籉abric鐢诲竷鐨刬sDrawingMode灞炴€ц缃负true锛屽疄鐜板緬鎵嬬敾妯″紡銆傝繖鏍凤紝鐢诲竷涓婄殑鐐瑰嚮鍜岀Щ鍔ㄤ細绔嬪嵆琚В閲婁负閾呯瑪鎴栫敾绗斻€傝canvas=newfabric.Canvas("canvas");canvas.isDrawingMode=true;canvas.freeDrawingBrush.color="blue";canvas.freeDrawingBrush.width=5;缁堜簬鏈夊垢鍐欎笅杩欑瘒鏂囩珷锛屾槸鎴戠敤鏉ユ€荤粨fabric鐨勭煡璇嗙偣骞朵笖寰堢敤蹇冪殑涓€绡囨枃绔狅紝甯屾湜杩欑瘒鏂囩珷瀵逛綘鏈夋墍甯姪銆傜洰鍓峟abric鍦ㄥ浗鍐呰繕涓嶆槸寰堟祦琛岋紝浣嗘槸鍦╣ithub涓婂凡缁忔湁19.2kstars锛屽彲浠ョ畻鏄痵tar椤圭洰浜嗐€傛垜浠棩甯稿紑鍙戜腑缁忓父浣跨敤canvas锛屼絾鏄畠鐨刟pi澶勭悊澶嶆潅鐨勪笟鍔″緢绱€昏緫锛屾墍浠ュ垎浜繖绡囨枃绔狅紝甯屾湜瀵瑰ぇ瀹舵湁鎵€甯姪锛岀偣璧炶秴杩?00锛屾垜浼氭洿鏂癴abric.js杩涢樁绔犺妭锛岃阿璋㈡敮鎸侊紒寰堝紑蹇冭兘鍜屽ぇ瀹朵竴璧峰彉寮猴紒鍏虫敞鎴戠殑鍏紬鍙凤紝鏇剧粡鐨勮挷瀵ㄣ€傛垜鏄涓侊紝鍜屾垜涓€璧峰湪閿附鍜屽瓧绗︿笂璺宠穬锛屽湪浠ｇ爜鍜岀▼搴忎箣闂寸┛姊€傪煠?/p>
