手撸一个在线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源创计划”，欢迎正在阅读的你也加入，一块儿分享。