当前位置: 首页 > Web前端 > HTML

Fabric.js将元素拖放到画布上

时间:2023-03-28 13:43:46 HTML

鏈枃浠嬬粛鐐硅禐+鍏虫敞+涔︾=瀛︿細浜嗗涔燜abric.js锛屾垜鐨勫缓璁槸鐪嬫枃妗h€屼笉鏄痙emo銆傛湰鏂囧疄鐜扮殑鍔熻兘锛氬皢鍏冪礌鎷栧叆鐢诲竷锛岀敓鎴愮浉搴旂殑鍥惧舰鎴栧浘鐗囥€傛晥鏋滃涓嬪浘鎵€绀猴細鎬濊矾瑕佸疄鐜颁笂杩版晥鏋滐紝闇€瑕佽€冭檻浠ヤ笅鍑犵偣锛氬厓绱犲叿鏈夋嫋鏀惧姛鑳姐€傚彲浠ュ湪鐢诲竷涓敓鎴愮浉搴旂殑鍏冪礌銆侰anvas鏈夌缉鏀剧殑鍙兘鎬с€傜敾甯冩湁鍙兘绉诲姩銆傜敾甯冪殑浣嶇疆澶ф鍦ㄩ〉闈㈢殑鏌愬銆傚湪鎯呭喌3鍜?涓紝涔熷彲浠ュ湪绮剧‘浣嶇疆鐢熸垚鍏冪礌銆傚熀浜庝互涓婂嚑鐐癸紝鎴戝緱鍑轰簡浠ヤ笅瑙e喅鏂规銆傝В鍐虫柟妗?锛氳鍚敤HTML鍏冪礌鐨勬嫋鍔紝鍙渶灏哾raggable灞炴€ц缃负true銆傛柟妗堜簩锛氬湪Fabric.js涓垱寤哄厓绱犺鍙傝€冦€奆abric.js 浠庡叆闂ㄥ埌鑶ㄨ儉銆嬬殑鍩烘湰鍥惧舰绔犺妭锛屽垱寤哄浘鐗囪鍙傝€冨浘鐗囩珷鑺傘€傝В鍐虫柟妗?锛氱缉鏀剧敾甯冩垜鍦ㄣ€奆abric.js 缂╂斁鐢诲竷銆嬩腑瑙i噴杩囥€傝В鍐虫柟妗?锛氭垜鍦ㄣ€奆abric.js 鎷栨嫿骞崇Щ鐢诲竷銆嬩腑瑙i噴浜嗙Щ鍔ㄧ殑鐢诲竷銆傝В鍐虫柟妗?锛氱敾甯冪殑宸︿笂瑙掍笉涓€瀹氭槸body鐨勫乏涓婅锛屽嵆榧犳爣褰撳墠浣嶇疆鍙兘涓庣敾甯冨搴旂殑鍧愭爣涓嶅悓锛岄渶瑕佸姞娉曡绠楀噺娉曘€傛柟妗堝叚锛欶abric.js鎻愪緵浜嗗皢榧犳爣褰撳墠鍧愭爣杞崲涓虹敾甯冨搴旂殑鐪熷疄鍧愭爣鐨勬柟娉曘€傛鏂规硶绉颁负restorePointerVpt銆傞潬鐫€鎵嬶紝鍒嗗嚑姝ユ參鎱㈠疄鐜颁簡涓婇潰鐨勫姛鑳姐€傛垜鐭ラ亾浣犲緢鐫€鎬ワ紝浣嗕笉瑕佹媴蹇冨垱寤虹敾甯冨拰鍏冪礌

涓婇潰鐨勪唬鐮佷娇鐢‵abric.js缁戝畾椤甸潰涓婄殑鐢诲竷锛屽苟鍒涘缓涓€涓矇绾㈣壊鐨勭煩褰€傛寜浣廰lt鍚庯紝鐢ㄩ紶鏍囧湪canvas鐢诲竷涓婃嫋鍔ㄣ€傚湪鐢诲竷涓婃粴鍔ㄩ紶鏍囨粴杞彲缂╂斁鐢诲竷銆傚乏渚х殑鍏冪礌鍒楄〃涔熷皢draggable灞炴€ц缃负true锛屽厓绱犲叿鏈夋嫋鍔ㄥ姛鑳姐€備负浜嗙洃鎺ц鏀惧叆鐢诲竷鐨勫厓绱狅紝鎴戜滑杩橀渶瑕佷娇鐢ㄤ竴涓彉閲忔潵璁板綍褰撳墠琚嫋鍔ㄧ殑鏄粈涔堝厓绱犮€?!--鐪佺暐閮ㄥ垎浠g爜-->front浠g爜宸茬粡鐭ラ亾鎷栧姩鏃堕渶瑕佺敓鎴愪粈涔堢被鍨嬧€嬧€嬬殑鍏冪礌锛岀幇鍦ㄩ渶瑕佺煡閬撳湪鍝噷鐢熸垚鐢诲竷锛坸鍜寉鍧愭爣锛夈€傚綋榧犳爣鏉惧紑鏃讹紝闇€瑕佽绠楅紶鏍囧湪鐢诲竷涓婄殑鍧愭爣銆傝繖閲岀殑鍧愭爣鎸囩殑鏄敾甯冨湪椤甸潰涓婄殑浣嶇疆杞崲鍚庣殑鍧愭爣锛岀敾甯冪殑鎷栧姩鍜岀缉鏀句篃鏄绠楀嚭鏉ョ殑銆傛垜鐨勫仛娉曟槸浠巆anvas鍏冪礌鐨刧etBoundingClientRect()鏂规硶杩斿洖鐨勫璞′腑鑾峰彇top鍜宭eft鏁版嵁銆傝繖涓や釜鏁版嵁鍒嗗埆鏄痗anvas鍏冪礌璺濈椤甸潰椤堕儴鍜屽乏渚х殑璺濈銆傜劧鍚庣敤榧犳爣褰撳墠鍧愭爣鍑忓幓鐢诲竷鍒伴〉闈㈤《閮ㄦ垨宸︿晶鐨勮窛绂伙紝灏卞彲浠ヨ绠楀嚭榧犳爣鍦ㄧ敾甯冧笂鐐瑰嚮鐨勭湡瀹炲潗鏍囥€備絾鏄痗anvas鍙兘浼氳鎷栧姩鍜岀缉鏀撅紝鎵€浠ラ渶瑕侀€氳繃Fabric.js鎻愪緵鐨剅estorePointerVpt()鏂规硶杩涜鍧愭爣鍙樻崲銆傛墍浠ョ敤涓嬮潰鐨勪唬鐮併€?/鐪佺暐閮ㄥ垎浠g爜...canvas.on('drop',function(opt){//鐢诲竷鍏冪礌涓庢祻瑙堝櫒宸︿晶鍜岄《閮ㄤ箣闂寸殑璺濈letoffset={left:canvas.getSelectionElement().getBoundingClientRect().left,top:canvas.getSelectionElement().getBoundingClientRect().top}//灏嗛紶鏍囧潗鏍囪浆鎹负鐢诲竷鍧愭爣锛堟湭缂╂斁鍜屽钩绉诲潗鏍囷級letpoint={x:opt.e.x-offset.left,y:opt.e.y-offset.top,}//杞崲鍚庣殑鍧愭爣锛宺estorePointerVpt涓嶅彈绐楀彛鍙樻崲褰卞搷杞崲锛屾垜浠彲浠ュ湪杩欎釜鍧愭爣涓婄敓鎴愬厓绱犮€?/鐪佺暐浜嗕竴浜涗唬鐮?..canvas.on('drop',function(opt){//鐪佺暐浜嗕竴浜涗唬鐮?..switch(currentType){case'rect':createRect(pointerVpt.y,pointerVpt.x)breakcase'circle':createCircle(pointerVpt.y,pointerVpt.x)breakcase'img':createImg(pointerVpt.y,pointerVpt.x)break}//鍒涘缓瀹屽厓绱犲悗锛屾妸褰撳墠鎿嶄綔鐨勫厓绱犵被鍨嬭缃洖鏉onullcurrentElType=null})//鍒涘缓涓€涓煩褰unctioncreateRect(top,left){canvas.add(newfabric.Rect({top,left,width:60,height:60,fill:'pink'}))}//鍒涘缓涓€涓渾functioncreateCircle(top,left){canvas.add(newfabric.Circle({top,left,radius:30,fill:'pink'}))}//鍒涘缓涓€涓浘鍍忓厓绱爁unctioncreateImg(top,left){fabric.Image.fromURL('./picture.jpg',oImg=>{oImg.top=topoImg.left=leftcanvas.add(oImg)})}浠g爜浠撳簱鍓嶉潰婊′簡鎬濊矾锛屼竴娈典竴娈典唬鐮併€傚鏋滈渶瑕佸畬鏁寸増浠g爜锛屽彲浠ユ墦寮€閾炬帴鑷鑾峰彇銆傗瓙Fabric.js鎷栨嫿鍒涘缓鍏冪礌鎺ㄨ崘闃呰馃憤銆奆abric.js 姗$毊鎿︾殑鐢ㄦ硶锛堝寘鍚仮澶嶅姛鑳斤級銆嬸煈嶃€奆abric.js 鐩戝惉鍏冪礌鐩镐氦(閲嶅彔)銆嬸煈嶃€奆abric.js 鑷畾涔夊瓙绫伙紝鍒涘缓灞炰簬鑷繁鐨勫浘褰€嬸煈嶃€奆abric.js 鑷敱缁樺埗鍦嗗舰銆嬸煈嶃€奆abric.js 缂╂斁鐢诲竷銆嬨€奆abric.js 鍙樻崲瑙嗙獥銆嬸煈嶃€奆abric.js 鎷栨嫿骞崇Щ鐢诲竷銆嬬偣璧?鍏虫敞+涔︾=瀛︿範浜嗕唬鐮佷粨搴?/p>