鏈枃浠嬬粛鐐硅禐+鍏虫敞+鏀惰棌=瀛︿範浜嗚鍔″繀寰€涓嬬湅銆傛湰鏂囦富瑕佽瑙ｅ浣曢攣瀹氳儗鏅浘鐗囥€傞攣瀹氳儗鏅浘鐗囷紝鍙渶瑕佽缃竴涓睘鎬у嵆鍙€傛湰鏂囧皢娣诲姞婊氬姩鐢诲竷銆佹嫋鍔ㄧ敾甯冪瓑鍔熻兘鏉ユ祴璇曗€滈攣瀹氳儗鏅浘鐗団€濈殑鏁堟灉銆傚簲璇ユ竻妤氱殑鏄紝鏃犺鎮ㄥ浣曟嫋鍔ㄥ拰缂╂斁鐢诲竷锛岃儗鏅浘鍍忛兘涓嶄細绉诲姩銆傚姩鎵嬬紪鐮佸紑濮?canvasid="canvasBox"width="600"height="600"style="border:1pxsolid#ccc;">scriptsrc="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js">灏哹ackgroundVpt璁剧疆涓篺alse鏄叧閿€備娇鐢ㄦ璁剧疆锛岃儗鏅浘鍍忓皢涓嶅啀绉诲姩骞朵笖涓嶄細鍙楀埌瑙嗗彛鍙樺寲鐨勫奖鍝嶃€傛坊鍔犺儗鏅浘锛岀煩褰㈠拰鍦嗗舰涓轰簡婕旂ず鏂逛究锛屾垜鎯宠缃竴寮犺儗鏅浘鍜屼袱涓浘褰㈠厓绱犮€傜缉鏀炬椂锛屽彧浼氫慨鏀瑰浘褰㈠厓绱狅紝鑳屾櫙鍥剧墖涓嶄細绉诲姩銆?/鐪佺暐閮ㄥ垎浠ｇ爜fabric.Image.fromURL('../../images/bg.jpg',img=>{canvas.setBackgroundImage(img)canvas.renderAll()})//circlecircle=newfabric.Circle({name:'circle',top:60,left:60,radius:30,//鍦嗗崐寰?0fill:'yellowgreen'})//rectanglerect=newfabric.Rect({name:'rect',top:30,//璺濆鍣ㄩ《閮?0pxleft:100,//璺濆鍣ㄥ乏渚?00pxfill:'orange',//濉厖姗欒壊width:60,//瀹藉害60pxheight:60//height60px})//鍦ㄧ敾甯冧笂娣诲姞涓€涓煩褰anvas.add(circle,rect)璁剧疆濂借儗鏅浘鐗囧悗锛屽湪閲嶆柊娓叉煋涔嬪墠鎵цcanvas.renderAll()锛屽惁鍒欏浘鐗囩湅璧锋潵娌＄敤銆傛坊鍔犳粴杞缉鏀句娇鐢ㄦ粴杞缉鏀剧敾甯冿紝闇€瑕佺洃鍚琺ouse:wheel銆?/鐪佺暐閮ㄥ垎浠ｇ爜canvas.on('mouse:wheel',opt=>{constdelta=opt.e.deltaY//婊氳疆锛屽悜涓婃粴鍔ㄤ负-100锛屽悜涓嬫粴鍔ㄤ负100letzoom=canvas.getZoom()//鑾峰彇鐢诲竷褰撳墠鐨勭缉鏀惧€紌oom*=0.999**deltaif(zoom>20)zoom=20if(zoom<0.01)zoom=0.01canvas.zoomToPoint({//鍏抽敭鐐箈:opt.e.offsetX,y:opt.e.offsetY},zoom)opt.e.preventDefault()opt.e.stopPropagation()})娣诲姞鎷栧姩鐢诲竷浜嬩欢鏈€鍚庢坊鍔犳嫋鍔ㄧ敾甯冧簨浠躲€傛嫋鏀惧寘鎷紶鏍囩偣鍑汇€侀紶鏍囩Щ鍔ㄣ€侀紶鏍囬噴鏀句笁涓簨浠讹細榧犳爣鐐瑰嚮锛歮ouse:downmousemove:mouse:movereleasethemouse:mouse:upcanvas.on('mouse:down',opt=>{//鎸変笅榧犳爣鏃惰Е鍙憀etevt=opt.ecanvas.isDragging=true//isDraggingisacustomcanvas.lastPosX=evt.clientX//lastPosXisacustomcanvas.lastPosY=evt.clientY//lastPosYiscustom})canvas.on('mouse:move',opt=>{//褰撻紶鏍囩Щ鍔ㄦ椂瑙﹀彂if(canvas.isDragging){letevt=opt.eletvpt=canvas.viewportTransform//focusedviewconvertvpt[4]+=evt.clientX-canvas.lastPosXvpt[5]+=evt.clientY-canvas.lastPosYcanvas.requestRenderAll()canvas.lastPosX=evt.clientXcanvas.lastPosY=evt.clientY}})canvas.on('mouse:up',opt=>{//榧犳爣鏉惧紑鏃惰Е鍙慶anvas.setViewportTransform(canvas.viewportTransform)//璁剧疆姝ょ敾甯冨疄渚嬬殑瑙嗗彛鍙樻崲canvas.isDragging=false})鎬荤粨鏈枃涓В閲婄殑鍔熻兘le骞朵笉闅撅紝鍙鍦ㄥ垵濮嬪寲鐢诲竷鐨勬椂鍊欏皢backgroundVpt璁剧疆涓篺alse鍗冲彲銆傛殏鏃惰兘鎯冲埌鐨勫簲鐢ㄥ満鏅槸閲嶅鍥炬鐨勮儗鏅紝寰呭畾銆傘€奲ackgroundVpt 鏂囨。銆嬫簮鐮佷粨搴撯瓙鑳屾櫙涓嶅彈瑙嗗彛鍙樻崲褰卞搷鎺ㄨ崘闃呰馃憤銆奆abric.js 涓婃爣鍜屼笅鏍囩殑浣跨敤鍋忔柟銆嬸煈嶃€奆abric.js 鍦嗗舰绗斿埛銆嬸煈嶃€奆abric.js 鑷敱缁樺埗鐭╁舰锛堥€愪竴鍒嗘瀽4绉嶆搷浣滄柟鍚戝甫鏉ョ殑褰卞搷锛夈€嬸煈嶃€奆abric.js 璧烽銆嬬偣璧?鍏虫敞+涔︾=瀛︿範浜?/p>
