原创 HTML之拖放操作draggable

最近接到一拖拽交互操作,開始的時候就想着傳統的mouseUp,mouseDown,mouseMove之類的方法。但是偶然看到H5的draggable屬性,覺得更香啊!先看下實現的效果。 如圖所示的場景就很適合使用該API,拖拽的過程中鼠標

原创 玩轉SVG之線性轉換

3月在部門組織了一場關於SVG的培訓,把沒有分享到博客的資料放到博文上吧,因爲PPT寫過了,就截圖放上了,比較懶,懶得再打字了,嘿嘿~ 1. 線性變換屬性 2. dom轉SVG的座標點 核心代碼 document.addE

原创 這個批量引入組件的方法,挺酷

我們在寫vue組件的時候,如果在一個組件裏引入多個組件,一般的寫法是這樣的 完全沒毛病,但是這樣的寫法就有點累贅,每次新增一個組件又要添加多處,原來現在已經有更方便的寫法了,實踐了一下,非常nice const routes = {};

原创 Three.js之繪製中文文字並跟隨物體

本週更新的需求是物體上顯示文字信息,效果圖如下: 加載字體 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'; const loader =

原创 transform中的scale跟translate組合使用問題【轉】

在項目中使用scale的時候遇到一個場景:需要對一個指定的元素進行縮放,但同時又要保持其的相對的位置不變,這個時候就需要使用到CSS中的scale跟translate了。 比如,我有一個300*400的元素(並且該元素不支持使用width跟

原创 Three.js之根據頂點信息繪製立方體並給面設置顏色

使用Three.js繪製立方體是最基本的功能,我們可以使用new THREE.BoxGeometry(width, height, depth)根據長、寬、高等信息直接繪製,也可以根據點的信息進行繪製。而根據點的信息進行繪製這個功能,由於T

原创 Three.js之繪製物體的邊框及修改lineWidth

本博文主要記錄如何使用three.js繪製物體的邊框及修改其lineWidth。three.js是個技術點比較多,查詢資料又比較少的框架,單單就這個修改lineWidth就是一個坑。先放一個動態的效果圖,需要的小夥伴可以看下相關實現。 開

原创 Three.js之常用方法集錦(修改顏色,修改寬高,旋轉角度等)

本文主要記錄使用Three.js過程中使用的常用方法: 1. 修改顏色 setStyle 找到物體對應的material,調用方法: material.color.setStyle('#ca14cb'); // 設置成紫色,支持css顏色值

原创 基於Threejs的3D繪圖入門之基礎篇【轉】(一)

最近接手了一位離職同事做的項目,涉及到3D繪圖,他走之前進行了一些調研。本文及後續的博文,主要針對基礎知識及項目迭代優化過程中遇到的問題進行記錄。本文屬於基礎概念篇,該篇文檔源於我的同事調研結果,轉載記錄用於日後查閱。 一、3D基本要素 1

原创 CSS overflow-wrap新屬性值anywhere

在項目中遇到這樣一個問題,如下圖所示,當輸入純數字的時候,文本沒有按我們預想的樣子去換行,使用了 overflow-wrap: break-word後沒啥用,查了一下,需要使用overflow-wrap: anywhere; 記錄 a

原创 正則表達式功能集錦

1、縱向模糊匹配 正則: /[abc]/ 匹配:表示字符可以是字符中a,b,c的任何一個 正則:/[0-9a-zA-Z]/ 匹配:數字或者字母 2、排除字符 正則:[^abc] 匹配:除a,b,c之外的任一字符 正則:/^[^\d]

原创 簡潔大方的sync 和 update

場景描述 我們經常使用 prop 和 emit 的組合來實現父子之間的通信,如果簡單的場景下想父子組件相互修改,可以使用.sync 和 update組合。 代碼案例 父組件 傳遞 prop <comp :foo.sync="bar"></c

原创 我還不知道的一個方法 scrollintoview

案例場景 如下圖所示,點擊保存的時候,想把沒有標註到頁碼的圖片滾動到可視區域。 當我還在考慮計算標註圖片距離父容器的高度,然後設置容器的scrollTop的時候,旁邊的大神嗤之以鼻的說,你爲什麼不用scrollintoview? 什麼是s

原创 快速插入文本並恢復光標的方法execCommand

場景描述 一個可編輯的div,在輸入文本後,需要進行一些交互插入文本如右鍵插入,插入文本後需要恢復光標。 使用execCommand命令插入文本 一般情況下,我們會使用selection獲取光標的位置後,插入文本或者html然後再恢復光標。

原创 Vscode使用git插件提交代碼

平時習慣使用命令行提交代碼,但是會發現有時候比較繁瑣且當我們只要提交某個或某些文件的時候,還要輸入文件對應的路徑纔行,有點麻煩,使用Vscode的git插件會更便捷,提高平時的效率。這裏記錄下常用的操作。 1 查看更新 一旦有代碼更新,這裏