最終效果

五顏六色的燈

編輯燈序的顏色

緣起

最近一個(gè)需求，控制成百上千顆LED燈組成的燈陣，讓燈陣按預(yù)先編排的顏色點(diǎn)亮，實(shí)現(xiàn)各種光影特效。實(shí)現(xiàn)方式多種多樣，由于近期寫了很多界面交互上的東西，索性考慮用純CSS的方式實(shí)現(xiàn)。在此順便提一下，懼怕寫前端的都學(xué)學(xué)vue吧，會(huì)讓你喜歡上前端開發(fā)，而且效率奇高。

繪制一盞燈

需要用到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'],  //背景色、選中的顏色。如果背景色和父組件傳遞過來的選中顏色相同，
                                           //說明當(dāng)前組件被選中`active`class將會(huì)顯示，效果就是邊框外圍有藍(lán)色的線條。
        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
    }  #選中后，設(shè)置邊框樣式
</style>

繪制燈具的樣式，親手試驗(yàn)一下，就會(huì)更明白。組件工作完成了，在父組件中引用這個(gè)組件，即可實(shí)現(xiàn)開篇的效果。對(duì)燈具進(jìn)行色彩編輯，用了一個(gè)開源的取色器組件，不復(fù)雜，完全可以自己實(shí)現(xiàn)。

提升

如果你感興趣，可以嘗試來一個(gè)呼吸燈。
來一個(gè)更酷的，純css燈泡 http://www.jq22.com/code963

題外話

寫本文目的之一是體驗(yàn)markdown的寫作方式。最近本想用go語言創(chuàng)建一個(gè)輪子，用于快速開發(fā)，嘗試了一下還是放棄了。go確實(shí)有很多優(yōu)點(diǎn)，簡單易學(xué)，生態(tài)成熟。放棄go語言，擁抱rust，不過這個(gè)學(xué)習(xí)起來確實(shí)有難度。寫此文目的，也是打算把學(xué)習(xí)rust的過程記錄下來。