手擼一個線上css三角形生成器
阿新 • • 發佈：2020-12-09
為了提高前端開發效率, 筆者先後寫了上百個前端工具, 有些是給公司內部使用的, 有些單純是因為自己太“懶”, 不想寫程式碼, 所以才“被迫”做的. 接下來介紹的一款工具——css三角形生成器也是因為之前想要解放設計師的生產力, 自己又懶得切圖或者寫
css程式碼, 所以想來想去還是自己做一個能自動生成css三角形程式碼的工具吧.接下來筆者就來帶大家介紹一下這個工具的用途和實現方案, 方便大家後續可以擴展出更多的“懶人工具”.
線上css三角形生成器預覽
由預覽動畫我們可以看到通過線上工具我們可以輕鬆配置各種想要的三角形, 並且能實時檢視css程式碼. 開發完這個工具之後筆者再也不用擔心還需要手寫三角形程式碼了. (上班摸魚也成了可能, 確實很多時候就是不想寫程式碼還想要有錢拿) 在文末筆者會附上css工具的線上地址, 接下來我們來看看具體實現流程.實現css三角形生成器
因為這個工具的需求來自於前端, 所以肯定是要對css和js程式設計有一定的基礎, 比如css3的transformtransition, 佈局, 盒模型,border邊界特性等.和筆者之前寫的任何一個開源工具一樣, 在開發專案前一定要明確需求和目標, 這裡筆者簡單整理一下需求:
- 生成任何大小的三角形(size)
- 生成不同位置的三角形(direction)
- 生成不同角度的三角形(rotate)
- 生成不同背景色的三角形(color, 其實這個實不實現無所謂, 主要是筆者連這個程式碼都懶的寫)
css生成器介面, 如下:
有了原型圖, 我們可以得到如下的任務細分圖:
這裡筆者要提的一點是其實以上流程對於任何專案都適用, 包括你遇到的難解的問題, 都可以一步步把思路先理清楚, 把大目標拆解為一塊塊的小目標, 然後逐個擊破, 這樣大難題也就解決了.接下來我們先分析一下用css1.css畫三角形的原理
其實筆者在之前的文章中也分享過3種以上的使用css實現三角形的方案, 這裡筆者介紹一個通用的方法, 也就是用border來實現三角形, 我們先來看下面的圖示:
以上是展示了當box元素的width小於自身border寬度時的樣子以及當box寬度為零而border-width不為零時的樣子. 通過圖形一分析是不是很容易聯想到如果我只要一個邊有顏色,其他都為透明面是不是就能變成三角形了呢?的確也是這麼實現的, 知道這個原理之後我們來繼續往下實現所見即所得的“三角形”.
2.編輯器實現
編輯器實現也是前端老生長談的話題了, 筆者在H5-Dooring專案中寫過一個非常複雜的編輯器, 但是這裡我們只要需要一個靜態且簡單的編輯器就夠了. 如下圖的介面:vue3+ element plus,react + antd4.0, 筆者這裡採用react方案實現, 顏色選擇器採用社群比較有名的react-color.編輯器介面的程式碼筆者就不一一介紹了, 相信大家都能實現, 我們這裡來說一下樣式資料共享邏輯:
我們要想保證預覽區域和css程式碼預覽區域能隨表單值變化而實時變化, 這裡一定要將表單資料共享出來, 我們可以用react元件的state或者vue的vuex(雖然不用vuex也可以將data提升)來共享狀態.
3. 預覽區域實現
預覽區域實現其實有了以上的分析其實很好實現了, 只需要利用共享的form資料來繫結到三角形元素的樣式上即可. 畫布的背景這裡筆者也是用css實現的, 如下圖:
感興趣可以cv一下, 這程式碼如下:
.previewArea{
display:inline-block;
width:360px;
height:360px;
background:#eee;
background-image:linear-gradient(45deg,rgba(0,0,0,.2)25%,transparent0,transparent75%,rgba(0,0,0,.2)0),
linear-gradient(45deg,rgba(0,0,0,.2)25%,transparent0,transparent75%,rgba(0,0,0,.2)0);
background-size:30px30px;
background-position:00,15px15px;
}
css的border的幾個方向屬性都會變, 比如三角形的方向向上時, 我們的css如下:
{
border-width:060px60px100px;
border-color:transparenttransparent#06ctransparent;
}
css如下:
{
border-width:100px60px060px;
border-color:#06ctransparenttransparenttransparent;
}
if else就是switch, 說實話switch只適合8個條件一下的判斷), 所以筆者這裡用物件法來解決它, 並將其封裝成一個函式:
constgetBorderWidthAndColor=(direction:string,w:number,h:number,color:string)=>{
constborderWidthAndColor:any={
'1':{
borderWidth:`0${w/2}px${h}px${w/2}px`,
borderColor:`transparenttransparent${color}transparent`
},
'2':{
borderWidth:`${h}px${w/2}px0${w/2}px`,
borderColor:`${color}transparenttransparenttransparent`
},
'3':{
borderWidth:`${h/2}px${w}px${h/2}px0`,
borderColor:`transparent${color}transparenttransparent`
},
'4':{
borderWidth:`${h/2}px0${h/2}px${w}px`,
borderColor:`transparenttransparenttransparent${color}`
}
}
returnborderWidthAndColor[direction]
}
4. 程式碼實時展示實現
至於程式碼實時展示在文字框中, 這個也是很容易實現, 我們只要要把拿到的資料實時展示到文字框裡即可. 由於筆者採用的css module 和react方式實現的, 所以需要對css進行額外處理, 比如將物件格式轉化為css規範的格式, 所以需要加如下步驟:JSON.stringify(triangleCss,null,4).replaceAll(/"/g,'').replaceAll(/,/g,';')
覺得有用 ？喜歡就收藏，順便點個贊吧，你的支援是我最大的鼓勵！微信搜 “趣談前端”，發現更多有趣的H5遊戲, webpack，node，gulp，css3，javascript，nodeJS，canvas資料視覺化等前端知識和實戰.
本文分享自微信公眾號 - 趣談前端（beautifulFront）。
如有侵權，請聯絡 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。
來源：通遼SEO