鏈枃浠嬬粛鐐硅禐+鍏虫敞+璇勮=浜嗚В鍒扮敤Fabric.js寮€鍙戞椂锛屽彲鑳介渶瑕佸厓绱犲眳涓€傛湰鏂囨€荤粨浜咶abric.js涓父鐢ㄧ殑鍏冪礌灞呬腑鏂规硶锛屽寘鎷細鍩轰簬WindowCanvas鐨勬按骞冲眳涓按骞冲眳涓甫鍔ㄧ敾鏁堟灉鐨勬按骞冲眳涓熀浜嶸iewport鐨勫瀭鐩村眳涓熀浜嶤anvas鐨勫瀭鐩村眳涓甫鍔ㄧ敾鏁堟灉鐨勫瀭鐩村眳涓悓鏃跺疄鐜版按骞冲拰鍨傜洿灞呬腑锛堜篃鍩轰簬绐楀彛鎴栫敾甯冿級銆傛澶栵紝杩樻€荤粨浜嗗湪canvas绾у埆鎸囧畾鍏冪礌灞呬腑鏂规硶锛屽苟鍦ㄥ厓绱犳湰韬皟鐢ㄥ眳涓柟娉曘€傞槄璇绘湰鏂囬渶瑕佹湁涓€瀹氱殑Fabric.js鍩虹銆傚鏋滀綘涓嶇煡閬揊abric.js鏄粈涔堬紝鍙互闃呰銆奆abric.js 浠庡叆闂ㄥ埌鑶ㄨ儉銆嬪垱寤轰竴涓熀纭€宸ョ▼涓轰簡鏂逛究婕旂ず锛屾垜鍦ㄥ垵濮嬪寲鐢诲竷鐨勬椂鍊欙細娣诲姞涓€寮犺儗鏅浘锛岃儗鏅浘鐨勫ぇ灏忓拰鍒濆鍖栫殑涓€鏍峰竼甯冦€傛坊鍔犱竴涓煩褰紝鐒跺悗灏嗗叾浣滀负瑕佸眳涓殑瀵硅薄銆傛坊鍔犻紶鏍囨粴杞粴鍔ㄦ椂缂╂斁鐢诲竷锛堟柟渚挎紨绀哄熀浜庤鍙ｅ拰鍩轰簬鐢诲竷鐨勫尯鍒級銆傛坊鍔犻紶鏍囨嫋鍔ㄧ敾甯冨钩绉讳綅缃紙鏂逛究婕旂ずwindow-based鍜宑anvas-based鐨勫尯鍒級銆?canvasid="canvasBox"width="600"height="600"style="border:1pxsolid#ccc;">浠ｇ爜寰堝锛屼絾鏄彲浠ヤ慨鏀筩anvas鐨勭缉鏀剧骇鍒紝婊氳疆鎷栧姩鏃舵嫋鍔╟anvas閮ㄥ垎婊氬姩銆傚叾瀹炰綘鑳藉啓鍑鸿繖浜涗唬鐮佷富瑕佹槸涓轰簡鏂逛究婕旂ず锛屼笅闈㈢殑渚嬪瓙涓彁鍒扮殑鍏冪礌閮芥槸rect锛屽洜涓鸿繖涓緥瀛愭槸鐢╮ect鏉ヨВ閲婄殑銆傚疄闄呴」鐩腑闇€瑕佹牴鎹綘瑕佹搷浣滅殑瀵硅薄杩涜璋冩暣銆侰enterHorizo鈥嬧€媙tally灏嗘寚瀹氱殑鍏冪礌姘村钩灞呬腑銆傚熀浜庣獥鍙?buttononclick="centerH()">姘村钩灞呬腑涓婇潰鎴戝啓浜?涓柟娉曪紝鏂规硶1鏄娇鐢╟anvas鏉ユ搷浣滄寚瀹氱殑瀵硅薄锛涙柟娉曚簩鏄牴鎹獥鍙ｈ皟鏁村厓绱犳湰韬殑浣嶇疆銆傛垜鐩存帴涓婂浘瑙ｉ噴涓嬶紝鏍规嵁绐楀彛姘村钩灞呬腑鍏冪礌鐨勭缉鏀炬瘮渚嬬Щ鍔ㄧ敾甯冩槸浠€涔堟儏鍐点€傜缉鏀惧拰绉诲姩鐢诲竷鍚庯紝canvas.viewportCenterObjectH鍜宺ect.viewportCenterH浠嶇劧浼氭寜鐓х獥鍙ｇ殑鏍囧噯姘村钩灞呬腑銆傚熀浜庣敾甯?/鐪佺暐閮ㄥ垎浠ｇ爜canvas.centerObjectH(rect)//鍏冪礌鏈韩鏍规嵁鐢诲竷灞呬腑//rect.centerH()缂╂斁绉诲姩鐢诲竷鐨勬儏鍐靛彲浠ュ拰鍩轰簬鐨勬晥鏋滃姣旂獥鎴枫€傚甫鍔ㄧ敾鏁堟灉//鐪佺暐閮ㄥ垎浠ｇ爜canvas.fxCenterObjectH(rect)甯﹀姩鐢绘晥鏋滈渶瑕佽皟鐢╟anvas涓殑fxCenterObjectH鏂规硶銆傚姩鐢诲眳涓槸鍩轰簬鐢诲竷锛岃€屼笉鏄獥鍙ｏ紒鍨傜洿灞呬腑鍨傜洿灞呬腑鍜屾按骞冲眳涓殑鐢ㄦ硶绫讳技锛屽彧鏄敼浜哸pi銆備娇鐢ㄢ€淗鈥濊〃绀烘按骞冲眳涓紝鈥淰鈥濊〃绀哄瀭鐩村眳涓€傚熀浜庣獥鍙?/鐪佺暐閮ㄥ垎浠ｇ爜canvas.viewportCenterObjectV(rect)//鍏冪礌鏈韩鏍规嵁绐楀彛灞呬腑//rect.viewportCenterV()鍩轰簬鐢诲竷//鐪佺暐閮ㄥ垎浠ｇ爜canvas銆俢enterObjectH(rect)//鍏冪礌鏈韩鏍规嵁canvas灞呬腑//rect.centerH()甯﹀姩鐢绘晥鏋?/鐪佺暐閮ㄥ垎浠ｇ爜canvas.fxCenterObjectV(rect)鍚屾椂姘村钩+鍨傜洿灞呬腑Fabric.js涔熸彁渚涘悓鏃舵按骞冲拰鍨傜洿灞呬腑鐨勫姛鑳姐€傚熀浜庣獥鍙?/鐪佺暐閮ㄥ垎浠ｇ爜canvas.viewportCenterObject(rect)//鍏冪礌鏈韩鏍规嵁绐楀彛灞呬腑//rect.viewportCenter()鍩轰簬鐢诲竷//鐪佺暐閮ㄥ垎浠ｇ爜canvas銆俢enterObject(rect)//鍏冪礌鏈韩鏍规嵁鐢诲竷rect灞呬腑.center()甯﹀姩鐢绘晥鏋滅洰鍓嶈繕娌℃湁鎵惧埌甯﹀姩鐢绘晥鏋滃悓鏃跺瀭鐩村拰姘村钩灞呬腑鐨刟pi锛屽彲浠ヨ瘯璇曡皟鐢╢xCenterObjectH鍜宖xCenterObjectV鍚屾椂//鐪佺暐閮ㄥ垎浠ｇ爜functionfxCenter(){canvas.fxCenterObjectH(rect)canvas.fxCenterObjectV(rect)}浠ｇ爜浠撳簱猸怓abricCenteringElement鎺ㄨ崘闃呰馃憤銆奆abric.js 涓婃爣鍜屼笅鏍囩殑浣跨敤鍋忔柟銆嬸煈嶃€奆abric.js 缂╂斁鐢诲竷銆嬸煈嶃€奆abric.js 绗斿埛鍒板簳鎬庝箞鐢紵銆嬭禐+鍏虫敞+鏀惰棌=瀛︿範浜?/p>
