鍍金池/ 問答/云計算  網絡安全  HTML/ 請問要如何修改viewer自帶的工具欄的按鈕圖標?

請問要如何修改viewer自帶的工具欄的按鈕圖標?

我想要修改viewer自帶的工具欄按鈕的圖標,請問有辦法修改?

回答
編輯回答
愛是癌

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

一、修改自定義圖示

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

// 獲取 pan tool 對象
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