建站
咨詢
售后
建站咨詢
新聞中心
為了提高 前端開發(fā) 效率, 筆者先后寫了上百個前端工具, 有些是給公司內(nèi)部使用的, 有些單純是因為自己太“懶”, 不想寫代碼, 所以才“被迫”做的. 接下來介紹的一款工具——css三角形生成器也是因為之前想要解放設(shè)計師的生產(chǎn)力, 自己又懶得切圖或者寫css代碼, 所以想來想去還是自己做一個能自動生成css三角形代碼的工具吧.
成都創(chuàng)新互聯(lián)公司是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計公司的優(yōu)秀設(shè)計人員和策劃人員組成的一個具有豐富經(jīng)驗的團隊，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計師、平面廣告設(shè)計師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、網(wǎng)站改版、網(wǎng)頁設(shè)計制作、網(wǎng)站建設(shè)與維護、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務(wù)。
接下來筆者就來帶大家介紹一下這個工具的用途和實現(xiàn)方案, 方便大家后續(xù)可以擴展出更多的“懶人工具”.
在線css三角形生成器預(yù)覽
由預(yù)覽動畫我們可以看到通過在線工具我們可以輕松配置各種想要的三角形, 并且能實時查看css代碼. 開發(fā)完這個工具之后筆者再也不用擔(dān)心還需要手寫三角形代碼了. (上班摸魚也成了可能, 確實很多時候就是不想寫代碼還想要有錢拿) 在文末筆者會附上css工具的在線地址, 接下來我們來看看具體實現(xiàn)流程.
實現(xiàn)css三角形生成器
因為這個工具的需求來自于前端, 所以肯定是要對css和js編程有一定的基礎(chǔ), 比如css3的 transform, transition, 布局, 盒模型, border邊界特性等.
和筆者之前寫的任何一個開源工具一樣, 在開發(fā)項目前一定要明確需求和目標(biāo), 這里筆者簡單整理一下需求:
- 生成任何大小的三角形(size)
- 生成不同位置的三角形(direction)
- 生成不同角度的三角形(rotate)
- 生成不同背景色的三角形(color, 其實這個實不實現(xiàn)無所謂, 主要是筆者連這個代碼都懶的寫)
了解需求之后我們可以大致畫一個簡單的原型圖來代表我們的css生成器界面, 如下:
有了原型圖, 我們可以得到如下的任務(wù)細分圖:
這里筆者要提的一點是其實以上流程對于任何項目都適用, 包括你遇到的難解的問題, 都可以一步步把思路先理清楚, 把大目標(biāo)拆解為一塊塊的小目標(biāo), 然后逐個擊破, 這樣大難題也就解決了.
接下來我們先分析一下用css實現(xiàn)三角形的原理.
1.css畫三角形的原理
其實筆者在之前的文章中也分享過3種以上的使用css實現(xiàn)三角形的方案, 這里筆者介紹一個通用的方法, 也就是用border來實現(xiàn)三角形, 我們先來看下面的圖示:
以上是展示了當(dāng)box元素的width小于自身border寬度時的樣子以及當(dāng)box寬度為零而border-width不為零時的樣子. 通過圖形一分析是不是很容易聯(lián)想到如果我只要一個邊有顏色,其他都為透明面是不是就能變成三角形了呢?
的確也是這么實現(xiàn)的, 知道這個原理之后我們來繼續(xù)往下實現(xiàn)所見即所得的“三角形”.
2.編輯器實現(xiàn)
編輯器實現(xiàn)也是前端老生長談的話題了, 筆者在H5-Dooring項目中寫過一個非常復(fù)雜的編輯器, 但是這里我們只要需要一個靜態(tài)且簡單的編輯器就夠了. 如下圖的界面:
我們可以用任何我們擅長的框架和組件庫來實現(xiàn), 比如·vue3+ element plus, react + antd4.0, 筆者這里采用react方案實現(xiàn), 顏色選擇器采用社區(qū)比較有名的react-color.
編輯器界面的代碼筆者就不一一介紹了, 相信大家都能實現(xiàn), 我們這里來說一下樣式數(shù)據(jù)共享邏輯:
我們要想保證預(yù)覽區(qū)域和css代碼預(yù)覽區(qū)域能隨表單值變化而實時變化, 這里一定要將表單數(shù)據(jù)共享出來, 我們可以用react組件的state或者vue的vuex(雖然不用vuex也可以將data提升)來共享狀態(tài).
3. 預(yù)覽區(qū)域?qū)崿F(xiàn)
預(yù)覽區(qū)域?qū)崿F(xiàn)其實有了以上的分析其實很好實現(xiàn)了, 只需要利用共享的form數(shù)據(jù)來綁定到三角形元素的樣式上即可. 畫布的背景這里筆者也是用css實現(xiàn)的, 如下圖:
感興趣可以cv一下, 這代碼如下:
- .previewArea {
- display: inline-block;
- width: 360px;
- height: 360px;
- background: #eee;
- background-image: linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0),
- linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0);
- background-size: 30px 30px;
- background-position: 0 0,15px 15px;
- }
還有一個比較關(guān)鍵的一點是如何實現(xiàn)切換三角形的方向的問題, 我們都知道切換方向后css的border的幾個方向?qū)傩远紩? 比如三角形的方向向上時, 我們的css如下:
- {
- border-width: 0 60px 60px 100px;
- border-color: transparent transparent #06c transparent;
- }
三角形的方向向下時, 我們的css如下:
- {
- border-width: 100px 60px 0 60px;
- border-color: #06c transparent transparent transparent;
- }
同樣左右也是類似的, 所以我們要維護4中樣式, 如果后期想加一下左上, 右上, 左下, 右下, 這樣代碼會非常難以維護(不是if else就是switch, 說實話switch只適合8個條件一下的判斷), 所以筆者這里用對象法來解決它, 并將其封裝成一個函數(shù):
- const getBorderWidthAndColor = (direction:string, w:number, h:number, color:string) => {
- const borderWidthAndColor:any = {
- '1': {
- borderWidth: `0 ${w/2}px ${h}px ${w/2}px`,
- borderColor:`transparent transparent ${color} transparent`
- },
- '2': {
- borderWidth: `${h}px ${w/2}px 0 ${w/2}px`,
- borderColor:`${color} transparent transparent transparent`
- },
- '3': {
- borderWidth: `${h/2}px ${w}px ${h/2}px 0`,
- borderColor:`transparent ${color} transparent transparent`
- },
- '4': {
- borderWidth: `${h/2}px 0 ${h/2}px ${w}px`,
- borderColor:`transparent transparent transparent ${color}`
- }
- }
- return borderWidthAndColor[direction]
- }
其實屬性預(yù)覽比如寬度, 高度, 背景色這些都好處理, 筆者這里就不一一介紹了. 預(yù)覽如下:
4. 代碼實時展示實現(xiàn)
至于代碼實時展示在文本框中, 這個也是很容易實現(xiàn), 我們只要要把拿到的數(shù)據(jù)實時展示到文本框里即可. 由于筆者采用的css module 和react方式實現(xiàn)的, 所以需要對css進行額外處理, 比如將對象格式轉(zhuǎn)化為css規(guī)范的格式, 所以需要加如下步驟:
- JSON.stringify(triangleCss, null, 4).replaceAll(/"/g, '').replaceAll(/,/g, ';')
這樣, 一個css三角形生成器就做好了, 大家還可以在此基礎(chǔ)上繼續(xù)擴展, 比如支持多邊形, 六角形, ?五角形等, 也是完全沒問題的.
在線體驗地址: 在線css三角形生成器
最近H5編輯器H5-Dooring也做了大量更新和優(yōu)化, 感興趣的也可以學(xué)習(xí)研究.
本文轉(zhuǎn)載自微信公眾號「趣談前端」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系趣談前端公眾號。
本文名稱：手擼一個在線Css三角形生成器
轉(zhuǎn)載注明：http://www.5511xx.com/article/coiocsp.html
