鏈枃浠嬬粛鐐硅禐+鍏虫敞+涔︾=浜嗚В鍒癴abric.js鍒涘缓鐨勭敾甯冮粯璁ゆ槸涓嶈兘鎷栨嫿绉诲姩鐨勩€備絾鏄紝鎴戜滑鍙互浣跨敤涓€浜涙妧宸т娇鐢诲竷鑳藉琚嫋鍔ㄣ€俧abric.js瀹樼綉涔熸彁渚涗簡涓€涓猟emo锛屼絾鏄枃妗ｅ苟娌℃湁璇︾粏璇存槑鎷栧姩鐢诲竷鐨勫疄鐜板師鐞嗐€傛湰鏂囩畝瑕佸垎鏋愯繖涓€鍘熺悊銆傚師鐞嗗垎鏋愰紶鏍囨嫋鍔ㄧ殑鍘熺悊鍏跺疄寰堢畝鍗曪紝涓昏鏈?涓楠わ細榧犳爣鐐瑰嚮鍏冪礌锛岀Щ鍔ㄩ紶鏍囷紝鏉惧紑榧犳爣銆傚綋榧犳爣绉诲姩鏃讹紝鑾峰彇榧犳爣褰撳墠浣嶇疆锛岀劧鍚庝慨鏀硅鎷栧姩鍏冪礌鐨勪綅缃€傛澗寮€榧犳爣鏃讹紝杩橀渶瑕佽幏鍙栨澗寮€鐬棿榧犳爣鐨勪綅缃紝鐒跺悗璁剧疆鍏冪礌鐨勪綅缃€傚厛鐪嬪畼鏂圭殑渚嬪瓙鍐嶄竴姝ユ鍒嗘瀽../js/fabric.js">鎷栧姩鐢诲竷鐨勪唬鐮佹潵鑷畼鏂规渚嬪拰鎴戝垹闄や簡瀹冪殑閮ㄥ垎鍏冪礌銆備粠涓婇潰鐨勪唬鐮佸彲浠ョ湅鍑猴紝涓昏鐨勪簨浠舵槸mouse:down,mouse:move,mouse:up銆俢anvas.on('mouse:down',function(opt){varevt=opt.e;if(evt.altKey===true){this.isDragging=truethis.lastPosX=evt.clientXthis.lastPosY=evt.clientY}})閫氳繃mouse:down浜嬩欢锛岃缃负鎸変綇alt閿悗鈥嬧€嬫寜涓嬮紶鏍囧乏閿Е鍙戞嫋鍔ㄤ簨浠讹紙start锛夈€傝嚜瀹氫箟3涓睘鎬э細isDragging锛氭嫋鍔ㄧ姸鎬侊紝true琛ㄧず鍙嫋鍔╨astPosX锛氱敾甯冧笂鐨勪竴涓獂鍧愭爣lastPosY锛氱敾甯冧笂鐨勪竴涓獃鍧愭爣涓轰粈涔堣璁板綍lastPosX鍜宭astPosY锛熷崟鍑婚紶鏍囨椂锛岃褰曢紶鏍囩殑浣嶇疆銆傚悗闈㈢Щ鍔ㄧ殑鏃跺€欙紝閫氳繃姣旇緝榧犳爣鏂扮殑浣嶇疆鍜岀偣鍑绘椂鐨勪綅缃紝鍙互璁＄畻鍑洪紶鏍囩Щ鍔ㄤ簡澶氬皯锛岃繘鑰岃皟鏁寸敾甯冪殑绉诲姩璺濈銆傜Щ鍔ㄩ紶鏍囨椂canvas.on('mouse:move',function(opt){if(this.isDragging){vare=opt.e;varvpt=this.viewportTransform;vpt[4]+=e.clientX-this.lastPosXvpt[5]+=e.clientY-this.lastPosYthis.requestRenderAll()this.lastPosX=e.clientXthis.lastPosY=e.clientY}})鍙互閫氳繃mouse:move鐩戝惉榧犳爣鐨勭Щ鍔?杩欐椂鍊欏氨闇€瑕侀€氳繃isDragging鏉ュ垽鏂槸鍚﹁繘鍏ユ嫋鍔ㄧ姸鎬併€倂iewportTransform鏄敾甯冧笂fabric.js鐨勪竴涓睘鎬с€傚畼鏂规枃妗ｆ槸杩欐牱浠嬬粛鐨勶細Thetransformation(aCanvas2DAPItransformmatrix)whichfocusedtheviewport浠ヤ笂浠ｇ爜淇敼浜唙iewportTransform涓嬫爣涓?鍜?鐨勫厓绱犮€倂iewportTransform[4]:姘村钩浣嶇Щ(x杞?viewportTransform[5]:鍨傜洿浣嶇Щ(y杞?e.clientX-this.lastPosX涓洪紶鏍囩Щ鍔▁杞存柟鍚戠殑璺濈锛宔.clientY-this銆俵astPosY鍙互璁＄畻鍑洪紶鏍囧湪y杞存柟鍚戠Щ鍔ㄧ殑璺濈銆傚鏋滀綘鎯充簡瑙iewportTransform鐨勬瘡涓厓绱犱唬琛ㄤ粈涔堬紝浣犲彲浠ョ湅鍒般€奆abric.js 鍙樻崲瑙嗙獥銆媟equestRenderAll()姣忔绉诲姩鏃堕兘浼氬埛鏂扮敾甯冦€傚埛鏂扮敾甯冨悗锛屽皢鏈€鍚庝竴涓偣锛坸鍜寉鍧愭爣锛夋洿鏀逛负鏈€鏂扮殑锛歵his.lastPosX=e.clientX鍜宼his.lastPosY=e.clientY锛屼负涓嬫绉诲姩榧犳爣鎻愪緵鍙傝€冨€硷紝涓轰簡渚夸簬璁＄畻銆俢anvas.on('mouse:up',function(opt){this.setViewportTransform(this.viewportTransform)this.isDragging=false})浣跨敤setViewportTransform璁剧疆榧犳爣閲婃斁鏃剁敾甯冪殑瑙嗗浘銆傚苟閫€鍑烘嫋鍔ㄦā寮忥細isDragging=false銆備互涓婂氨鏄湪fabric.js涓嫋鎷界敾甯冪殑鏂规硶銆備唬鐮佷粨搴撯瓙鎷栨斁绉诲姩鐢诲竷銆傛帹鑽愰槄璇火煈嶃€奆abric.js 浠庡叆闂ㄥ埌_ _ _ _銆嬸煈嶃€奆abric.js 鎺у埗鍏冪礌灞傜骇銆嬨€奆abric.js 鑷畾涔夐€夋鏍峰紡銆嬸煈嶆垜杩橀渶瑕佷慨鏀逛竴涓嬶細濡傛灉鎯崇煡閬搗iewportTransform鐨勬瘡涓厓绱犱唬琛ㄤ粈涔堬紝鍙互鐪嬬湅銆奆abric.js 鍙樻崲瑙嗙獥銆媗ike+follow+Favorites=瀛︿範浠ｇ爜搴?/p>
