鏈枃浠嬬粛鐐硅禐+鍏虫敞+涔︾=浜嗚В鍒癴abric.js鍦ㄥ嚭鍘傜殑鏃跺€欐彁渚涗簡鍑犵鍩烘湰鐨勫浘褰紝姣斿鐭╁舰锛屽渾褰紝涓夎褰㈢瓑銆備絾鏄繖浜涘浘褰㈠彲鑳借繕涓嶅鐢ㄥ浜庢棩甯稿紑鍙戯紝鎴戜滑鍙兘杩橀渶瑕佷竴浜涜嚜瀹氫箟鍥惧舰銆傛垜鍋氫簡涓€涓嚜瀹氫箟鍗婂渾鐨勬紨绀烘潵璋堣皥濡備綍鍒涘缓鑷畾涔夊浘褰€傝櫧鐒秄abric.js鎻愪緵浜嗕竴绉嶉潪甯哥畝鍗曠殑鍒涘缓鑷畾涔夊瓙绫荤殑鏂瑰紡锛屼絾鏄鏋滈渶瑕佸垱寤哄鏉傜殑鍥惧舰锛岃繕鏄渶瑕佹湁涓€瀹氱殑canvas鍩虹銆傚鏋滃鍘熺敓canvas涓嶇啛鎮夛紝鎺ㄨ崘闃呰銆奀anvas 浠庡叆闂ㄥ埌鍔濇湅鍙嬫斁寮冿紙鍥捐В鐗堬級銆嬫湰鏂囨墍鏈夋渚嬮粯璁ゅ鍏abric.js锛屾墍浠ユ瘡娈典唬鐮佷笉鍐嶉噸澶嶄粙缁嶃€備粈涔堟槸fabric.js瀛愮被锛焒abric.jsclass鐨勬蹇靛叾瀹炲拰nativejsclass鐨勬蹇靛樊涓嶅銆傚湪fabric.js涓紝鍙互鍒涘缓绫伙紝涔熷彲浠ョ户鎵跨被銆傛瘮濡傚畼鏂圭殑渚嬪瓙涓紝閫氳繃缁ф壙鐭╁舰鍒涘缓浜嗕竴涓甫鏂囧瓧鐨勭被銆傚畠鍏锋湁鐭╁舰鍏冪礌鐨勬墍鏈夊睘鎬у拰鏂规硶锛岃繕澧炲姞浜唋abel灞炴€э紝鍙互缁欑煩褰㈡坊鍔犳枃鏈爣绛俱€俧abric.js濡備綍鍒涘缓绫伙紵鏂囨。锛歠abric.util.createClass瑕佸湪fabric.js涓垱寤轰竴涓被锛屾偍鍙互浣跨敤fabric.util.createClass()鏂规硶銆傝繖閲屾垜浠€熺敤瀹樻柟鐨刣emo鏉ヨ繘琛岃鏄庛€傝Point=fabric.util.createClass({initialize:function(x,y){this.x=x||0this.y=y||0},toString:function(){return`${this.x}/${this.y}`}})fabric.util.createClass鎺ュ彈涓€涓璞″弬鏁板苟鏍规嵁璇ュ璞＄殑閰嶇疆鍒涘缓涓€涓€滅被鈥濄€傞渶瑕佹敞鎰忕殑鏄痠nitialize灞炴€э紝initialize鐨勫€兼槸涓€涓垵濮嬪寲鐨勬柟娉曘€傛湁鐐圭被浼间簬鍘熺敓js涓被鐨勬瀯閫犲嚱鏁般€傝娉ㄦ剰锛屽畠鏄浉浼肩殑銆傚湪initialize涓帴鏀跺疄渚嬪寲鏃朵紶鍏ョ殑鍙傛暟銆俵etpoint=newPoint(10,20)console.log(point.x)//10console.log(point.y)//20console.log(point.toString())//鈥?0/20鈥濆瓙绫荤户鎵縒hen鍒涘缓涓€涓被锛屽彧闇€瑕佸湪fabric.util.createClass涓紶鍏ヤ竴涓璞″嵆鍙€傚鏋滃湪鍒涘缓瀛愮被鏃堕渶瑕佺户鎵跨埗绫伙紝鍒欓渶瑕佸湪fabric.util.createClass涓紶鍏?涓弬鏁般€俧abric.util.createClass(parentopt,propertiesopt)parentopt锛氱埗绫籶ropertiesopt鍒涘缓瀛愮被鐨勫璞★紙鍚屼笂涓€涓被鐨勫璞★級杩樻槸瀹樻柟渚嬪瓙銆傚湪鍓嶉潰鐨勭被鍒涘缓涓紝鎴戜滑鍒涘缓浜嗕竴涓狿oint绫伙紝瀹冨彧鎺ュ彈x鍜寉灞炴€э紱閲岄潰杩樻湁涓€涓猼oString()鏂规硶銆傚鏋滄垜浠鍩轰簬Point绫诲垱寤轰竴涓狢oloredPoint绫伙紙鍗矯oloredPoint缁ф壙Point锛夛紝鎴戜滑鍙互杩欐牱鍐欍€俵etColoredPoint=fabric.util.createClass(//鍙傛暟1锛氱埗绫籔oint,//鍙傛暟2锛氬瓙绫粄initialize:function(x,y,color){this.callSuper('initialize',x,y)//this.colorpassedtotheparentclass=color||'#000'//鏂板棰滆壊灞炴€})姝ゆ椂ColoredPoint缁ф壙浜哖oint锛屽湪Point鐨勫熀纭€涓婂鍔犱簡color灞炴€с€俵etredPoint=newColoredPoint(15,33,'#f55')console.log(redPoint.x)//15console.log(redPoint.y)//33console.log(redPoint.color)//"#f55"鎺у埗鍙?log(redPoint.toString())//"15/33"Point涓湁涓€涓猼oString()鏂规硶锛宺edPoint.toString()浼氬厛鎼滅储ColoredPoint锛屽鏋滄病鏈夋壘鍒板啀鎼滅储Point銆備竴灞備竴灞傚線涓婄湅銆傚鏋滃湪ColoredPoint涓畾涔変簡toString()鏂规硶锛屽畠灏嗚鐩栧湪Point涓畾涔夌殑鏂规硶銆?/鐪佺暐涓€浜涗唬鐮?/鐖剁被letPoint=newfabric.util.createClass({initialize(x,y){...},toString(){returnthis.x+'/'+this.y}})//瀛愮被letColoredPoint=fabric.util.createClass(//鍙傛暟1:鐖剁被Point,//鍙傛暟2:瀛愮被{initialize(x,y,color){...},toString(){return'Thundermonkey'}})//瀹炰緥鍖杔etredPoint=newColoredPoint(15,33,'#f55')console.log(redPoint.toString())//"Thundermonkey"濡傛灉鎯冲湪瀛愮被涓户鎵跨埗绫荤殑鏂规硶鍙互浣跨敤callSuper銆?/鐖剁被letPoint=newfabric.util.createClass({...})//鐪佺暐涓€浜涗唬鐮乴etColoredPoint=fabric.util.createClass(//鍙傛暟1锛氱埗绫籔oint,//鍙傛暟2锛氬瓙绫粄initialize(x,y,color){...},toString(){returnthis.callSuper('toString')}})//璁﹔edPoint=newColoredPoint(15,33,'#f55')console.log(redPoint.toString())//"15/33"涔熷彲浠ラ噸鏂板皝瑁?/鐪佺暐閮ㄥ垎浠ｇ爜//瀵逛簬ColoredPoint锛岀渷鐣ラ儴鍒嗕唬鐮乼oString(){return'CalledfromsubclassColoredPoint:'+this.callSuper('toString')}//杈撳嚭redPoint锛岀渷鐣ラ儴鍒嗕唬鐮乧onsole.log(redPoint.toString())//浠庡瓙绫籆oloredPoint璋冪敤锛?5/33缁ф壙fabric.js鑷甫鐨勫浘褰㈠湪瀹樻柟妗堜緥杩欐牱鐨勬晥鏋溿€備笂鍥剧殑鏁堟灉鏄户鎵縍ectangle鐨勫瓙绫汇€傜煩褰㈡槸fabric.js榛樿鎻愪緵鐨勫浘褰㈠璞′箣涓€銆傜户鎵縭ectangle鏃讹紝鍙渶瑕佸皢rectangle浣滀负fabric.util.createClass鐨勭涓€涓弬鏁帮紝鐒跺悗娣诲姞鑷畾涔夊嚱鏁板嵆鍙€?/鐪佺暐閮ㄥ垎浠ｇ爜//鍒涘缓涓€涓甫鏈夋爣绛惧嚱鏁扮殑鐭╁舰constLabeledRect=fabric.util.createClass(//浠巉abric缁ф壙鐨勭煩褰abric.Rect,{type:'labeledRect',//娣诲姞涓€涓被鍨嬪睘鎬?/鍒濆鍖杋nitialize:function(options){options||(options={})//鍒濆鍖栧弬鏁帮紝閬垮厤鍑洪敊this.callSuper('initialize',options)//缁ф壙this.set('label',options.label||'')//璁剧疆鏍囩锛岄粯璁ゅ€间负绌簍his.set({width:100,height:50})//璁剧疆榛樿瀹介珮},toObject:function(){returnfabric.util.object.extend(this.callSuper('toObject'),{label:this.get('label')})},//娣诲姞娓叉煋鎿嶄綔_render:function(ctx){this.callSuper('_render',ctx)ctx.font=this.labelFont||'20pxHelevtica'ctx.fillStyle=this.labelFill||'#333'//娓叉煋鏍囩ctx.fillText(this.label,-this.width/2,-this.height/2+20)}})//鍒涘缓涓€涓爣绛剧煩褰etlabeledRect=newLabeledRect({//width:100,//he鍙筹細50锛屽乏锛?00,top:100,label:'test',fill:'#faa'})//缁欑敾甯冩坊鍔犳爣绛剧煩褰anvas.add(labeledRect)鍥犱负缁ф壙浜嗕竴涓煩褰紝鎵€浠ヤ篃鍙互鍒╃敤fabric.Rect鐨勫睘鎬ndMethod//鐪佺暐閮ㄥ垎浠ｇ爜labeledRect.set({label:'trololo',fill:'#faf',rx:10,ry:10})rx鍜宺y閮芥槸fabric.Rect鐨勫睘鎬э紝鍙互璁剧疆鍦嗚銆俧abric.js涓殑鐭╁舰Rect銆佷笁瑙掑舰Triangl銆佸渾Circle绛夊浘褰㈠厓绱犻兘缁ф壙鑷猣abric.Object銆傜户鎵縡abric.Object鍒涘缓鐨別lement瀵硅薄榛樿鏈夊彞鏌勪箣绫荤殑涓滆タ銆傛帴涓嬫潵瑕佸垱寤虹殑鈥滃崐鍦嗏€濆厓绱犱篃缁ф壙浜唂abric.Object锛岃繖鏄痜abric.js鎻愪緵鐨勪竴涓潪甯告柟渚跨殑瀵硅薄銆?canvasid="c"width="300"height="300"style="border:1pxsolid#ccc;">_render鎻愪緵浜哻tx鍙傛暟锛屽畠鏄痗anvas鎻愪緵鐨勪笂涓嬫枃瀵硅薄锛岄€氳繃瀹冨彲浠ュ垱寤轰笉鍚岀殑鍥惧舰銆傝繖鏄痗anvas鐨勫熀纭€鐭ヨ瘑锛屼篃鏄痜abric.js鍦ㄥ垱寤哄瓙绫绘椂蹇呴』鎺屾彙鐨勭煡璇嗐€傚鏋滀綘瀵筩anvas涓嶇啛鎮夛紝鍙互鐪嬬湅銆奀anvas 浠庡叆闂ㄥ埌鍔濇湅鍙嬫斁寮冿紙鍥捐В鐗堬級銆嬪鏋滀綘涓嶅枩娆㈡妸瀛愮被瀹氫箟鎴愬彉閲忥紝涔熷彲浠ユ妸瀛愮被缁戝畾鍒癴abric涓娿€俧abric.Semicircle=fabric.util.createClass(...)//鍒涘缓涓€涓崐鍦唋etsemicircle=newfabric.Semicircle(...)铏界劧杩欑湅璧锋潵绫讳技浜庡垱寤虹煩褰€佸渾褰㈢瓑鍥惧舰锛屼絾鎴戣繕鏄笉浼氬缓璁繖鏍峰仛銆傚洜涓烘湁鍙兘涓€涓嶅皬蹇冨拰fabric鐨勪竴涓睘鎬ч噸鍚嶄簡锛屼綘鍙兘浼氳鐩栧師鏉ョ殑鏂规硶銆傛墍浠ュ皢瀛愮被淇濆瓨鍦ㄥ崟鐙殑鍙橀噺涓洿绋冲畾銆備唬鐮佷粨搴撯瓙鍒涘缓瀛愮被createClass鎺ㄨ崘闃呰馃憤銆奆abric.js 浠庡叆闂ㄥ埌_ _ _ _銆嬸煈嶃€奆abric.js 鎺у埗鍏冪礌灞傜骇銆嬸煈嶃€奆abric.js 鍔ㄦ€佽缃瓧鍙峰ぇ灏忋€嬸煈嶃€奆abric.js 婵€娲昏緭鍏ユ銆嬸煈嶃€奆abric.js 鑷畾涔夐€夋鏍峰紡銆嬸煈嶃€奆abric.js 鍏冪礌涓績缂╂斁銆嬬偣璧?鍏虫敞+涔︾=瀛︿範浜嗕唬鐮佷粨搴?/p>
