原创 eslint配置須知【轉】
Possible Errors 可能的錯誤或邏輯錯誤 no-cond-assign 禁止條件表達式中出現模棱兩可的賦值操作符 no-console 禁用console no-constant-condition 禁止在條件中使用常量表
2021-05-17 14:09:38
原创 cke點擊時初始化編輯器後光標恢復的方法
業務場景 1、使用了CKEDITOR編輯器 2、文本是使用contenteditable="true"的div容器 3、點擊文本時才初始化編輯器 4、問題：編輯器初始化後光標會重置到開始處，如何將光標重置到點擊處 解決方案 1、在點擊文本
2021-04-10 14:08:57
原创 使用canvas將多圖合成一張圖片方法及問題解決
本篇主要記錄使用使用canvas將多圖合成一張圖片的方法及遇見的幾個坑。 實現代碼及思路 // 把多張圖拼接成一張 canvasDrawImage(imgData, obj) { let self = this;
2021-03-27 14:09:49
原创 使用 SVG transform rotate 解決畫框中的數字跟隨旋轉的問題
問題描述 在圖片上畫框標註數字，旋轉畫布後，數字隨之旋轉，可讀性不強，要求修改成無論畫布怎麼旋轉，數字都是正向顯示~ 原交互圖示： 解決方案 先看下 dom 的結構 然後看下下面簡單的代碼 // 獲取畫框的 let rectNo
2021-03-23 14:16:28
原创 使用CSS的clip-path實現圖片剪切效果
最近有個業務需求：校對圖片文本信息，如下圖所示，當鼠標點擊文本中某一行的時候，文本上會顯示對應行圖片同時左側會顯示對應位置的畫框。 clip-path 今天要說的主題是：如何剪切原圖中的部分圖片？（前提是後端已經傳給了我們對應行在圖片上的
2021-01-13 14:10:02
4
原创 css 和 svg 實現螞蟻行軍效果
當對框進行選中操作的時候，我們經常使用的是對邊框換個顏色高亮顯示。但是當框很多的時候，換個顏色還是不夠顯眼，那麼這時候就該進行些sao操作了~ 上面的效果就是我們經常說到的“螞蟻行軍”效果，廢話不多說，直接上可執行代碼 CSS實現 <di
2021-01-13 14:10:02
原创 Vscode設置vue文件換行問題
問題 使用vscode編輯vue文件的時候，會使用vetur。它默認的配置的換行機制尤其是js的換行比如下圖，讓人感覺有點不舒服 解決方案 選擇 文件->首選項->設置 或者直接打開 setting.json, 進行下面的配置即可
2020-12-11 13:07:12
11
原创 解決vue本地構建熱更新卡頓的問題“75 advanced module optimization”解決方案
vue項目在本地構建後，每次熱更新都會卡在 "75 advanced module optimization" 的地方不動了。很影響開發效率有木有，網上一搜給的方案(babel-plugin-dynamic-import-node)試了下各
2020-12-02 13:07:07
原创 Canvas實現放大鏡效果完整案例分析（附代碼）
本文主要記錄 canvas 在圖像、文字處理、離屏技術和放大鏡特效的實現過程中使用到的API。先看下效果吧： 一張模糊的圖片： 鼠標點擊任意位置，產生放大效果： 哇塞~ 一個帥哥，哈哈哈哈~ 1、顯示模糊照片 其實一般的交互不是模糊照片
2020-11-22 13:06:53
原创 如何給input或textarea文字加背景色
需求說明 如果要實現一個需求，如下圖，在一個textarea中加入文字加背景色，該怎麼處理呢？ 答案：“很簡單啊！直接給textarea加個background-color的背景顏色啊！” 那好，如果實現下面的需求呢？並且要求輸入的時候，
2020-11-22 13:06:53
原创 關於點擊彈框外部區域彈框關閉的交互處理（前端JS）
常見需求場景 前端在處理交互的時候，經常遇到這樣的場景，點擊一個按鈕，出現一個彈框，點擊外部區域，彈框關閉。 解決方法 思路說明： 1、給彈框的div父級都加個類名,如: 2、在document綁定一個點擊事件，獲取當前點擊元素的類名，
2020-11-21 13:06:56
原创 vue項目中使用ts（typescript）入門教程
最近項目需要將原vue項目結合ts的使用進行改造，這個後面應該是中大型項目的發展趨勢，看到一篇不錯的入門教程，結合它並進行了一點拓展記錄之。本文從安裝到vue組件編寫進行了說明，適合入門。 1、引入Typescript npm instal
2020-09-19 13:06:59
2
原创 svg / d3-force 中如何給link的label文字加底色
上篇介紹的使用濾鏡給force中的節點文字加底色，但是同樣的方法並不適合link上文字的底色。因爲link是可以360度旋轉的。而濾鏡中的寬高一般是跟着文字的，svg中文字的寬高並沒有伴隨角度，（這裏我沒有找到給濾鏡加角度的方法，如果有可以
2020-09-15 13:07:09
原创 svg 如何使用濾鏡給文字加底色
使用svg繪圖的過程中發現，給文本加底色是無法用屬性或者css實現的，一般情況下會在文字的基礎上繪製一個矩形，放在文字底下。但是對於不知文字大小，長度，語言版本的情況下就有點麻煩了，這種情況下使用濾鏡的方法可以更方便。【轉載本文請說明出處，
2020-09-15 13:07:09
15
原创 Vue和d3.js(v4)力導向圖force結合使用，v3版本升級v4【一】
前段時間因爲參與項目涉密，所以一直沒有更新博客，有些博友給我私信或者留言要部分博文的源碼，因爲我的電腦更換，demo的源碼沒有備份 所以無法提供。大家可針對具體問題問我，有空我定會回覆的。另外轉發文章請說明出處，謝謝關注！ 之前有多篇博文介
2020-09-14 13:38:51