鏈枃浠嬬粛鐐硅禐+鍏虫敞+涔︾=浜嗚В鍒板湪HTML涓紝input杈撳叆妗嗚嚜鍔ㄨ幏寰楃劍鐐规湁涓ょ鏂瑰紡銆傛渶绠€鍗曠殑鏂规硶鏄皢autofocus灞炴€ф坊鍔犲埌input鏍囩銆傚啀娆＄偣鍑荤殑鏂瑰紡鏄娇鐢↗S鑾峰彇杈撳叆妗嗗厓绱狅紝鐒跺悗璋冪敤focus浜嬩欢閫夋嫨杈撳叆妗嗐€傚湪Fabric.js涓紝IText缁勪欢涔熸彁渚涗簡绫讳技鐨勬柟娉曘€侳abric.js鐨処Text鏄竴涓彲缂栬緫鐨勬枃鏈锛屽彲浠ュ湪椤圭洰杩愯鏃惰緭鍏ユ枃鏈€傚姛鑳藉叾瀹炵被浼间簬HTMLinput锛岃鐢ㄦ埛杈撳叆銆傞粯璁ゆ儏鍐典笅锛屽湪Fabric.js涓紝濡傛灉鍒涘缓IText鏃舵病鏈夋坊鍔犳枃鏈紝鎮ㄥ緢闅剧洿瑙傚湴瑙傚療鍒版偍鐨勮緭鍏ユ鍦ㄧ敾甯冧笂鐨勪綅缃€?canvasid="canvasBox"width="600"height="600"style="border:1pxsolid#ccc;">姝ゆ椂鐢诲竷鍜岃緭鍏ユ閮藉垱寤哄ソ浜嗭紝浣嗘槸寰堥毦鎵惧埌杈撳叆妗嗗湪鍝噷鑲夌溂銆傛縺娲昏緭鍏ユ瑕佽В鍐充笂闈㈢殑闂锛屽彲浠ユ縺娲昏緭鍏ユ銆?/鐪佺暐閮ㄥ垎浠ｇ爜iText.enterEditing()浣跨敤enterEditing()鏂规硶婵€娲昏緭鍏ユ銆傝繖鏃跺彲浠ョ湅鍒板厜鏍囨墍鍦ㄧ殑浣嶇疆鍦ㄩ棯鐑併€傘€奺nterEditing 鏂囨。銆嬭繘涓€姝ヤ娇鐢╡nterEditing()鍚庯紝杈撳叆妗嗚婵€娲伙紝涔熷彲浠ョ湅鍒板厜鏍囧湪闂儊銆備絾杩欐槸缁撴潫浜嗗悧锛熸垜浠彲浠ユ洿杩涗竴姝ワ紝浣跨敤FabricCanvas鐨剆etActiveObject()鏂规硶婵€娲婚€変腑鐨勫璞°€傝繖鏍烽€夋嫨杈撳叆妗嗙殑鏁堟灉浼氭洿鍔犳槑鏄俱€?/鐪佺暐閮ㄥ垎浠ｇ爜canvas.add(iText).setActiveObject(iText)iText.enterEditing()浠庝笂鍥惧彲浠ョ湅鍑猴紝鍔犲叆setActiveObject()鍚庯紝鍛堢幇鐨勬晥鏋滄洿鍔犳槑鏄俱€傘€妔etActiveObject 鏂囨。銆嬫€荤粨Fabric.js鍏跺疄骞朵笉闅撅紝姣旂洿鎺ヤ娇鐢ㄥ師鐢烠anvas瑕佺畝鍗曠殑澶氥€備娇鐢‵abric.js鏈€閲嶈鐨勬槸瑕佸鐪嬫枃妗ｏ紝鐒跺悗缁撳悎澶氫釜api鏉ュ埗浣滃悇绉嶆晥鏋渵浠ｇ爜浠撳簱猸怚Text婵€娲昏緭鍏ユ鎺ㄨ崘闃呰馃憤銆奆abric.js 杈撳嚭绮剧畝鐨凧SON銆嬸煈嶃€奆abric.js 缂╂斁鐢诲竷銆嬸煈嶃€奆abric.js IText璁剧疆鎸囧畾瀛楃棰滆壊鍜岃儗鏅壊銆嬸煈嶃€奵onsole.log涔熻兘鎻掑浘锛侊紒锛併€嬸煈嶃€婂墠绔渶瑕佺殑鍏嶈垂鍦ㄧ嚎api鎺ュ彛銆嬬偣璧?鍏虫敞+鏀惰棌=瀛︿範浜?/p>
