杩欑瘒浠嬬粛鐐硅禐+鍏虫敞+鏀惰棌=瀛︿細浜嗗柗鍒稴prayBrush鏄痜abric.js鎻愪緵鐨勪竴涓潪甯告湁瓒ｇ殑宸ュ叿锛宖abric.js杩樺皝瑁呬簡寰堝闈炲父鏂逛究鐨勫睘鎬у厑璁告垜浠厤缃紝鑰屼笖浣跨敤璧锋潵闈炲父绠€鍗曘€傚厛鏉ョ湅鐪嬫晥鏋滐細鍠峰埛姝ｅ父閰嶇疆涓虹敾绗斿伐鍏枫€傝浣跨敤瀹冿紝鎮ㄩ鍏堥渶瑕佸湪鐢诲竷涓婂惎鐢ㄢ€滅粯鐢绘ā寮忊€濄€傚皢isDrawingMode璁剧疆涓簍rue浠ュ惎鐢ㄥ畠銆?canvasid="c"width="500"height="400"style="border:1pxsolid#ccc;">濡傛灉鍦ㄧ敾甯冨垵濮嬪寲鏃朵笉寮€鍚粯鍥炬ā寮忥紝涔熷彲浠ョ◢鍚庡紑鍚痗anvas.isDrawingMode=true銆傚鏋滆鍒囨崲鍥炴甯告ā寮忥紝鍙渶灏唅sDrawingMode鏀瑰洖false鍗冲彲銆傛敞鍐屽柗鍒峰柗鍒风О涓篠prayBrush銆傛敞鍐屽柗鍒风殑鏃跺€欓渶瑕佷紶鍏ュ垵濮嬪寲鐨刢anvas锛岀劧鍚庤祴鍊肩粰canvas.freeDrawingBrush//鐪佺暐閮ㄥ垎浠ｇ爜canvas.freeDrawingBrush=newfabric.SprayBrush(canvas)//姣旇緝鎺ㄨ崘鐨勪竴绉嶅啓娉曡sprayBrush=newfabric.SprayBrush(canvas)canvas.freeDrawingBrush=sprayBrush鎴戝缓璁妸sprayBrush淇濆瓨鍦ㄤ竴涓彉閲忎腑锛岃繖鏍蜂互鍚庨厤缃悇绉嶆晥鏋滄洿鏂逛究銆傞櫎浜嗕笂闈㈢殑鍐欐硶锛岃繕鍙互杩欐牱鍐欙細//鐪佺暐閮ㄥ垎浠ｇ爜鍒濆鍖栵紝鍏朵腑鎺ユ敹鍒扮殑鍙傛暟鏄綋鍓嶇敾甯冦€傝缃敾绗旂殑绮楃粏鏄负浜嗘柟渚挎紨绀哄叾浠栧睘鎬э紝鎵€浠ュ厛鎶婄敾绗旂殑瀹藉害璁剧疆澶т竴鐐广€?/鐪佺暐閮ㄥ垎浠ｇ爜sprayBrush.width=200width灞炴€х敤浜庤缃敾绗旂殑绮楃粏锛屽€艰秺澶х敾绗旇秺绮椼€傝缃柗灏勫瘑搴︽偍鍙互浣跨敤瀵嗗害灞炴€ф潵璁剧疆鍠峰皠瀵嗗害锛屽€艰秺澶э紝瀵嗗害瓒婂ぇ銆俤ensity榛樿鍊间负20銆?/鐪佺暐閮ㄥ垎浠ｇ爜sprayBrush.width=200sprayBrush.density=100//璁剧疆鍠烽浘瀵嗗害锛屽皢瀵嗗害璁剧疆灏忎竴鐐广€傚姣攕prayBrush.width=200sprayBrush.density=10锛屽緢鐩磋鐨勭湅鍑哄樊璺濄€傝缃柗鐐瑰ぇ灏忊€淪praypoint鈥濇槸鍠风偣涓殑姣忎竴涓偣锛岃缃柗鐐瑰搴︾殑灞炴€хО涓篸otWidth銆俤otWidth榛樿鍊间负1锛屽€艰秺澶э紝鍠风偣瓒婂ぇ銆?/鐪佺暐閮ㄥ垎浠ｇ爜sprayBrush.width=200//璁剧疆鍠锋磼瀹藉害sprayBrush.dotWidth=10//璁剧疆鍠锋磼鐐瑰ぇ灏忥紝璁剧疆鍠锋磼鐐规柟宸€傛偍鍙互浣跨敤dotWidthVariance灞炴€ф潵璁剧疆鍠峰皠鐐圭殑鏂瑰樊銆俤otWidthVariance鍙互鍦ㄦ寚瀹氳寖鍥村唴闅忔満鐢熸垚涓嶅悓澶у皬鐨勫柗鐐广€俤otWidthVariance榛樿鍊间负1锛屽€艰秺澶э紝鐐圭殑闅忔満澶у皬瓒婂ぇ銆?/鐪佺暐閮ㄥ垎浠ｇ爜sprayBrush.width=200sprayBrush.dotWidthVariance=10dotWidthVariance璁剧疆鍚庯紝dotWidth鎰忎箟涓嶅ぇ銆傚弽閲嶅彔鍠峰埛榛樿浼氬垹闄ら噸鍙犵偣锛屽畼鏂规枃妗ｈ杩欐槸鍑轰簬鎬ц兘鑰冭檻銆傚鏋滄偍涓嶆兂鍒犻櫎閲嶅彔鐐癸紝鍙互灏唎ptimizeOverlapping璁剧疆涓篺alse銆?/鐪佺暐閮ㄥ垎浠ｇ爜sprayBrush.optimizeOverlapping=false璁剧疆鍠风偣鐨勯殢鏈轰笉閫忔槑搴︺€傛偍鍙互浣跨敤randomOpacity灞炴€ф潵璁剧疆鍠峰皠鐐圭殑涓嶉€忔槑搴︽槸鍚﹂殢鏈恒€?/鐪佺暐閮ㄥ垎浠ｇ爜sprayBrush.randomOpacity=true璁剧疆鍠锋秱闃村奖鍠锋秱鍒锋枃妗ｄ腑娌℃湁鎻愬埌闃村奖锛屼絾鏄敱浜庡熀鏈埛鍙互璁剧疆闃村奖锛屾墍浠ュ柗娑傚埛涔熷彲浠ヨ缃槾褰便€?/鐪佺暐閮ㄥ垎浠ｇ爜sprayBrush.width=200sprayBrush.dotWidthVariance=10//璁剧疆闃村奖鏁堟灉sprayBrush.shadow=newfabric.Shadow({blur:10,offsetX:10,offsetY:10,color:'#30e3ca'})settingSpraycolor鍠风瑪鍙互閫氳繃color璁剧疆鍠疯壊锛屼絾鏄畼鏂规枃妗ｅソ鍍忓繕璁板啓杩欎釜灞炴€т簡銆?/鐪佺暐閮ㄥ垎浠ｇ爜sprayBrush.color='pink'event濡傚墠鎵€杩帮紝initialize()鏂规硶鍙互鍒濆鍖栫敾绗斻€傚彟澶栵紝鍠峰埛杩樻湁鍏朵粬鐨勪簨浠舵柟娉曘€俿pray涔熸槸鍑嗗鐢熸垚spray鍓嶅悗鐨勮矾寰勶紝鎵€浠ュ彲浠ョ洃鎺anvas璺緞鐢熸垚鐨勬椂闂存銆傚湪鍠烽浘鍑嗗濂界敓鎴愪箣鍓嶏紝浣犲彲浠ュ惉before:path:created;spray鐢熸垚鍚庯紝鍙互鐩戝惉path:created銆?/鐪佺暐閮ㄥ垎浠ｇ爜//鍑嗗鐢熸垚涔嬪墠canvas.on('before:path:created',opt=>{console.log(opt.path)})//鐢熸垚涔嬪悗canvas.on('path:鍒涘缓',opt=>{console.log(opt.path)})onMouseDownsprayBrush.onMouseDown=function(t){this.sprayChunks.length=0,this.canvas.clearContext(this.canvas.contextTop),杩欎釜銆俖setShadow(),this.addSprayChunk(t),this.render(this.sprayChunkPoints)}onMouseMovesprayBrush.onMouseMove=function(t){!0===this.limitedToCanvasSize&&this._isOutSideCanvas(t)||}(this.addSprayChunk(t),this.render(this.sprayChunkPoints))}onMouseUpsprayBrush.onMouseUp=function(){vart=this.canvas.renderOnAddRemove;this.canvas.renderOnAddRemove=!1;瀵逛簬(vare=[],i=0,r=this.sprayChunks.length;i
