试试用纯CSS绘制灯具

最终效果

五颜六色的灯 编辑灯序的颜色

缘起

最近一个需求，控制成百上千颗LED灯组成的灯阵，让灯阵按预先编排的颜色点亮，实现各种光影特效。实现方式多种多样，由于近期写了很多界面交互上的东西，索性考虑用纯CSS的方式实现。在此顺便提一下，惧怕写前端的都学学vue吧，会让你喜欢上前端开发，而且效率奇高。

绘制一盏灯

需要用到css3里面的一些特性，主要用到flex布局, border-radius,transform等属性。先看代码及其注释：

<template>
    <view class="my-light" :class="{'active':bgcolor==checkColor}" @tap="select()">
        <view class="arc" :style="{'background':bgcolor}">

        </view>
        <view class="ligth-bottom">
            <view class="h1"></view>
            <view class="h2"></view>
            <view class="h3"></view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['bgcolor', 'checkColor'],  //背景色、选中的颜色。如果背景色和父组件传递过来的选中颜色相同，
                                           //说明当前组件被选中`active`class将会显示，效果就是边框外围有蓝色的线条。
        data() {
            return {

            }
        },
        computed: {

        },
        methods: {
            select() {
                this.$emit('select', {
                    'color': this.bgcolor
                })
            }
        },
        onLaunch() {
            console.log('light-onlaunch');
        }
    }
</script>

<style>
    .my-light {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 160rpx;
        width: 80rpx;
        padding-top: 15rpx;
    }       #flex布局

    .arc {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100rpx 10rpx 100rpx 10rpx;  
        background: #FF0000;
        transform: rotate(-45deg);
    }  #绘制灯具

    .ligth-bottom {
        position: relative;
        top: 5rpx;
        width: 100%;
        height: 28rpx;
        background: #f1f1f1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }  #遮盖底部

    .h1 {
        width: 30rpx;
        height: 7rpx;
        background: #555555;
        margin: 1px;
    }  #绘制灯底座

    .h2 {
        width: 28rpx;
        height: 7rpx;
        background: #555555;
        margin: 1px;
    } #绘制灯底座

    .h3 {
        width: 28rpx;
        height: 7rpx;
        background: #555555;
        border-bottom-left-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
    } #绘制灯底座

    .active {
        border: 1px solid #5E00FF
    }  #选中后，设置边框样式
</style>

绘制灯具的样式，亲手试验一下，就会更明白。组件工作完成了，在父组件中引用这个组件，即可实现开篇的效果。对灯具进行色彩编辑，用了一个开源的取色器组件，不复杂，完全可以自己实现。

提升

如果你感兴趣，可以尝试来一个呼吸灯。
来一个更酷的，纯css灯泡 http://www.jq22.com/code963

题外话

写本文目的之一是体验markdown的写作方式。最近本想用go语言创建一个轮子，用于快速开发，尝试了一下还是放弃了。go确实有很多优点，简单易学，生态成熟。放弃go语言，拥抱rust，不过这个学习起来确实有难度。写此文目的，也是打算把学习rust的过程记录下来。