杩欑瘒鏂囩珷浠嬬粛鐐硅禐+鍏虫敞+鏀惰棌=浜嗚В鍒癴abric.js鐨刾encil鍏跺疄鏄竴涓户鎵垮熀纭€鐢荤瑪鐨勫伐鍏枫€傚湪鍩虹绗斿埛鐨勫熀纭€涓婏紝澧炲姞浜嗏€滆竟瑙掑钩婊戝害鈥濈瓑閰嶇疆椤广€傛湰鏂囦粙缁嶉搮绗旂殑鍩烘湰鐢ㄦ硶鍜屽父瑙佷簨浠躲€傚父瑙勯厤缃幇瀹炰笘鐣屼腑鐨勯搮绗旀湁涓嶅悓鐨勫瀷鍙凤紝鍏锋湁涓嶅悓鐨勯鑹叉繁娴呭拰閾呯殑纭害銆傚湪fabric.js涓紝閾呯瑪涔熸湁涓嶅悓鐨勯厤缃€傚紑鍚粯鍥炬ā寮忚嫢瑕佷娇鐢ㄩ搮绗旓紝蹇呴』鍏堝紑鍚€滅粯鍥炬ā寮忊€濄€備笅闈㈢殑浠ｇ爜鏄湰鏂囩殑鍩虹浠ｇ爜锛屽悗闈㈤厤缃殑pencil灞炴€у拰pencil鐩稿叧鐨勬柟娉曢兘鏄熀浜庤繖娈典唬鐮併€傚鍏abric.js鐨勪唬鐮佹垜灏变笉鍐欎簡锛屼笉鐭ラ亾鎬庝箞瀵煎叆鐨勫彲浠ユ煡鐪嬨€奆abric.js 浠庡叆闂ㄥ埌鑶ㄨ儉銆嬨€?canvasid="canvas"width="500"height="400"style="border:1pxsolid#ccc;">灏唅sDrawingMode璁剧疆涓簍rue浠ュ惎鐢ㄧ粯鍥炬ā寮忋€傝繖鏃跺€欏湪鐢诲竷涓婃寜涓嬮紶鏍囧乏閿氨鍙互鐢诲浘浜嗐€傛敞鍐岄搮绗旇浣跨敤閾呯瑪宸ュ叿锛屾偍闇€瑕佸皢canvas.freeDrawingBrush璁剧疆涓洪搮绗斻€?/鐪佺暐閮ㄥ垎浠ｇ爜varcanvas=newfabric.Canvas('canvas',{isDrawingMode:true//缁樺浘妯″紡})//瀹炰緥鍖栭搮绗攍etpencilBrush=newfabric.PencilBrush(canvas)//璁剧疆鐢荤瑪canvastoPencilcanvas.freeDrawingBrush=pencilBrush闇€瑕佹敞鎰忕殑鏄痗anvas闇€瑕佷紶鍏ewfabric.PencilBrush(canvas)銆傞櫎浜嗗疄渚嬪寲鏃朵紶鍏anvas澶栵紝杩樺彲浠ヨ皟鐢╥nitialize鏂规硶浼犲叆銆?/鐪佺暐閮ㄥ垎浠ｇ爜//鍒涘缓閾呯瑪letpencilBrush=newfabric.PencilBrush()//鍒濆鍖栭搮绗攑encilBrush.initialize(canvas)//璁剧疆鐢荤瑪涓洪搮绗攃anvas.freeDrawingBrush=pencilBrush璁剧疆棰滆壊pencil瑕佽缃殑灞炴€ф槸color//鐪佺暐閮ㄥ垎浠ｇ爜pencilBrush.color='pink'闄や簡璁剧疆鍏抽敭瀛楋紝杩樺彲浠ヨ缃崄鍏繘鍒讹紝rgba绛夐鑹插€硷紝渚嬪pencilBrush.color='rgba(0,0,0,0.1)'鍙互璁剧疆涓€涓粦鑹茬殑甯﹂€忔槑搴︾殑绗斿埛銆傝缃搮绗旂殑绮楃粏浣跨敤width璁剧疆閾呯瑪鐨勭矖缁嗭紝璧嬪€兼槸鏁板€肩被鍨嬨€?/鐪佺暐閮ㄥ垎浠ｇ爜pencilBrush.width=10闃村奖闇€瑕佷娇鐢╢abric.Shadow鍒涘缓闃村奖锛岀劧鍚庤祴鍊肩粰shadow銆備负浜嗘紨绀猴紝鎴戝皢閾呯瑪鐨勫搴﹁缃负10銆?/鐪佺暐閮ㄥ垎浠ｇ爜//灏嗛搮绗斿姞绮椾互渚夸簬婕旂ずpencilBrush.width=10//璁剧疆闃村奖pencilBrush.shadow=newfabric.Shadow({blur:10,//缇藉寲搴ffsetX:10,//x杞村亸绉婚噺offsetY:10,//y杞村亸绉婚噺color:'#30e3ca'//鎶曞奖棰滆壊})鍏跺疄鏈夊緢澶氶槾褰眆abric.Shadow閰嶇疆椤癸紝鏈緥涓昏閰嶇疆浠ヤ笅鍥涗釜灞炴€lur锛歠eatheringdegree锛宺eception鏁板€肩被鍨嬬殑鍊笺€俹ffsetX锛氶槾褰卞湪x杞翠笂鐨勫亸绉婚噺锛屾鍊煎悜鍙筹紝璐熷€煎悜宸︺€俹ffsetY锛氶槾褰卞湪y杞翠笂鐨勫亸绉婚噺锛屾鍊煎線涓嬶紝璐熷€煎線涓娿€俢olor锛氶槾褰遍鑹诧紝鍙互浣跨敤棰滆壊鍏抽敭瀛楋紝鍗佸叚杩涘埗锛宺gba绛夈€傝櫄绾垮彲浠ラ€氳繃strokeDashArray灏嗛搮绗旂敾鐨勭嚎璁剧疆涓鸿櫄绾裤€俿trokeDashArray鐨勫€兼槸涓€涓暟鍊肩被鍨嬬殑鏁扮粍锛岃鏁扮粍鍙互鎺ユ敹涓€涓垨澶氫釜鍏冪礌銆傚綋鍙湁1涓厓绱犳椂锛岃櫄绾垮拰瀹炵嚎鐨勯暱搴︾浉绛夈€?/鐪佺暐閮ㄥ垎浠ｇ爜pencilBrush.strokeDashArray=[10]褰撴湁2涓厓绱犳椂锛岀涓€涓厓绱犱唬琛ㄥ疄绾跨殑闀垮害锛岀浜屼釜鍏冪礌浠ｈ〃铏氱嚎鐨勯暱搴︺€?/鐪佺暐閮ㄥ垎浠ｇ爜pencilBrush.strokeDashArray=[30,10]浠庝笂鍥惧彲浠ョ湅鍑猴紝姣忔潯瀹炵嚎鐨勯暱搴︿负30锛屾瘡鏉¤櫄绾跨殑闀垮害涓?0锛屽鏋滆秴杩?鏉arameters锛屽畠浼氫竴鐩粹€滆疆鍥炩€?/鐪佺暐閮ㄥ垎浠ｇ爜pencilBrush.strokeDashArray=[10,20,30]涓婇潰鐨勪唬鐮佹槸杩欐牱鐨勶細瀹炵嚎10锛岃櫄绾?0锛屽疄绾?0锛岃櫄绾?0锛屽疄绾?0锛岃櫄绾?0锛屽疄绾?0锛?.....濡傛灉瓒呰繃4涓垨5涓弬鏁帮紝灏辫繖鏍峰惊鐜笅鍘汇€侺ineCap绾垮附鏄嚎鏉′袱绔殑鏍峰紡銆傛偍鍙互浣跨敤strokeLineCap璁剧疆绾垮附鐨勬牱寮忋€傚彲閫夊€兼湁butt銆乺ound鍜宻quare銆傞粯璁ゅ€间负round锛屽嵆鍦嗗舰绾垮附銆?/鐪佺暐閮ㄥ垎浠ｇ爜pencilBrush.width=10//BoldpencilBrush.strokeLineCap='round'//濡傛灉square鏄柟澶达紝淇敼绾垮附//鐪佺暐閮ㄥ垎浠ｇ爜pencilBrush.width=10//BoldpencilBrush.strokeLineCap='square'//淇敼绾垮附鏈€鍚庝竴涓槸鏃犵嚎瀵规帴//鐪佺暐閮ㄥ垎浠ｇ爜pencilBrush.width=10//绮椾綋pencilBrush.strokeLineCap='butt'//淇敼绾垮附鐪嬭捣鏉ユ湁鐐瑰儚butt鍜宻quare锛屼絾瀹為檯涓婃槸涓嶅悓鐨勩€傚鏋滅嚎娈电殑闀垮害鐩稿悓锛屾柟褰㈠拰鍦嗗舰閮戒細鍦ㄧ嚎鐨勪袱绔姞涓婄嚎甯斤紝杩欐牱浼氬鍔犵嚎鐨勯暱搴︺€傚瓧姣峍鐨勫皷鐐圭瓑瑙掓牱寮忔槸鈥滆鈥濄€俧abric.js鐨勯搮绗斿彲浠ラ€氳繃strokeLineJoin灞炴€ц缃浆瑙掞紝鏀寔涓変釜灞炴€э細bevel鏂滆銆佸渾鍦堛€乵iter鏂滆銆?/鐪佺暐閮ㄥ垎浠ｇ爜pencilBrush.strokeLineJoin='miter',//"bevel"鏂滆,"round"鍦?"miter"鏂滆鏈€澶ф枩鎺ラ暱搴trokeMiterLimit灞炴€х殑璁剧疆閫傜敤浜巗trokeLineJoin涓簃iter鏃躲€俻encilBrush.strokeMiterLimit=20cornersmoothness杩欐槸涓€涓潪甯告湁瓒ｇ殑灞炴€э細decimate銆傝浆瑙掔殑骞虫粦搴﹀彲浠ラ€氳繃璁剧疆decimate鏉ヤ慨鏀癸紝鍊艰秺澶ц秺骞虫粦銆俻encilBrush.width=5//boldpencilBrush.decimate=40绂佹瓒呭嚭鐢诲竷濡傛灉閾呯瑪鐨刲imitedToCanvasSize灞炴€ц缃负true锛屽垯鐢荤瑪鍦ㄧ粯鍒舵椂涓嶈兘瓒呭嚭鐢诲竷銆?/鐪佺暐閮ㄥ垎浠ｇ爜pencilBrush.width=5//鍔犵矖pencilBrush.limitedToCanvasSize=true//绂佹鐢荤瑪瓒呭嚭鐢诲竷缁樺埗鐩寸嚎浣跨敤閾呯瑪鏃讹紝榛樿鏄寜浣弒hift閿粯鍒朵竴鏉＄洿绾裤€傚鏋滆淇敼缁樺埗鐩寸嚎鐨勭粍鍚堥敭锛屽彲浠ヨ缃畇traightLineKey灞炴€с€?/鐪佺暐閮ㄥ垎浠ｇ爜pencilBrush.straightLineKey='shiftKey'straightLineKey鏀寔浠ヤ笅閰嶇疆锛歴hiftKey:shiftkey,榛樿altKey:altkeyctrlKey:ctrlkey'none','undefined','null':鍙栨秷缁勫悎閿簨浠秄abric.jspencil鎻愪緵浜嗕竴浜涘熀鏈殑浜嬩欢锛屾湁浜涘緢瀹规槗浣跨敤锛屾湁浜涘垯涓嶅お濂界敤銆?.鍑嗗鐢熸垚涓€琛屾椂锛歜efore:path:created//鐪佺暐閮ㄥ垎浠ｇ爜canvas.on('before:path:created',opt=>{console.log(opt.path)})鐢熸垚涓€琛屾椂:path:created//鐪佺暐閮ㄥ垎浠ｇ爜canvas.on('path:created',function(opt){console.log(opt.path)})褰撻紶鏍囩偣鍑绘椂锛歰nMouseDown//鐪佺暐閮ㄥ垎浠ｇ爜pencilBrush.onMouseDown=function(t,e){console.log(t)console.log(e)this.canvas._isMainEvent(e.e)&&(this.drawStraightLine=e.e[this.straightLineKey],this._prepareForDrawing(t),this._captureDrawingPath(t),this._render())}鍙傛暟t涓洪紶鏍囩偣鍑绘椂鐨勫潗鏍噞x,y}銆傚弬鏁癳鍖呭惈浜嬩欢鏈韩锛屼互鍙婂潗鏍囩偣銆傚彲浠ユ妸t鍜宔杈撳嚭鍒版帶鍒跺彴鐪嬬湅銆俹nMouseDown浜嬩欢鏈€濂戒娇鐢ㄦ櫘閫氬嚱鏁帮紝鏈€鍚庡啓杩欎袱鍙ワ細this._prepareForDrawing(t)this._render()榧犳爣绉诲姩鏃讹細onMouseMovepencilBrush.onMouseMove=function(t,e){console.log(t)console.log(e)if(this.canvas._isMainEvent(e.e)&&(this.drawStraightLine=e.e[this.straightLineKey],(!0!==this.limitedToCanvasSize||!this._isOutSideCanvas(t))&&this._captureDrawingPath(t)&&1
