鏈枃浠嬬粛銆傜偣璧?鍏虫敞+涔︾=浜嗚В鍒癴abric.js鍙互閫氳繃viewportTransform灞炴€ч厤缃甤anvas鐨勭獥鍙ｅ睘鎬с€傚惉璧锋潵寰堥珮绾э紝浣嗗疄闄呬笂杩欐槸鍘熺敓canvas涓凡缁忓瓨鍦ㄧ殑涓滆タ銆俧abric.js鐨剉iewportTransform鐩存帴澶嶇敤浜嗗師鐢焎anvas鐨則ransform()銆傚悓鏍锋槸fabric.js瀹樻柟鏂囨。涓墍璇寸殑viewportTransform:Array鍙樻崲锛堜竴涓狢anvas2DAPI鍙樻崲鐭╅樀锛夛紝閲嶇偣鏄鍙ｄ慨鏀箆iewportTransform甯歌鐨勪緥瀛愭槸鎷栧姩鐢诲竷锛堜笅涓€绡囦細璁插埌锛夈€傛湰鏂囩畝鍗曡涓€涓媣iewportTransform鐨勭敤娉曘€倂iewportTransformviewportTransform鏄竴涓湁6涓厓绱犵殑鏁扮粍锛岄粯璁ゅ€间负[1,0,0,1,0,0]銆備粠涓嬫爣0寮€濮嬶紝鍒嗗埆浠ｈ〃锛歔0]锛氭按骞崇缉鏀撅紙x杞存柟鍚戯級[1]锛氭按骞冲€炬枩锛坸杞存柟鍚戯級[2]锛氬瀭鐩村€炬枩锛坹杞存柟鍚戯級[3]锛氬瀭鐩磟oom(y杞存柟鍚?[4]:姘村钩绉诲姩(x杞存柟鍚?[5]:鍨傜洿绉诲姩(y杞存柟鍚?浣犳病鐪嬮敊锛屾垜鍐欏浜嗭紝涓婇潰鍒楀嚭鐨勫厓绱犱唬琛ㄨ繖涓剰鎬濆氨鏄紝杩欏拰nativecanvas鐨則ransform()鏂规硶鎺ユ敹鍙傛暟鐨勯『搴忔槸涓€鏍风殑锛岀湅璧锋潵濂解€滀贡鈥潂鍏跺疄杩欐秹鍙婂埌绾挎€т唬鏁扮殑鐭ヨ瘑銆傚湪canvas涓紝transform()鏂规硶涔熷彲浠ョО涓衡€滃彉鎹㈢煩闃碘€濄€傛垜浠垎鍒敤a,b,c,d,e,f鏇挎崲viewportTransform鐨勫叚涓厓绱狅細viewportTransform[a,b,c,d,e,f]銆傞偅涔堣繖鏍峰竷缃紝浼氫笉浼氭樉寰椾笉閭ｄ箞鈥滀贡鈥濆憿锛熸暟瀛︾浉鍏崇殑鐭ヨ瘑鎴戞殏鏃朵笉璇翠簡锛堟垜涔熻涓嶅ソ锛夈€傚涔爁abric.js鏈€閲嶈鐨勫氨鏄姩鎵嬪疄璺碉紝澶氬啓鍑犻亶灏卞彲浠ラ€愭笎鏄庣櫧鍏朵腑鐨勫師鐞嗕簡銆倂iewportTransform鐨?涓弬鏁颁富瑕佸疄鐜颁簡3涓姛鑳斤細缂╂斁銆佸€炬枩鍜屽钩绉汇€備负浜嗘紨绀烘晥鏋滐紝鎴戝厛鍒濆鍖栫敾甯冿紝娣诲姞2涓浘褰紙鐭╁舰鍜屼笁瑙掑舰锛夈€?canvasid="canvasBox"width="600"height="600"style="border:1pxsolid#ccc;">scaleaccordingto浠庡墠闈㈢殑鎻忚堪鎴戜滑鐭ラ亾锛岃缂╂斁鐢诲竷锛屾垜浠彲浠ヤ慨鏀箆iewportTransform涓嬫爣涓?鍜?鐨勫厓绱犮€傚鏋滀綘鎯冲皢x杞存柟鍚戝姞鍊嶏紝浣犲彲浠ヨ繖鏍峰仛//鐪佺暐閮ㄥ垎浠ｇ爜canvas.viewportTransform[0]=2濡傛灉浣犳兂灏唝杞存柟鍚戝噺灏戜竴鍊嶏紝浣犲彲浠ヨ繖鏍峰仛//鐪佺暐閮ㄥ垎浠ｇ爜canvas.viewportTransform[3]=0.5obliqueCut淇敼canvas鐨勬枩鍒囷紝x杞存柟鍚戜慨鏀箆iewportTransform涓嬫爣1鐨勫厓绱狅紝y杞存柟鍚戜慨鏀逛笅鏍囦负2鐨勫厓绱犮€倄杞存柟鍚戠殑Bevel锛?/鐪佺暐閮ㄥ垎浠ｇ爜canvas.viewportTransform[1]=0.1涔熷彲浠ヨ缃负璐熸暟//鐪佺暐閮ㄥ垎浠ｇ爜canvas.viewportTransform[1]=-0.1Bevelinthey杞存柟鍚?/鐪佺暐閮ㄥ垎浠ｇ爜鐢诲竷銆倂iewportTransform[2]=0.2y杞存柟鍚戠殑鏂滃垏涔熷彲浠ヨ缃负璐熸暟銆傝嚜宸辫瘯璇曞惂~Panning鍙渶瑕佽缃畍iewportTransform鐨勬渶鍚?涓厓绱狅紝闈炲父濂借銆倄杞存柟鍚戝钩绉?/鐪佺暐閮ㄥ垎浠ｇ爜canvas.viewportTransform[4]=10鍙互鐪嬪埌绮夎壊鐭╁舰锛岀煩褰㈢殑榛樿浣嶇疆鏄痶op10锛宭eft10锛屼笂闈㈢殑浠ｇ爜灏哻anvas骞崇Щ鍒板彸杈逛箻浠?0锛屽洜姝ゅ彲浠ョ洿瑙傚湴鐪嬪埌鐭╁舰璺濈鐢诲竷宸︿晶涓?0锛岃窛绂婚《閮ㄤ负10銆傞櫎浜嗗彲浠ヨ缃鏁帮紝杩樺彲浠ヨ缃礋鏁般€傚鏋渃anvas.viewportTransform[4]璁剧疆涓鸿礋鏁帮紝瀹冨皢鍚戝乏绉诲姩銆倅杞存柟鍚戝钩绉?/鐪佺暐閮ㄥ垎浠ｇ爜canvas.viewportTransform[5]=10setViewportTransform(vpt)闄や簡viewportTransform锛岃繕鏈変竴涓猻etViewportTransform鏂规硶銆傝鏂规硶鐨勫弬鏁版帴鏀朵竴涓暟缁勶紝鏁扮粍鍏冪礌鐨勫惈涔変笌viewportTransform绫讳技銆傝娉ㄦ剰锛寁iewportTransform鏄竴涓睘鎬с€俿etViewportTransform鏄竴涓柟娉曪紝杩欎釜鏂规硶灏辨槸浼犲叆鍙傛暟銆傚洜涓鸿繖涓や釜鐨勭敤娉曞緢鐩镐技锛岃繖閲屼笉鍐嶈禈杩般€備唬鐮佷粨搴撯瓙viewportTransform鎺ㄨ崘闃呰馃憤銆奆abric.js 浠庡叆闂ㄥ埌_ _ _ _銆嬸煈嶃€奆abric.js 鎺у埗鍏冪礌灞傜骇銆嬸煈嶃€奆abric.js 鍔ㄦ€佽缃瓧鍙峰ぇ灏忋€嬸煈嶃€奆abric.js 婵€娲昏緭鍏ユ銆嬸煈嶃€奆abric.js 鑷敱缁樺埗妞渾銆嬬偣璧?鍏虫敞+鏀惰棌=瀛︿範浜嗕唬鐮佷粨搴?/p>
