鎸佺画鍒涗綔锛屽姞閫熸垚闀匡紒杩欐槸鎴戝弬鍔犫€滄帢閲戞瘡鏃ユ柊椤圭洰路6鏈堟洿鏂版寫鎴樿禌鈥濈殑绗?9澶╋紝鐐瑰嚮鏌ョ湅娲诲姩璇︽儏鏈夆€滄枩浣撯€濆姛鑳姐€侳abric.js涔熶笉渚嬪銆傛湰鏂囦富瑕佽瑙ｅ浣曞湪Fabric.js涓皢IText鍒涘缓鐨勬枃鏈彉涓烘枩浣撱€傚叾涓寘鎷細鍒涘缓鏂囨湰鏃惰缃枩浣擄紝璁╃敤鎴锋墜鍔ㄨ缃枩浣揑nitializationCanvasInitializationCanvas鏄繀椤荤殑锛屽悗闈㈣瑙ｇ殑鍐呭灏嗗熀浜庢湰鑺備唬鐮佸紑鍙戙€?canvasid="c"width="300"height="300"style="border:1pxsolid#ccc">鍒濆鍖栦唬鐮佸緢绠€鍗曪紝濡傛灉浣犱笉鐔熸倝涓婇潰鐨勫唴瀹筩ode鎳傜殑鍙互鍏堢湅鐪嬨€奆abric.js 浠庡叆闂ㄥ埌鑶ㄨ儉銆嬪湪鍒涘缓鏂囨湰鏃惰缃枩浣揑Text璁剧疆鏂滀綋鍙互浣跨敤italic鎴栬€卭blique杩欎袱涓叧閿瓧锛屽彇鍏跺ソ銆傛湰鏂囦娇鐢ㄦ枩浣撴潵璇存槑銆?/鐪佺暐閮ㄥ垎浠ｇ爜constiText=newfabric.IText('helloworld',{fontStyle:'italic'})鍒濆鍖栨椂璁剧疆鏂滀綋锛屽彧闇€灏唂ontStyle璁剧疆涓烘枩浣撴垨鏂滀綋鍗冲彲銆備互涓婁唬鐮佸叏鏂囩敤鏂滀綋琛ㄧず銆傚鏋滃彧鎯宠缃煇涓瓧绗︼紝鍙互浣跨敤涓嬮潰鐨勬柟娉?/鐪佺暐閮ㄥ垎浠ｇ爜constiText=newfabric.IText('helloworld',{styles:{0:{1:{fontStyle:'鏂滀綋'}}}})鎴戝皢鈥渆鈥濊缃负鏂滀綋銆備娇鐢ㄦ牱寮忓彲浠ラ€愯璁剧疆銆傗€渆鈥濅綅浜庣1琛岀殑绗?涓瓧绗︼紝璁＄畻琛屽拰鍒椾粠涓嬫爣0寮€濮嬶紝鎵€浠モ€渆鈥濈殑浣嶇疆鏄?-1銆傛墜鍔ㄨ缃枩浣撴墜鍔ㄨ缃枩浣撳垎涓?绉嶆儏鍐碉細鍏ㄦ枃鏂滀綋/鎭㈠榛樿閫変腑鏂囨湰涓烘枩浣?鎭㈠榛樿涓轰簡鎵嬪姩璁剧疆锛屾垜鍦ㄩ〉闈笂鍔犱簡涓€涓寜閽€傛搷浣滃鍥?buttononclick="italic()">Italicscript>constcanvas=newfabric.Canvas('c')//鍒涘缓鐢诲竷骞剁粦瀹氬厓绱燾onstiText=newfabric.IText('helloworld')//鍒涘缓鏂囨湰canvas.add(iText)//娣诲姞鏂囨湰鍒癴unctionitalic()incanvas{letactiveTxt=canvas.getActiveObject()if(!activeTxt)returnif(activeTxt.isEditing){//缂栬緫鐘舵€侊紝灏嗛€変腑鐨勬枃瀛楀彉涓烘枩浣撴垨鎭㈠榛樿鎿嶄綔conststate=activeTxt.getSelectionStyles().find(item=>item.fontStyle!=='italic')if(!state||(JSON.stringify(state)==='{}'&&activeTxt['fontStyle']==='鏂滀綋')){activeTxt.setSelectionStyles({'fontStyle':'normal'})}else{activeTxt.setSelectionStyles({'fontStyle':'italic'})}}else{//閫夋嫨鐘舵€侊紝灏嗗叏鏂囧彉涓烘枩浣撴垨鎭㈠榛樿鎿嶄綔if(activeTxt['fontStyle']==='italic'){activeTxt.fontStyle='normal'lets=娲诲姩鏂囨湰銆俿tylesfor(letiins){for(letjins[i]){s[i][j].fontStyle='normal'}}}else{activeTxt.fontStyle='italic'lets=activeTxt.stylesfor(letiins){for(letjins[i]){s[i][j].fontStyle='italic'}}}}canvas.renderAll()}浠ヤ笂浠ｇ爜鎬濊矾鍜屾楠ゆ槸锛氶€氳繃canvas.getActiveObject()鏂规硶鑾峰彇褰撳墠閫変腑鐨勫璞°€傚鏋滃綋鍓嶆病鏈夐€夋嫨鏂囨湰锛屽垯涓嶄細鎵ц浠讳綍鎿嶄綔銆傞€氳繃isEditing灞炴€ф娴嬫枃鏈槸鍚︽鍦ㄧ紪杈戙€傚湪缂栬緫鐘舵€佷笅锛屽皢閫変腑鐨勬枃瀛楀彉涓烘枩浣撴垨鎭㈠榛樿鎿嶄綔銆傚湪闈炵紪杈戠姸鎬佷笅锛屽叏鏂囨樉绀轰负鏂滀綋鎴栨仮澶嶉粯璁ゆ搷浣溿€備互涓婃槸鏈枃鐨勪富瑕佸唴瀹广€備唬鐮佷粨搴撯瓙Fabric.jsIText鎵嬪姩璁剧疆鏂滀綋鎺ㄨ崘闃呰馃憤銆奆abric.js 鎺у埗鍏冪礌灞傜骇銆嬸煈嶃€奆abric.js 涓婂垝绾裤€佷腑鍒掔嚎锛堝垹闄ょ嚎锛夈€佷笅鍒掔嚎銆嬸煈嶃€奆abric.js 婵€娲昏緭鍏ユ銆嬸煈嶃€奆abric.js 杈撳嚭绮剧畝鐨凧SON銆嬸煈嶃€奆abric.js 鍔ㄦ€佽缃瓧鍙峰ぇ灏忋€嬬偣璧?鍏虫敞+涔︾=瀛︿範浜?/p>
