前言

在UniApp的开发小程序过程中，为了针对不同角色用户登录后的个性化需求。通过动态权限配置机制，能够根据用户的角色展示不同的TabBar。此项目是通过Uni-App命令行的方式搭建的Vue3+Vite+Ts+Pinia+Uni-ui的小程序项目

最终效果

• 1、司机角色：
  


• 2、供应商角色：
  


• 3、司机且供应商角色：
  

目前常规的实现方式，大多数都是封装一个tabbar组件，在需要显示tabbar的页面添加这个组件，在根据一个选中的index值来切换选中效果。

而我的实现方式：把所有有tabbar的页面全部引入在一个tabbarPage页面，根据角色userType，来动态显示页面

实现思路

1、常规登录：通过微信登录获取code
2、根据code获取openId
3、根据openId获取token，若token存在表：此用户已经登陆/绑定过，则根据token获取用户信息，根据角色直接进入项目页面；若token不存在，则跳转到登录页面
4、登录成功后，调用用户信息接口，根据角色直接进入项目页面

1、以下是封装了一个useLogin的hooks

export const useLogin = () => {

  const { proxy } = getCurrentInstance() as any

  //常规登录

  const judgmentLogin = () => {

    uni.login({

      provider: 'weixin', //使用微信登录

      success: async (loginRes) => {

        // 根据微信登录的code获取openid

        const res = await proxy.$api.getOpenid({ code: loginRes.code })

        if (res.success) {

          // console.log('res.data.openid----', res.data.openId)

          // 根据openid获取token

          openidLogin(res.data.openId)

          // 存储openid

          uni.setStorageSync('openId', res.data.openId)

        }

      }

    });

  }

  // 登录过的用户再次进入根据openid获取token,有token则直接进入当前用户的页面，没有则进入登录页面

  const openidLogin = (async (openId: string) => {

    // console.log('openId----', openId)

    const res = await proxy.$api.openIdLogin({ openId })

    if (res.success) {

      if (res.data) {

        // 存储token

        uni.setStorageSync('token', res.data)

        userInfo(openId)

      } else {

        uni.navigateTo({

          url: '/pages/login/login'

        })

      }

    }

  })

// 登录成功后(有token后)根据openid获取用户信息

  const userInfo = (async (openId: any) => {

    const res = await proxy.$api.getUserInfo({ openId })

    if (res.success) {

      console.log('获取登陆用户信息', res.data)

      uni.setStorageSync('userInfo', JSON.stringify(res.data))

      const userTypeList = ['scm_driver', 'scm_supplier', 'supplier_and_driver']

      // 遍历角色数组来存储当前用户的角色。此角色为userTypeList中的某一个并且此数组只能存在一个userTypeList里面的角色，不会同时存在两个

      res.data.roles.map((item: any) => {

        if (userTypeList.includes(item.roleKey)) {

          uni.setStorageSync('userType', item.roleKey)

        }

      })

      // 判断角色数组中只要有一个角色在userTypeList中，则进入当前用户的角色页面，否则进入无权限页面

      const flag = res.data.roles.some((item: any) => {

        return userTypeList.includes(item.roleKey)

      })

      // console.log('flag----', flag)

      if (flag && userTypeList.includes(uni.getStorageSync('userType'))) {

        setTimeout(() => {

          uni.reLaunch({

            url: '/pages/tabbarPage/tabbarPage'

          })

        }, 500)

      } else {

        uni.showToast({

          icon: 'none',

          title: '当前用户角色没有权限！'

        })

      }

    }

  })

  return {

    judgmentLogin,

    userInfo

  }

}

2、修改page.json中的tabBar

"tabBar": {

		"color": "#a6b9cb",

		"selectedColor": "#355db4",

		"list": [

			{

				"pagePath": "pages/supplierMyorder/supplierMyorder"

			},

			{

				"pagePath": "pages/driverMyorder/driverMyorder"

			},

			{

				"pagePath": "pages/mycar/mycar"

			},

			{

				"pagePath": "pages/driverPersonal/driverPersonal"

			}

		]

	},

3、关键页面tabbarPage.vue

<template>

  <div class="tabbar_page flex-box flex-col">

    <div

      class="page_wrap"

      v-if="userType === 'scm_supplier'"

      v-show="active === 'supplierMyorder'"

    >

      <supplier-myorder

        ref="supplierMyorder"

        :show="active === 'supplierMyorder'"

      />

    div>

    <div

      class="page_wrap"

      v-if="userType === 'scm_supplier'"

      v-show="active === 'supplierPersonal'"

    >

      <supplier-personal

        ref="supplierPersonal"

        :show="active === 'supplierPersonal'"

      />

    div>

    <div

      class="page_wrap"

      v-if="userType === 'scm_driver'"

      v-show="active === 'driverMyorder'"

    >

      <driver-myorder ref="driverMyorder" :show="active === 'driverMyorder'" />

    div>

    <div

      class="page_wrap"

      v-if="userType === 'scm_driver'"

      v-show="active === 'mycar'"

    >

      <mycar ref="mycar" :show="active === 'mycar'" />

    div>

    <div

      class="page_wrap"

      v-if="userType === 'scm_driver'"

      v-show="active === 'driverPersonal'"

    >

      <driver-personal

        ref="driverPersonal"

        :show="active === 'driverPersonal'"

      />

    div>

    <div

      class="page_wrap"

      v-if="userType === 'supplier_and_driver'"

      v-show="active === 'supplierMyorder'"

    >

      <supplier-myorder

        ref="supplierMyorder"

        :show="active === 'supplierMyorder'"

      />

    div>

    <div

      class="page_wrap"

      v-if="userType === 'supplier_and_driver'"

      v-show="active === 'driverMyorder'"

    >

      <driver-myorder ref="driverMyorder" :show="active === 'driverMyorder'" />

    div>

    <div

      class="page_wrap"

      v-if="userType === 'supplier_and_driver'"

      v-show="active === 'mycar'"

    >

      <mycar ref="mycar" :show="active === 'mycar'" />

    div>

    <div

      class="page_wrap"

      v-if="userType === 'supplier_and_driver'"

      v-show="active === 'supplierPersonal'"

    >

      <supplier-personal

        ref="supplierPersonal"

        :show="active === 'supplierPersonal'"

      />

    div>

    <view class="tab">

      <view

        v-for="(item, index) in tabbarOptions"

        :key="index"

        class="tab-item"

        @click="switchTab(item, index)"

      >

        <image

          class="tab_img"

          :src="currentIndex == index ? item.selectedIconPath : item.iconPath"

        >image>

        <view

          class="tab_text"

          :style="{ color: currentIndex == index ? selectedColor : color }"

          >{{ item.text }}

      view>

    view>

  div>

template>



<script lang="ts" setup>

import supplierMyorder from '@/pages/supplierMyorder/supplierMyorder.vue'

import supplierPersonal from '@/pages/supplierPersonal/supplierPersonal.vue'

import driverMyorder from '@/pages/driverMyorder/driverMyorder.vue'

import mycar from '@/pages/mycar/mycar.vue'

import driverPersonal from '@/pages/driverPersonal/driverPersonal.vue'

let color = ref('#666666')

let selectedColor = ref('#355db4')

let currentIndex = ref(0)



const active = ref('')

const switchTab = (item: any, index: any) => {

  // console.log('tabbar----switchTab-----list', item, index)

  currentIndex.value = index

  active.value = item.name

}



onLoad((option: any) => {

  currentIndex.value = option.index || 0

  active.value = option.name || tabbarOptions.value[0].name

})

onShow(() => {

  active.value = active.value || tabbarOptions.value[0].name

  currentIndex.value = currentIndex.value || 0

})

const userType = computed(() => {

  return uni.getStorageSync('userType')

})

const tabbarOptions = computed(() => {

  return {

    scm_supplier: [

      {

        name: 'supplierMyorder',

        pagePath: '/pages/supplierMyorder/supplierMyorder',

        iconPath: '/static/tabbar/order.png',

        selectedIconPath: '/static/tabbar/order_active.png',

        text: '我的订单'

      },

      {

        name: 'supplierPersonal',

        pagePath: '/pages/supplierPersonal/supplierPersonal',

        iconPath: '/static/tabbar/my.png',

        selectedIconPath: '/static/tabbar/my_active.png',

        text: '个人中心'

      }

    ],

    scm_driver: [

      {

        name: 'driverMyorder',

        pagePath: '/pages/driverMyorder/driverMyorder',

        iconPath: '/static/tabbar/waybill.png',

        selectedIconPath: '/static/tabbar/waybill_active.png',

        text: '我的运单'

      },

      {

        name: 'mycar',

        pagePath: '/pages/mycar/mycar',

        iconPath: '/static/tabbar/car.png',

        selectedIconPath: '/static/tabbar/car_active.png',

        text: '我的车辆'

      },

      {

        name: 'driverPersonal',

        pagePath: '/pages/driverPersonal/driverPersonal',

        iconPath: '/static/tabbar/my.png',

        selectedIconPath: '/static/tabbar/my_active.png',

        text: '个人中心'

      }

    ],

    supplier_and_driver: [

      {

        name: 'supplierMyorder',

        pagePath: '/pages/supplierMyorder/supplierMyorder',

        iconPath: '/static/tabbar/order.png',

        selectedIconPath: '/static/tabbar/order_active.png',

        text: '我的订单'

      },

      {

        name: 'driverMyorder',

        pagePath: '/pages/driverMyorder/driverMyorder',

        iconPath: '/static/tabbar/order.png',

        selectedIconPath: '/static/tabbar/order_active.png',

        text: '我的运单'

      },

      {

        name: 'mycar',

        pagePath: '/pages/mycar/mycar',

        iconPath: '/static/tabbar/car.png',

        selectedIconPath: '/static/tabbar/car_active.png',

        text: '我的车辆'

      },

      {

        name: 'supplierPersonal',

        pagePath: '/pages/supplierPersonal/supplierPersonal',

        iconPath: '/static/tabbar/my.png',

        selectedIconPath: '/static/tabbar/my_active.png',

        text: '个人中心'

      }

    ]

  }[userType.value]

})

script>



<style lang="scss" scoped>

.tabbar_page {

  height: 100%;

  .page_wrap {

    height: calc(100% - 84px);

    &.hidden {

      display: none;

    }

  }

  .tab {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100rpx;

    background: white;

    display: flex;

    justify-content: center;

    align-items: center;

    padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部



    .tab-item {

      flex: 1;

      text-align: center;

      display: flex;

      justify-content: center;

      align-items: center;

      flex-direction: column;



      .tab_img {

        width: 45rpx;

        height: 45rpx;

      }



      .tab_text {

        font-size: 25rpx;

        margin: 9rpx 0;

      }

    }

  }

}

.flex-box {

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

}

.flex-col {

  flex-direction: column

}

style>

::marker 是一个 CSS 的另一个伪元素，有点类似于 CSS 的 ::before 和 ::after 伪元素。只不过，它常用于给列表标记框定制样式。简而言之，使用::marker伪元素，可以对列表做一些有趣的事情，在本文中，我们将深入的聊聊该伪元素。

初识 CSS 的 ::marker

::marker 是 CSS 的伪元素，现在被纳入到 CSS Lists Module Level 3 规范中。在该规范中涵盖了列表和计算数器相关的属性，比如我们熟悉的list-style-type、list-style-position、list-style、list-item、counter-increment、counter-reset、counter()和counters()等属性。

在 CSS 中 display 设置 list-item 值之后就会生成一个 Markers 标记以及控制标记位置和样式的几个属性，而且还定义了计数器（计数器是一种特殊的数值对象），而且该计数器通常用于生成标记（Markers）的默认内容。

一时之间，估计大家对于Markers标记并不熟悉，但对于一个列表所涉及到的相关属性应该较为熟悉，对于一个CSS List，它可以涵盖了下图所涉及到的相关属性：

如果你对CSS List中所涉及到的属性不是很了解的话，可以暂时忽略，随着后续的知识，你会越来越清楚的。

解构一个列表

虽然我们在 Web 的制作中经常会用到列表，但大家可能不会过多的考虑列表相关的属性或使用。就 HTML语义化出发，如果遇到无序列表的时候会使用

，遇到有序列表的时候会使用
，但在有些场景（或不追求语义化的同学）会采用其他的标签元素，比如说
。针对这个场景，会采用 display 设置为list-item。如此一来会创建一个块级别的框，以及一个附加的标记框。同时也会自动增加一个隐含列表项计算数器。




ul 和 ol 元素默认情况之下会带有list-style-type、list-style-image和list-style-position属性，可以用来设置列表项的标记样式。同样的，带有display:list-item的元素生成的标记框，也可以使用这几个属性来设置标记项样式。




list-style-type的属性有很多个值：









取值不同时，列表符号（也就是Marker标识符）会有不同的效果，比如下面这个示例所示：












Demo 地址：codepen.io/airen/full/…







在 CSS 中给列表项设置类型的样式风格可以通过 list-style-type 和 list-style-image 来实现，但这两个属性设置列表项的样式风格会有所限制。比如要实现类似下图的列表项样式风格：









值得庆幸的是，CSS 的 ::marker 给予我们更大的灵活性，可以让我们实现更多的列表样式风格，而且灵活性也更大。




创建 marker 标记框




HTML 中的 ul 和 ol 元素会自动创建 marker 标记框。如果通过浏览器调试器来查看的话，你会发现，不管是 ul 还是 ol 的子元素 li 会自带 display:list-item 属性设计（客户端默认属性），另外会带有一个默认的list-style-type样式设置：









这样一来，它自身就默认创建了一个 marker 标记框，同时我们可以通过 ::marker 伪元素来设置列表项的样式风格，比如下面这个示例：




ul ::marker,

ol ::marker {

    font-size: 200%;

    color: #00b7a8;

    font-family: "Comic Sans MS", cursive, sans-serif;

}




你会看到效果如下所示：












Demo 地址：codepen.io/airen/full/…







对于非列表元素，可以通过display: list-item来创建 Marker 标记，这样就可以在元素上使用 ::marker 伪元素来设置项目符号的样式。虽然通过display:list-item在形式上看上去像列表项，但在语义化上并没有起到任何的作用。




在深入探讨 ::marker 使用之前，大家要知道，元素必须要具备一个Marker标记框，对于非列表项的元素需要显式的使用 display:list-item 来创建Marker标记框。





CSS的display属性是一个非常重要的属性，现在被纳入在CSS Display Module Level 3中。CSS的display属性可以改变任何一个元素的框模型。而且在Level 3规范中给display引用了两个值的语法，比如使用display: inline list-item可以创建一个内联列表项。




::marker 的基本使用




前面的小示例中，其实我们已经领略到了::marker的魅力。在列表项li中，其实已经带有Marker标记框，可以借助::marker伪元素来设置列表标记的样式。




我们先来回忆一下，CSS的::marker还未出现（或者说不支持的浏览器）时，要对列表项设置不同的样式，都是通过li上来控制（看上去继承了li上的样式）。虽然能设置列表样式，但还是具有一定的局限性，灵活度不够大 —— 特别是当列表项标记样式和内容要区分时。




CSS的::marker会让我们变得容易的多。从前面的示例中我们可以了解到， ::marker 伪元素和列表项内容是分开的，正因此，我们可以独立为两个部分设计不同的样式。这在以前的CSS版本中是不可能的（除非借助::before伪元素来模拟，稍后也会介绍这一部分）。比如说，我们更改ul或li的color或font-size时也会更改标记的color和font-size。为了达到两者的区分，往往需要在HTML中做一些结构上的调整，比如列表项用一个子元素来包裹（比如span元素或::before伪元素）。




更了大家更易于理解::marker的作用，我们在上面的示例基础上做一些调整：




.box:nth-child(odd) li {

    font-size: 200%;

    color: #00b7a8;

    font-family: "Comic Sans MS", cursive, sans-serif;

}



.box:nth-child(even) ::marker {

    font-size: 200%;

    color: #00b7a8;

    font-family: "Comic Sans MS", cursive, sans-serif;

}




代码中的具体作用不做介绍，很简单的代码，但效果却有很大的差异性，如下图所示：









很神奇吧！在浏览器中查看源码，你会发现使用::marker和未使用::marker的差异性：









虽然::marker易于帮助我们控制标记的样式风格，但有一点需要特别注意，如果显式的设置了list-style-type: none时，::marker标记内容就会丢失不可见。在这个时候，不管是否显式的设置了::marker的样式都将会看不到。比如：









大家是否还记得，在::marker还没有出现之前，要对列表项设置别的标记符，比如Emoji。我们就需要通过别的方式来完成，最为常见的是修改HTML的结构，或者借助CSS伪元素::before和CSS的content属性，例如下面这个示例：












Demo 地址：codepen.io/airen/full/…







事实上，CSS的::marker和伪元素::before类似，也可以通过content和attr()一起来控制Marker标记的效果。需要记住，生成个性化Marker标记内容需要做到几下几点：






• 非列表项li元素需要显式的设置display:list-item （内联列表项需要使用display: inline list-item）


• 需要显式设置list-style-type为none


• 使用content添加内容（也可以通过attr()配合data-*来添加内容）






来看一个小示例：




li::marker {

    content: attr(data-emoji);

}









::marker伪元素自从可以使用content来添加内容之后，让我们可操作的空间更大了。对于列表标记（即，带有Marker标记）的元素再也不需要额外的通过::before伪元素和content来生成标记内容。而且，我们还可以结合计算数器相关的特性，让列表标记可造性空间更大。如果你感兴趣的话，请继续往下阅读。




::marker 与计数器的结合




对于无序列表，或者说统一使用同样的标记符，那么::marker和content结合就可以解决。但是如果面对的是一个有顺列表，那么我们就需要用到CSS计数器的相关特性。




先来回忆一下CSS的计数器相关的特性。在CSS中计数器有三个属性：






• counter-reset：设置一个计数器，定义计数器名称，用来标识计数器作用域


• counter-set：将计数器设置为给定的值。它操作现有计数器的值，并且只在元素上还没有给定名称的计数器时才创建新的计数器


• counter-increment：用来标识计数器与实际关联元素范围，可接受两个值，第一个值必须是counter-reset定义的标识符，第二个值是可选值，是一个整数值（正负值都可以），用来预设递增的值






以及两个相关的函数：






• counter() ：主要配合content一起使用，用来调用定义好的计数器标识符


• counters() ：支持嵌套计数器，如果有指定计数器的当前值，则返回一个表示这些计数器的当前值的串联字符串。counters()有两种形式counters(name, string)和counters(name, string, style)。通常和伪元素一起使用，但理论上可以支持值的任何地方使用









一般情况之下，counter-reset、counter-increment和counter()即可满足一个计数器的需求。







CSS的计数器使用非常的简单。在元素的父元素上显式设置:




body {

    counter-reset: section

}




使用counter-reset声明了一个计数器标识符叫section。然后再需要使用计算器的元素上（一般配合伪元素::before）使用counter-increment来调用counter-reset已声明的计数器标识符，然后使用counter(section)来计数：




h3::before {

    counter-increment: section

    content: "Section " counter(section) ": "

}




下图会更详尽一些，把计数器可能会用的值都罗列出来了，可供参考：









回到我们的列表设置中来。::marker还没有得到浏览器支持之前，一般都是使用CSS的计数器来实现一些带有个性化的有顺序列表，比如下面这样的效果：









也可以借助计数器做一些其他的效果比如：












Demo 地址：codepen.io/snookca/ful…







更为厉害的是，CSS的计数器配合复选框或单选按钮还可以做一些小游戏，比如 @una教程中向我们展示的一个效果：












Demo 地址：codepen.io/jak_e/full/…







@kizmarh使用同样的原理，做了一个黑白棋的小游戏：









是不是很有意思，有关于CSS计数器相关的特性暂且搁置。我们回到::marker的世界中来。




::marker配合content可以定制个性化Marker标记风格。借助CSS计数器，可以更轻易的构建带有顺序的Marker标记。同样可以让Marker标记和内容分离。更易于实现可定制化的样式风格。




接下来，我们来看一个简单的示例，看看::marker生成的标记符和以往生成的标记符效果上有何差异没。




结果很简单，这里使用的是一个无序列表:




<ul>

    <li>

    Item1

    <ul>

        <li>Item 1-1li>

        <li>Item 1-2li>

        <li>Item 1-3li>

    ul>

    li>

    <li>Item2li>

    <li>Item3li>

    <li>Item4li>

    <li>Item5li>

ul>




你可以根据自己的爱好来选择标签元素。先来看::before和content配合counter()和counters()的一个效果：




/* counter() */ 

.box:nth-child(1) {

    ul {

        counter-reset: item;

    }

    li {

        counter-increment: item;

        &::before{

            content: counter(item);

            /* ... */ 

        }

    }

}



/* counters() */ 

.box:nth-child(2) {

    ul {

        counter-reset: item;

    }

    li {

        counter-increment: item;

        &::before{

            content: counters(item, '.');

            /* ... */ 

        }

    }

}









对于上面的效果，大家可能也猜到了。我们再来看一下::marker的使用：




/* counter() */ 

.box:nth-child(3) {

    ul {

        counter-reset: item;

    }

    li {

        counter-increment: item;

    }

    ::marker {

        content: counter(item);

        /* ... */ 

    }

}



/* counters() */ 

.box:nth-child(4) {

    ul {

        counter-reset: item;

    }

    li {

        counter-increment: item;

    }

    ::marker {

        content: counters(item, '.');

        /* ... */ 

    }

}




可以看到::marker和前面::before效果是一样的：









另外使用::marker还有一特殊之处。不管是列表元素还是设置了display:list-item的非列表元素，不需要显式的使用counter-reset声明计数器标识符，也无需使用counter-increment调用已声明的计数器标识符。它可以直接在 ::marker 伪元素的 content 中使用 counter(list-item) 或 counters(list-item, '.') 。




但是非列表元素，哪怕是设置了display:list-item，直接在::marker的content中使用counters(list-item, '.')所起的效果和我们预期的有所不同。如果在非列表元素的::marker的content中使用counters()达到我们想要的效果，需要使counter-reset先声明计数器标识符，然后counter-increment调用已声明的计数器标识符（回归到以前::before的使用）。具本的可以看下面的示例代码：




::marker {

    content: counter(list-item);

    padding: 5px 30px 5px 12px;

    background: linear-gradient(to right, #f36, #f09);

    font-size: 2rem;

    clip-path: polygon(0% 0%, 75% 0, 75% 51%, 100% 52%, 75% 65%, 75% 100%, 0 100%);

    border-radius: 5px;

    color: #fff;

    text-shadow: 1px 1px 1px rgba(#09f, .5);

}

.box:nth-child(2n) ::marker {

    content: counters(list-item, '.');

} 



.box:nth-child(3) {

    section {

        counter-reset: item;

    }

    article {

        counter-increment: item;

    }

    ::marker {

        content: counters(item, '.');

    } 

}




具体效果如下：









是不是觉得::marker非常有意思，特别是给元素添加Marker标记的时候。换句话说，就是在定制个性化列表符号时，使用::marker伪元素要比::before之类的较为方便。而且::marker是元素原生的列表标记符（::marker）。




一旦::marker伪元素得到所有浏览器支持之后，我们要让列表标记符和内容分离就会多了一种方案:






• 调整HTML结构


• 伪元素::before和content


• 伪元素 ::marker 和 content






前面也向大家展示了，::marker也可以像::before一样，借助CSS计数器属性，可以更好的实现有序列表，甚至是嵌套的列表。




写在最后




虽然 ::marker 的出现允许我们为列表标记定制样式，但它也有一定的限制性，至少到目前为止是这样。比如，我们在 ::marker 伪元素上可控样式还是有限，要实现下面这样的个性化效果是不可能的：









庆幸的是，CSS 中除了 ::marker 伪元素之外，还可以使用 ::before 或 ::after 来生成内容，然后通过 CSS 来实现更具个性化的列表标记样式。



作者：大漠_w3cpluscom
来源：juejin.cn/post/7358348786843959336

1.画点建筑模型

添加光照，开启阴影

//开启renderer阴影

  this.renderer.shadowMap.enabled = true;

this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;



 //设置环境光

  const light = new THREE.AmbientLight(0xffffff, 0.6); // soft white light

this.scene.add(light);



 //夜晚天空蓝色，假设成蓝色的平行光

  const dirLight = new THREE.DirectionalLight(0x0000ff, 3);

   dirLight.position.set(50, 50, 50);

  this.scene.add(dirLight);   

平行光设置阴影

//开启阴影

 dirLight.castShadow = true;

 //阴影相机范围

dirLight.shadow.camera.top = 100;

dirLight.shadow.camera.bottom = -100;

dirLight.shadow.camera.left = -100;

dirLight.shadow.camera.right = 100;

//阴影影相机远近

dirLight.shadow.camera.near = 1;

dirLight.shadow.camera.far = 200;

//阴影贴图大小

dirLight.shadow.mapSize.set(1024, 1024);

• 平行光的阴影相机跟正交相机一样，因为平行光的光线是平行的，就跟视线是平行一样，切割出合适的阴影视角范围，用于计算阴影。


• shadow.mapSize设置阴影贴图的宽度和高度，值越高，阴影的质量越好，但要花费计算时间更多。

增加建筑

//添加一个平面

const pg = new THREE.PlaneGeometry(100, 100);

//一定要用受光材质才有阴影效果

          const pm = new THREE.MeshStandardMaterial({

            color: new THREE.Color('gray'),

            transparent: true,//开启透明

            side: THREE.FrontSide//只有渲染前面

          });

          const plane = new THREE.Mesh(pg, pm);

          plane.rotateX(-Math.PI * 0.5);

          plane.receiveShadow = true;//平面接收阴影

          this.scene.add(plane);



          //随机生成建筑

          this.geometries = [];

          const helper = new THREE.Object3D();

          for (let i = 0; i < 100; i++) {

            const h = Math.round(Math.random() * 15) + 5;

            const x = Math.round(Math.random() * 50);

            const y = Math.round(Math.random() * 50);

            helper.position.set((x % 2 ? -1 : 1) * x, h * 0.5, (y % 2 ? -1 : 1) * y);

            const geometry = new THREE.BoxGeometry(5, h, 5);

            helper.updateWorldMatrix(true, false);

            geometry.applyMatrix4(helper.matrixWorld);

            this.geometries.push(geometry);

          }

          //长方体合成一个形状

          const mergedGeometry = BufferGeometryUtils.mergeGeometries(this.geometries, false);

          //建筑贴图

          const texture = new THREE.TextureLoader().load('assets/image.jpg');

          texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

          const material = new THREE.MeshStandardMaterial({ map: texture,transparent: true });

          const cube = new THREE.Mesh(mergedGeometry, material);

          //形状产生阴影

          cube.castShadow = true;

          //形状接收阴影

          cube.receiveShadow = true;

          this.scene.add(cube);

效果就是很多高楼大厦的样子，为什么楼顶有窗？别在意这些细节，有的人就喜欢开天窗呢~

2.搞个雷达扩散和扫描特效

改变建筑材质shader，计算建筑的俯视uv

material.onBeforeCompile = (shader, render) => {

            this.shaders.push(shader);

            //范围大小

            shader.uniforms.uSize = { value: 50 };

            shader.uniforms.uTime = { value: 0 };

            //修改顶点着色器

            shader.vertexShader = shader.vertexShader.replace(

              'void main() {',

              ` uniform float uSize;

              varying vec2 vUv;

              void main() {`

            );

            shader.vertexShader = shader.vertexShader.replace(

              '#include <fog_vertex>',

              `#include <fog_vertex>

              //计算相对于原点的俯视uv

                      vUv=position.xz/uSize;`

            );

            //修改片元着色器

            shader.fragmentShader = shader.fragmentShader.replace(

              'void main() {',

              `varying vec2 vUv;

                uniform float uTime;

                void main() {`

            );

            shader.fragmentShader = shader.fragmentShader.replace(

              '#include <dithering_fragment>',

              `#include <dithering_fragment>

              //渐变颜色叠加

                  gl_FragColor.rgb=gl_FragColor.rgb+mix(vec3(0,0.5,0.5),vec3(1,1,0),vUv.y);`

            );

          };

然后你将同样的onBeforeCompile函数赋值给平面的时候，没有对应的效果。

因为平面没有z，只有xy,而且经过了-90度旋转后，坐标位置也要对应反转,由此可以得出平面的uv计算公式

vUv=vec2(position.x,-position.y)/uSize;

至此，建筑和平面的俯视uv一致了。

雷达扩散特效

• 雷达扩散就是一段渐变的环，随着时间扩大。


• 顶点着色器不变，改一下片元着色器，增加扩散环颜色uColor,对应shader.uniforms也要添加

shader.uniforms.uColor = { value: new THREE.Color('#00FFFF') };



 const fragmentShader1 = `varying vec2 vUv;

                uniform float uTime;

                uniform vec3 uColor;

                uniform float uSize;

                void main() {`;

          const fragmentShader2 = `#include <dithering_fragment>

              //计算与中心的距离

            float d=length(vUv);            

                  if(d >= uTime&&d<=uTime+ 0.1) {

                  //扩散圈

                    gl_FragColor.rgb = gl_FragColor.rgb+mix(uColor,gl_FragColor.rgb,1.0-(d-uTime)*10.0 )*0.5  ;                    

                  }`;

         

shader.fragmentShader = shader.fragmentShader.replace('void main() {', fragmentShader1);

shader.fragmentShader = shader.fragmentShader.replace(

              '#include <dithering_fragment>',

              fragmentShader2); 

   

   //改变shader的时间变量，动起来

  animateAction() {

          if (this.shaders?.length) {

            this.shaders.forEach((shader) => {

              shader.uniforms.uTime.value += 0.005;

              if (shader.uniforms.uTime.value >= 1) {

                shader.uniforms.uTime.value = 0;

              }

            });

          }

        }

噔噔噔噔，完成啦！是立体化的雷达扩散，看起来很酷的样子。

雷达扫描特效

跟上面雷达扩散差不多，只要修改一下片元着色器

• 雷达扫描是通过扇形渐变形成的，还要随着时间旋转角度

  const fragmentShader1 = `varying vec2 vUv;

                uniform float uTime;

                uniform vec3 uColor;

                uniform float uSize;

                //旋转角度矩阵

                mat2 rotate2d(float angle)

                {

                    return mat2(cos(angle), - sin(angle),

                                sin(angle), cos(angle));

                }

                //雷达扫描渐变扇形

                float vertical_line(in vec2 uv)

                {

                    if (uv.y > 0.0 && length(uv) < 1.2)

                    {

                        float theta = mod(180.0 * atan(uv.y, uv.x)/3.14, 360.0);

                        float gradient = clamp(1.0-theta/90.0,0.0,1.0);

                        return 0.5 * gradient;

                    }

                    return 0.0;

                }

                void main() {`;

                

                

          const fragmentShader2 = `#include <dithering_fragment> 

            mat2 rotation_matrix = rotate2d(- uTime*PI*2.0);  

    //将雷达扫描扇形渐变混合到颜色中

    gl_FragColor.rgb= mix( gl_FragColor.rgb, uColor, vertical_line(rotation_matrix * vUv)); `;

GitHub地址

https://github.com/xiaolidan00/my-earth

你是否遇到过写css没灵感，写不出酷炫的效果，那这篇文章你一定要看完。知道这几个开源库，它能让你写出炸天的效果并且有效地增加你的摸鱼时长。

1.CSS Inspiration

网址：

chokcoco.github.io/CSS-Inspira…

CSS Inspiration 上面有各种天马行空的css教程，涵盖了css的许多常见的特效。以分类的形式展示不同的css属性或者不同的课题，例如布局方式、border、伪元素、滤镜、背景3D等。这些都是css里面十分重要的知识点，不管是用于学习还是项目中实际运用都是不错的选择。

当然你也可以用来巩固基础知识，可以利用此项目来制作一些常用的特效，可以看到有上百个经典案例供我们参考，重点是提供源代码，复制粘贴即可使用。

2.Neumorphism

地址：

neumorphism.io/

Neumorphism属于新拟态ui风格，是目前比较新颖的一种前端css设计风格。它的格调简单，基本颜色比较浅，如米白、浅灰、浅蓝等。再利用阴影呈现出凹凸效果，看起来很简单舒适且有3D效果，因此我们可以通过拟态设计出很多优美的页面，拖动效果控制条即可秒生成css样式。

3.AnimXYZ

地址：

animxyz.com/

如果说你热衷于动画，那animxyz绝对是你的不二之选。你可以使用animxyz组合和混合不同的动画来创建自己的高度可定制的css动画，而无需编写一个单一的关键帧。

相比于animate css，它的强大之处在于你可以在这里根据自己的想法来手动配置动画。实现的动画代码实例，我们可以复制迁移到项目中使用。

4.CodePen

最后要推荐的则是我最常用也是我最推荐的，它就是codepen。codepen是一个完全免费的前端代码托管服务，上面云集了各路大神，拥有全世界前端达人经典项目进行展示，让你从中获取到很多的创作灵感。

它可以实现即时预览，你甚至可以在线修改并及时预览别人的作品。支持多种主流预处理器，快速添加外部资源文件，只需在输入框里输入库名，codepen就会从cdn上寻找匹配的css或js库。

今天和大家分享一个小思路，用于实现箭头步骤条效果。

在我们项目中，有一个需求，想实现一个步骤条，默认的时候是 边框和文字 需要有特定的颜色，但是选中时，背景需要有特定颜色，边框颜色消失，文字显示白色，具体效果如下图：

可以看到，步骤一是默认样式，步骤二是选中样式，即选中背景颜色需要变成默认样式的边框颜色

使用div思路（无法实现默认效果）

当时第一次想的是使用div来实现这个逻辑，因为看到elementui有个差不多的（但是实现不了上面的效果，实现一个箭头倒是可以的，下面为大家简单介绍div的实现思路）

-- 饿了么效果图

搭建dom结构

首先我们先创建一个矩形

然后像这样使用一个伪元素，盖在矩形的开头，并修改其border-color的颜色即可，操作方式如下图

    <!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

      * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

      }

      body {

        height: 100vh;

        width: 100vw;

        display: grid;

        place-content: center;

        overflow: hidden;

      }

      .arrow {

        position: relative;

        display: flex;

        align-items: center;

        justify-content: center;

        min-width: 100px;

        max-width: max-content;

        height: 30px;

        background: salmon;

      }



      .arrow::after {

        position: absolute;

        content: "";

        left: 0px;

        border: 15px solid transparent;

        border-left-color: white;

      }



      .arrow::before {

        position: absolute;

        content: "";

        right: 0px;

        border: 15px solid transparent;

        border-top-color: white;

        border-right-color: white;

        border-bottom-color: white;

      }



      .content {

        text-align: center;

        padding: 0px 20px;

        width: 140px;

        box-sizing: border-box;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

      }



      .content-inner {

        display: inline-block;

        width: 100%;

        transform: translateX(-5px);

      }

    </style>

  </head>

  <body>

    <div class="arrow">

      <div class="content">

        <span class="content-inner">1</span>

      </div>

    </div>

  </body>

</html>

这样就实现了一个箭头啦。

但是使用div实现箭头，并不太好实现我们开头想要的那种效果，如果非要实现也要费很大劲，得不偿失，所以接下来，介绍第二种方案

使用SVG标签(可缩放矢量图形)

实现思路即标签介绍

polyline

polyline元素是 SVG 的一个基本形状，用来创建一系列直线连接多个点。

使用到的属性：

• stroke-width： 用于设置绘制的线段宽度


• fill: 填充色


• stroke: 线段颜色，


• points：绘制一个元素点的数列 （0,0 22,22）

接下来我们尝试使用该元素绘制一个箭头，先看看需要多少点位（如下图需6个，但是元素需要闭合，所以需要7个）

所以我们就可以很轻松的绘制出一个箭头，具体代码如下

  <svg

      :viewBox="0 0 130 26"

      width="130px"

      height="26"

      version="1.1"

      xmlns="http://www.w3.org/2000/svg"

    >

      <polyline

        class="polyline"

        points="0,0 115,0 130,13 115,26 0,26 15,13 0,0"

        fill="green"

        stroke-width="1"

      ></polyline>

</svg>

此时我们得到了类似选中后的颜色，那默认颜色呢，只需要修改其 fill, stroke属性即可，具体逻辑如下

    <svg

      :viewBox="0 0 130 26"

      width="130px"

      height="26"

      version="1.1"

      xmlns="http://www.w3.org/2000/svg"

    >

      <polyline

        class="polyline"

        points="0,0 115,0 130,13 115,26 0,26 15,13 0,0"

        fill="transparent"

        stroke="red"

        stroke-width="1"

      ></polyline>

    </svg>

此时那文中的内容怎么办，没法直接放标签内，此时需要借助另一个标签。

foreignObject

SVG中的  <foreignObject>  元素允许包含来自不同的 XML 命名空间的元素。在浏览器的上下文中，很可能是 XHTML / HTML。

所以我们可以使用该标签来作为放置内容的容器

属性介绍:

• x：设置 foreignObject 的 x 坐标


• y：设置 foreignObject 的 y 坐标


• width：设置 foreignObject 的宽度


• height：设置 foreignObject 的高度

具体代码如下

 <svg

      :viewBox="0 0 130 26"

      width="130px"

      height="26"

      version="1.1"

      xmlns="http://www.w3.org/2000/svg"

    >

      <polyline

        class="polyline"

        points="0,0 115,0 130,13 115,26 0,26 15,13 0,0"

        fill="transparent"

        stroke="red"

        stroke-width="1"

      >

        

      </polyline>

      <foreignObject

        x="0"

        y="0"

        width="130"

        height="26"

      >

        <span

          style="line-height: 26px; transform: translateX(14px); display: inline-block;"

        >

          步骤1111111

        </span>

      </foreignObject>

    </svg>

    

这样就实现了默认样式，文字颜色可以自己调整

完整代码

由于需要遍历数据，所以完整代码是 vue3 风格

<template>

  <div class="next-step-item" @click="stepClick">

    <svg

      :viewBox="`0 0 ${arrowStaticData.width} ${arrowStaticData.height}`"

      :width="arrowStaticData.width"

      :height="arrowStaticData.height"

      :style="{

        transform:

          index === 0

            ? 'translate(0px,0px)'

            : `translate(${arrowStaticData.offsetLeft * index}px,0)`,

      }"

      version="1.1"

      xmlns="http://www.w3.org/2000/svg"

    >

      <polyline

        class="polyline"

        :points="points"

        v-bind="color"

        stroke-width="1"

      ></polyline>

      <foreignObject

        x="0"

        y="0"

        :width="arrowStaticData.width"

        :height="arrowStaticData.height"

      >

        <span

          class="svg-title"

          :style="{

            color: fontColor,

            lineHeight: arrowStaticData.height + 'px',

          }"

          :title="title"

        >

          {{ title }}

        </span>

      </foreignObject>

    </svg>

  </div>

</template>



<script lang="ts" setup>

import { computed } from "vue";



const defaultFontColor = "#fff";

const defaultColor = "transparent";



// 主题颜色

const colorObj = Object.freeze({

  finish: {

    default: {

      stroke: "#16BB60",

      fill: defaultColor,

      color: "#16BB60",

    },

    active: {

      stroke: "#16BB60",

      fill: "#16BB60",

      color: defaultFontColor,

    },

  }, // 绿色

  await: {

    default: {

      stroke: "#edf1f3",

      fill: defaultColor,

      color: "#333",

    },

    active: {

      stroke: "#edf1f3",

      fill: "#edf1f3",

      color: "#333",

    },

  }, // 灰色

  process: {

    default: {

      stroke: "#0A82E5",

      fill: defaultColor,

      color: "#0A82E5",

    },

    active: {

      stroke: "#0A82E5",

      fill: "#0A82E5",

      color: defaultFontColor,

    },

  }, // 蓝色

});

const arrowStaticData = Object.freeze({

  width: 130,

  height: 26,

  hornWidth: 15, // 箭头的大小

  offsetLeft: -7, // step离左侧step的距离，-15则左间距为0

});



const emits = defineEmits(["stepClick"]);



const props = defineProps({

  title: {

    type: String,

    default: "",

  },

  // 类型名称

  typeName: {

    type: String,

    default: "",

  },

  // 是否点中当前的svg

  current: {

    type: Boolean,

    default: false,

  },

  // 当前是第几个step

  index: {

    type: Number,

    default: 0,

  },

});



const points = computed(() => {

  const { width, hornWidth, height } = arrowStaticData;

  return props.index === 0

    ? `0,0  ${width - hornWidth},0 

        ${width},${height / 2} 

        ${width - hornWidth},${height} 

        0,${height} 0,0`

    : `0,0 ${width - hornWidth},0 

        ${width},${height / 2} 

        ${width - hornWidth},${height} 

        0,${height} 

        ${hornWidth},${height / 2} 0,0`;

});



const color = computed(() => {

  let color = {};

  const currentStyleConfig: any = colorObj[props.typeName];

  // 如果当前是被选中的，颜色需要区分

  if (props.current) {

    color = {

      fill: currentStyleConfig.active.fill,

      stroke: currentStyleConfig.active.stroke,

    };

  } else {

    color = {

      stroke: currentStyleConfig.default.stroke,

      fill: currentStyleConfig.default.fill,

    };

  }

  return color;

});



const fontColor = computed(() => {

  const currentStyleConfig: any = colorObj[props.typeName];

  let fontColor = "";

  if (props.current) {

    fontColor = currentStyleConfig.active.color;

  } else {

    fontColor = currentStyleConfig.default.color;

  }

  return fontColor;

});



const stepClick = () => {

  emits("stepClick", props.index);

};

</script>



<style lang="scss" scoped>

.next-step-item {

  cursor: pointer;

  .polyline {

    transition: 0.3s;

  }

  .svg-title {

    padding: 0 15px;

    display: block;

    position: relative;

    width: 100%;

    text-align: center;

    font-weight: bold;

    font-size: 14px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    transition: 0.3s;

    box-sizing: border-box;

  }

}

</style>

使用方式

<template>

  <div>

    <div class="arrow-container">

      <arrow

        v-for="item of arrowList"

        :key="item.index"

        v-bind="item"

        :current="arrowCurrent === item.index"

        @stepClick="changeStepCurrent"

      />

    </div>

  </div>

</template>



<script setup lang="ts">

import { onMounted, reactive, ref } from "vue";

import Arrow from "components/Arrow/index.vue";



const arrowCurrent = ref<number>(0);

const arrowList = [

  {

    index: 0,

    title: "步骤一一一一一一一一一",

    typeName: "process",

  },

  {

    index: 1,

    title: "步骤二一一一一一一一一一",

    typeName: "finish",

  },

    {

    index: 2,

    title: "步骤三",

    typeName: "await",

  },

];



</script>



<style lang="scss">

.arrow-container {

  padding: 30px;

  display: flex;

  width: 800px;

  height: 400px;

  border: 1px solid #ccc;

  margin-top: 100px;

  box-sizing: border-box;

}

</style>



    

完整效果

最近做uniapp项目时遇到一个需求，要求模仿腾讯视频app首页的背景颜色跟随banner图片的主题颜色变化，并且还要兼容H5、APP、微信小程序三端。

由于项目的技术栈为uniapp，所以以下使用uni-ui的组件库作为栗子。

需求分析

腾讯视频app效果如下：

从上图看出，大致分为两步：

1.获取图片主题色

2.设置从上到下的主题色to白色的渐变：

background: linear-gradient(to bottom, 主题色， 白色)

获取主题色主要采用canvas绘图，绘制完成后获取r、g、b三个通道的颜色像素累加值，最后再分别除以画布大小，得到每个颜色通道的平均值即可。

搭建页面结构

page.vue

<script>

  import {

    getImageThemeColor

  } from '@/utils/index'

  export default {

    data() {

      return {

        // 图片列表

        list: [],

        // 当前轮播图索引

        current: 0,

        // 缓存banner图片主题色

        colors: [],

        // 记录当前提取到第几张banner图片

        count: 0

      }

    },

    computed: {

      // 动态设置banner主题颜色背景

      getStyle() {

        const color = this.colors[this.current]

        return {

          background: color ? `linear-gradient(to bottom, rgb(${color}), #fff)` : '#fff'

        }

      }

    },

    methods: {

      // banner改变

      onChange(e) {

        this.current = e.target.current

      },

      getList() {

        this.list = [

          'https://img.zcool.cn/community/0121e65c3d83bda8012090dbb6566c.jpg@3000w_1l_0o_100sh.jpg',

          'https://img.zcool.cn/community/010ff956cc53d86ac7252ce64c31ff.jpg@900w_1l_2o_100sh.jpg',

          'https://img.zcool.cn/community/017fc25ee25221a801215aa050fab5.jpg@1280w_1l_2o_100sh.jpg',

        ]

      },

      // 获取主题颜色

      getThemColor() {

        getImageThemeColor(this, this.list[this.count], 'canvas', (color) => {

          const colors = [...this.colors]

          colors[this.count] = color

          this.colors = colors

          this.count++

          if (this.count < this.list.length) {

            this.getThemColor()

          }

        })

      }

    },

    onLoad() {

      this.getList()

      // banner图片请求完成后，获取主题色

      this.getThemColor()

    }

  }

script>



<style>

  .box {

    display: flex;

    flex-direction: column;

    background-color: deeppink;

    padding: 10px;

  }



  .tabs {

    height: 100px;

    color: #fff;

  }



  .swiper {

    width: 95%;

    height: 200px;

    margin: auto;

    border-radius: 10px;

    overflow: hidden;

  }



  image {

    width: 100%;

    height: 100%;

  }

style>

封装获取图片主题颜色函数

先简单讲下思路 （想直接看源码可直接跳到下面） 。先通过request请求图片地址，获取图片的二进制数据，再将图片资源其转换成base64，调用drawImage进行绘图，最后调用draw方法绘制到画布上。

CanvasContext.draw介绍

更多api使用方法可参考：uniapp官方文档

getImageThemeColor.js

/**

 * 获取图片主题颜色

 * @param path 图片的路径

 * @param canvasId 画布id

 * @param success 获取图片颜色成功回调，主题色的RGB颜色值

 * @param fail 获取图片颜色失败回调

 */

export const getImageThemeColor = (that, path, canvasId, success = () => {}, fail = () => {}) => {

  // 获取图片后缀名

  const suffix = path.split('.').slice(-1)[0]

  // uni.getImageInfo({

  //   src: path,

  //   success: (e) => {

  //     console.log(e.path) // 在安卓app端，不管src路径怎样变化，path路径始终为第一次调用的图片路径

  //   }

  // })

  // 由于getImageInfo存在问题，所以改用base64

  uni.request({

    url: path,

    responseType: 'arraybuffer',

    success: (res) => {

      let base64 = uni.arrayBufferToBase64(res.data);

      const img = {

        path: `data:image/${suffix};base64,${base64}`

      }

      // 创建canvas对象

      const ctx = uni.createCanvasContext(canvasId, that);



      // 图片绘制尺寸

      const imgWidth = 300;

      const imgHeight = 150;



      ctx.drawImage(img.path, 0, 0, imgWidth, imgHeight);



      ctx.save();

      ctx.draw(true, () => {

        uni.canvasGetImageData({

          canvasId: canvasId,

          x: 0,

          y: 0,

          width: imgWidth,

          height: imgHeight,

          fail: fail,

          success(res) {

            let data = res.data;

            let r = 1,

              g = 1,

              b = 1;

            // 获取所有像素的累加值

            for (let row = 0; row < imgHeight; row++) {

              for (let col = 0; col < imgWidth; col++) {

                if (row == 0) {

                  r += data[imgWidth * row + col];

                  g += data[imgWidth * row + col + 1];

                  b += data[imgWidth * row + col + 2];

                } else {

                  r += data[(imgWidth * row + col) * 4];

                  g += data[(imgWidth * row + col) * 4 + 1];

                  b += data[(imgWidth * row + col) * 4 + 2];

                }

              }

            }

            // 求rgb平均值

            r /= imgWidth * imgHeight;

            g /= imgWidth * imgHeight;

            b /= imgWidth * imgHeight;

            // 四舍五入

            r = Math.round(r);

            g = Math.round(g);

            b = Math.round(b);

            success([r, g, b].join(','));

          },

        }, that);

      });

    }

  });

}

主题色计算公式

计算图片主题色的公式主要有两种常见的方法：平均法和主成分分析法。

平均法：

平均法是最简单的一种方法，它通过对图片中所有像素点的颜色进行平均来计算主题色。具体步骤如下：

• 遍历图片的每个像素点，获取其RGB颜色值。


• 将所有像素点的R、G、B分量分别求和，并除以像素点的总数，得到平均的R、G、B值。


• 最终的主题色即为平均的R、G、B值。

主成分分析法

主成分分析法是一种更复杂但更准确的方法，它通过对图片中的颜色数据进行降维处理，提取出最能代表整个图片颜色分布的主要特征。具体步骤如下：

• 将图片的所有像素点的颜色值转换为Lab颜色空间（Lab颜色空间是一种与人眼感知相关的颜色空间）。


• 对转换后的颜色数据进行主成分分析，找出相应的主成分。


• 根据主成分的权重，计算得到最能代表整个图片颜色分布的主题色。

需要注意的是，计算图片主题色的方法可以根据具体需求和算法的实现方式有所不同，上述方法只是其中的两种常见做法。

结语

大家有更好的实现方式，欢迎评论区留言哦！

ECharts