鍍金池/ 問答/云計(jì)算  網(wǎng)絡(luò)安全  HTML/ 請(qǐng)問要如何修改viewer自帶的工具欄的按鈕圖標(biāo)?

請(qǐng)問要如何修改viewer自帶的工具欄的按鈕圖標(biāo)?

我想要修改viewer自帶的工具欄按鈕的圖標(biāo),請(qǐng)問有辦法修改?

回答
編輯回答
愛是癌

可以的,工具欄按鈕的圖標(biāo)是通過 woff (Web Open Font Format,Web開放字型格式) 的字型文文件以及 CSS 樣示表設(shè)置的,只要在網(wǎng)頁上加入自己的 woff 字型,并使用下面幾行代碼就可以修改了 ,以下 toolbar-panTool 及 Bootstrap Glyphicon為例:

一、修改自定義圖示

const toolbar = viewer.getToolbar();
const navTools = toolbar.getControl(  'navTools'  );

// 獲取 pan tool 對(duì)象
const panTool = navTools.getControl(  'toolbar-panTool'  );

// 修改圖示為 Bootstrap Glyphicon 的 Resize Vertical
panTool.setIcon( 'glyphicon' );
panTool.icon.classList.add( 'glyphicon-resize-vertical' );

二、改為原史圖示

const panTool = navTools.getControl(  'toolbar-panTool'  );

panTool.icon.classList.remove( 'glyphicon-resize-vertical' );
panTool.setIcon( 'adsk-icon-pan' );

圖示來源:https://getbootstrap.com/docs...

2017年2月19日 07:19