鎯充簡瑙ｆ洿澶欶abric.js鐜╂硶锛屽叧娉ㄦ垜锛岀涓€鏃堕棿鑾峰彇鏈€鏂板姩鎬乯s濡備綍鍒涘缓鐭╁舰銆傚鏋滀綘杩樻病鏈夋弧瓒充互涓?涓潯浠讹紝鎺ㄨ崘闃呰銆奆abric.js浠庡叆闂ㄥ埌____銆嬫垜鍦‵abric.js涓娇鐢ㄦ閫夋搷浣滃垱寤虹煩褰€傚湪鎺ヤ笅鏉ョ殑鍑犵瘒鏂囩珷涓紝鎴戝皢鍐欏浣曡嚜鐢辩粯鍒跺渾銆佹き鍦嗐€佷笁瑙掑舰銆佺嚎娈点€佹姌绾垮拰澶氳竟褰€傛湰鏂囦笉鍋氫换浣旵SS鐩稿叧鐨勭編鍖栵紝鍙槸璁茶В瀹炵幇鍘熺悊銆備笅鍥惧氨鏄湰鏂囪瀹炵幇鐨勬晥鏋溿€備娇鐢‵abric.js绛夋鏋舵椂锛屼竴瀹氳娉ㄦ剰鐗堟湰銆傛湰鏂囦娇鐢ㄧ殑鐗堟湰锛欶abric.js4.6.0鍘熺悊鏍稿績鍘熺悊鏄€氳繃鈥滈€夋鈥濈敓鎴愮煩褰紝鍏舵牳蹇冩槸2鐐癸細榧犳爣鐐瑰嚮鍜屾姮璧锋椂鑾峰彇鐨勫潗鏍囩偣锛屽嵆,璧风偣鍜岀粓鐐广€傞紶鏍囨姮璧峰悗锛屾牴鎹涓€涓偣寰楀埌鐨勪袱涓潗鏍囪绠楃煩褰㈢殑闀垮鍜屼綅缃€傞紶鏍囩偣鍑伙細canvas.on('mouse:down',fn)榧犳爣寮硅捣锛歝anvas.on('mouse:up',fn)闇€瑕佽€冭檻鐨勫洜绱犵悊瑙ｄ簡浠ヤ笂鏍稿績鐐逛箣鍚庯紝鎺ヤ笅鏉ヨ鑰冭檻鐨勫氨鏄紶鏍囪竟妗嗛€夊畾鐨勬柟鍚戙€備粠宸︿笂鍒板彸涓嬮€夋浠庡彸涓嬪埌宸︿笂閫夋浠庡乏涓嬪埌鍙充笂閫夋浠庡彸涓婂埌宸︿笅閫夋浠ヤ笂鍥涚鎯呭喌閮戒細褰卞搷鐢熸垚鐭╁舰鐨勯暱瀹藉拰浣嶇疆銆傜敓鎴愮煩褰㈢殑浠ｇ爜newfabric.Rect({top:0,//鐭╁舰宸︿笂瑙掑湪y杞翠笂鐨勪綅缃甽eft:0,//鐭╁舰宸︿笂瑙掑湪y杞翠笂鐨勪綅缃畑杞磜idth:100,//鐭╁舰鐨勫搴eight:100,//鐭╁舰鐨勯珮搴ill:'transparent',//濉厖棰滆壊stroke:'#000'//杈规棰滆壊})鎺ヤ笅鏉ワ紝璁╂垜浠竴涓€璇磋杩?涓搷浣滅殑鏁堟灉銆傝繖绉嶆儏鍐垫渶濂介€氳繃浠庡乏涓婅鍒板彸涓嬭閫夋嫨妗嗘潵澶勭悊銆傛鏃惰捣鐐逛负鐭╁舰鐨勫乏涓婅锛岀粓鐐逛负鐭╁舰鐨勫彸涓嬭銆傝捣鐐圭殑x鍜寉鍧愭爣閮藉皬浜庣粓鐐癸紝锛堣捣鐐箈<缁堢偣x锛涜捣鐐箉<缁堢偣y锛夛細鐭╁舰鐨勫搴︼細缁堢偣x鍧愭爣-璧风偣x鍧愭爣锛堜篃鍙互璇存槸锛坰tart璧风偣x-缁堢偣x鐨勭粷瀵瑰€硷級锛夈€傜煩褰㈢殑楂樺害锛氱粓鐐箉鍧愭爣-璧风偣y鍧愭爣锛堜篃鍙互璇存槸锛堣捣鐐箉-缁堢偣y锛夌殑缁濆鍊硷級銆傚乏涓婅鍦▁杞翠笂鐨勪綅缃細璧风偣鐨剎杞村潗鏍囥€倅杞翠笂宸︿笂瑙掔殑浣嶇疆锛氳捣鐐圭殑y杞村潗鏍囥€備粠鍙充笅瑙掑埌宸︿笂瑙掞紝閫夋嫨璧风偣x>缁堢偣x锛涜捣鐐箉>缁堢偣y瀹藉害锛氳捣鐐箈-缁堢偣x銆傞珮锛氳捣鐐箉-缁堢偣y銆倄杞村乏涓婅鍧愭爣锛氱粓鐐箈鐨勫乏涓婅鍦▂杞翠笂鐨勫潗鏍囷細浠庡乏涓嬭鍒板彸涓婅閫夋嫨缁堢偣y銆傝捣鐐箈<缁堢偣x锛涜捣鐐箉>缁堢偣y缁堢偣y鐨勭粷瀵瑰€奸珮锛氳捣鐐箉-缁堢偣y鐨勫乏涓婅鍦▁杞翠笂鐨勫潗鏍囷細璧风偣x锛堟瘮杈儀鍧愭爣锛屽彇杈冨皬鐨勶紝鍙互浣跨敤Math.min鏂规硶锛夈€傚乏涓婅鍦▂杞翠笂鐨勫潗鏍囷細缁堢偣y锛堟瘮杈儁鍧愭爣锛屽彇灏忚€咃級銆備粠鍙充笂瑙掑埌宸︿笅瑙掞紝閫夋嫨璧风偣x>缁堢偣x锛涜捣鐐箉<缁堢偣y瀹藉害锛氳捣鐐箈-缁堢偣x銆傞珮锛氾紙璧风偣y-缁堢偣y锛夌殑缁濆鍊笺€傚乏涓婅鍦▁杞翠笂鐨勫潗鏍囷細缁堢偣x锛堟瘮杈儀鍧愭爣锛屽彇灏忚€咃紝鍙互鐢∕ath.min鏂规硶锛夈€倅杞翠笂宸︿笂瑙掔殑鍧愭爣锛氳捣鐐箉锛堟瘮杈儁鍧愭爣锛屽彇灏忚€咃級銆傛€荤粨鍏紡缁忚繃浠ヤ笂鍥涚鎯呭喌鐨勫垎鏋愶紝鏈€鍚庢€荤粨鍑鸿繖浜涘弬鏁扮殑鍏紡銆傛垜灏嗚捣鐐瑰懡鍚嶄负downPoint锛屽皢缁堢偣鍛藉悕涓簎pPoint銆傜煩褰㈢殑鍑犱釜鍙傛暟璁＄畻鍏紡濡備笅锛歯ewfabric.Rect({top:Math.min(downPoint.y,upPoint.y),left:Math.min(downPoint.x,upPoint.x),width:Math.abs(downPoint.x-upPoint.x),height:Math.abs(downPoint.y-upPoint.y),fill:'transparent',stroke:'#000'})Math.min:鍙栬緝灏忕殑涓よ€呯殑鍊糓ath.abs锛氳繑鍥炵粷瀵瑰€笺€傝繖涓や釜鏂规硶鏄疛S鎻愪緵鐨勩€備笉鏄庣櫧鐨勫缓璁綘鍘荤櫨搴︺€傚姩鎵嬪疄鏂芥垜鍦ㄨ繖閲屽彂甯冧互鏈満鏂瑰紡瀹炴柦鐨勪唬鐮佸拰璇勮銆傚鏋滄兂浜嗚В濡備綍鍦╒ue3鐜涓嬪疄鐜癋abric.js鑷敱缁樺埗鐭╁舰锛屽彲浠ュ湪浠ｇ爜浠撳簱涓壘鍒般€?!--宸ュ叿鏍?->
