手擼一個在線css三角形生成器

爲了提升  前端開發 效率, 筆者前後寫了上百個前端工具, 有些是給公司內部使用的, 有些單純是由於本身太「 懶」, 不想寫代碼, 因此才「 被迫」作的. 接下來介紹的一款工具—— css三角形生成器也是由於以前想要解放設計師的生產力, 本身又懶得切圖或者寫 css代碼, 因此想來想去仍是本身作一個 能自動生成css三角形代碼的工具吧.

接下來筆者就來帶你們介紹一下這個工具的用途和實現方案, 方便你們後續能夠擴展出更多的「 懶人工具」.

在線css三角形生成器預覽

由預覽動畫咱們能夠看到經過在線工具咱們能夠輕鬆配置各類想要的三角形, 而且能實時查看 css代碼. 開發完這個工具以後筆者不再用擔憂還須要手寫三角形代碼了. (上班摸魚也成了可能, 確實不少時候就是不想寫代碼還想要有錢拿) 在文末筆者會附上 css工具的在線地址, 接下來咱們來看看具體實現流程.

實現css三角形生成器

由於這個工具的需求來自於前端, 因此確定是要對 css和 js編程有必定的基礎, 好比css3的  transform,  transition, 佈局, 盒模型,  border邊界特性等.

和筆者以前寫的任何一個開源工具同樣, 在開發項目前必定要明確需求和目標, 這裏筆者簡單整理一下需求:

• 生成任何大小的三角形(size)
• 生成不一樣位置的三角形(direction)
• 生成不一樣角度的三角形(rotate)
• 生成不一樣背景色的三角形(color, 其實這個實不實現無所謂, 主要是筆者連這個代碼都懶的寫)

瞭解需求以後咱們能夠大體畫一個簡單的原型圖來表明咱們的 css生成器界面, 以下:

有了原型圖, 咱們能夠獲得以下的任務細分圖:

這裏筆者要提的一點是其實以上流程對於任何項目都適用, 包括你遇到的難解的問題, 均可以一步步把思路先理清楚, 把大目標拆解爲一塊塊的小目標, 而後逐個擊破, 這樣大難題也就解決了.

接下來咱們先分析一下用 css實現三角形的原理.

1.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%, 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;
}

還有一個比較關鍵的一點是如何實現切換三角形的方向的問題, 咱們都知道切換方向後 css的 border的幾個方向屬性都會變, 好比三角形的方向向上時, 咱們的 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個條件一下的判斷), 因此筆者這裏用對象法來解決它, 並將其封裝成一個函數:

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]
  }

其實屬性預覽好比寬度, 高度, 背景色這些都好處理, 筆者這裏就不一一介紹了. 預覽以下:

4. 代碼實時展現實現

至於代碼實時展現在文本框中, 這個也是很容易實現, 咱們只要要把拿到的數據實時展現到文本框裏便可. 因爲筆者採用的css module 和react方式實現的, 因此須要對css進行額外處理, 好比將對象格式轉化爲css規範的格式, 因此須要加以下步驟:

JSON.stringify(triangleCss, null, 4).replaceAll(/"/g, '').replaceAll(/,/g, ';')

這樣, 一個css三角形生成器就作好了, 你們還能夠在此基礎上繼續擴展, 好比支持多邊形, 六角形, ⭐五角形等, 也是徹底沒問題的.

在線體驗地址: 在線css三角形生成器

最近H5編輯器 H5-Dooring也作了大量更新和優化, 感興趣的也能夠學習研究.

輕鬆一刻

以爲有用 ？喜歡就收藏，順便點個贊吧，你的支持是我最大的鼓勵！微信搜 「 趣談前端」，發現更多有趣的H5遊戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數據可視化等前端知識和實戰.

本文分享自微信公衆號 - 趣談前端（beautifulFront）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。