12.【Orangepi Zero2】基于orangepi_Zero_2 Linux的智能家居项目

2024-06-06 15:28
文章标签 orangepi 智能家居 zero2 zero linux 项目

本文主要是介绍12.【Orangepi Zero2】基于orangepi_Zero_2 Linux的智能家居项目，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

基于orangPi Zero 2的智能家居项目

需求及项目准备

  • 语音接入控制各类家电，如客厅灯、卧室灯、风扇
  • 回顾二阶段的Socket编程，实现Sockect发送指令远程控制各类家电
  • 烟雾警报监测， 实时检查是否存在煤气泄漏或者火灾警情，当存在警情时及时触发蜂鸣器报警及语 音播报
  • 控制人脸识别打开房门功能，并语音播报识别成功或者失败
  • 局域网实时视频监控
  • OLED屏实话显示当前主板温度、警情信息及控制指令信息

人脸识别使用阿里SDK支持Python和Java接口，目的是复习巩固智能分类时引入C语言的Python调用。

此接口是人工智能接口，阿里云识别模型是通过训练后的模型，精准度取决于训练程度，人工智能范畴 在常规嵌入式设备负责执行居多。

说白的嵌入式设备负责数据采集，然后转发给人工智能识别后，拿到结果进行执行器动作。

系统框图

在这里插入图片描述

硬件接线

硬件

USB充电头（当前实测可用：5V/2.5A)x1、USB转TYPE-Cx1、SU-03Tx1、烟雾报警模块x1、4路继 电器x1、 OLEDx1、 电磁锁x1（5V吸合开锁）、 蜂鸣器x1、小风扇+电机x1(需要自行购买)、面包 板x1、 5号1.5V电池x6 、 2节电池盒x1、4节电池盒x1、带3路led灯小房子（3.3V可驱动， 需自行 购买搭建）

接线

在这里插入图片描述

在这里插入图片描述

语音模块配置

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

阿里云人脸识别方案

在之前树莓派的人脸识别方案采用了翔云平台的方案去1V1上传比对两张人脸比对，这种方案是可行，可 以继续采用。但为了接触更多了云平台方案，在Orange Pi Zero2里， 讲采用人脸搜索1:N方案，通过提 前在阿里云人脸数据库里存储人脸照片后，输入单张已授权人脸图像，与人脸库中人脸图片进行对比， 最终获取比对结果。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

开通完后， 在”工作台->开发能力->人脸人体->人脸数据库管理 " 添加人脸照片样本 ：

在这里插入图片描述

在这里插入图片描述

  • 数据库默认名字db_name/DbName：default
  • EntityId/实体Id

上传数据库后，安装阿里云人脸识别SDK：

pip install alibabacloud_facebody20191230

导入ALIBABA_CLOUD_ACCESS_KEY_ID和ALIBABA_CLOUD_ACCESS_KEY_SECRET环境变量：

vi ~/.bashrc #最后的结尾添加， 在垃圾分类的项目里如果已经添加过就不需要添加了
export ALIBABA_CLOUD_ACCESS_KEY_ID="你的KEY_ID"
export ALIBABA_CLOUD_ACCESS_KEY_SECRET="你的KEY_SECRECT"

在这里插入图片描述
在这里插入图片描述

可以拿同一人的照片和不同人的照片用官方python代码进行对比：

# -*- coding: utf-8 -*-
# 引入依赖包
# pip install alibabacloud_facebody20191230import os
import io
from urllib.request import urlopen
from alibabacloud_facebody20191230.client import Client
from alibabacloud_facebody20191230.models import SearchFaceAdvanceRequest
from alibabacloud_tea_openapi.models import Config
from alibabacloud_tea_util.models import RuntimeOptionsconfig = Config(# 创建AccessKey ID和AccessKey Secret，请参考https://help.aliyun.com/document_detail/175144.html。# 如果您用的是RAM用户的AccessKey，还需要为RAM用户授予权限AliyunVIAPIFullAccess，请参考https://help.aliyun.com/document_detail/145025.html。# 从环境变量读取配置的AccessKey ID和AccessKey Secret。运行代码示例前必须先配置环境变量。access_key_id=os.environ.get('ALIBABA_CLOUD_ACCESS_KEY_ID'),access_key_secret=os.environ.get('ALIBABA_CLOUD_ACCESS_KEY_SECRET'),# 访问的域名endpoint='facebody.cn-shanghai.aliyuncs.com',# 访问的域名对应的regionregion_id='cn-shanghai'
)search_face_request = SearchFaceAdvanceRequest()
#场景一：文件在本地
def alicloud_Search_Face():stream0 = open(r'/home/orangepi/smarthouse/face.jpg', 'rb')search_face_request.image_url_object = stream0#场景二：使用任意可访问的url#url = 'https://viapi-test-bj.oss-cn-beijing.aliyuncs.com/viapi-3.0domepic/facebody/SearchFace1.png'#img = urlopen(url).read()#search_face_request.image_url_object = io.BytesIO(img)search_face_request.db_name = 'default' #数据库默认名字db_name/DbName : defaultsearch_face_request.limit = 5runtime_option = RuntimeOptions()try:# 初始化Clientclient = Client(config)response = client.search_face_advance(search_face_request, runtime_option)# 获取整体结果print(response.body)if 'MatchList' in response.body.to_map()['Data']:message = response.body.to_map()['Data']['MatchList']scores = []for match in message:for item in match.get('FaceItems', []):score = item.get('Score')if score is not None:  # 确保分数不为 Nonescores.append(score)if scores:  # 确保至少有一个分数max_score = max(scores)value = round(max_score, 2)print(f"The max score = {value}")return valueelse:print("No scores found.")else:print("No matches found.")except Exception as error:# 获取整体报错信息print(error)# 获取单个字段print(error.code)# tips: 可通过error.__dict__查看属性名称if __name__ == "__main__":alicloud_Search_Face()#关闭流
#stream0.close()

一般比对成功的Python字典数据里的score会有大于0.6的值，而比对失败score普遍低于0.1。

例如下面是比对成功的数据：


orangepi@orangepizero2:~/smarthouse$ python3.10 face_test.py
{'Data': {'MatchList': [{'FaceItems': [{'Confidence': 85.15245, 'DbName': 'default', 'EntityId': 'liuyifei', 'FaceId': '150447260', 'Score': 0.814702570438385}, {'Confidence': 84.88723, 'DbName': 'default', 'EntityId': 'liuyifei', 'FaceId': '150447272', 'Score': 0.8113926649093628}, {'Confidence': 7.232084, 'DbName': 'default', 'EntityId': 'linfeng', 'FaceId': '150443939', 'Score': 0.041851237416267395}, {'Confidence': 4.7650957, 'DbName': 'default', 'EntityId': 'Pakho', 'FaceId': '150437504', 'Score': 0.027575060725212097}, {'Confidence': 0.0, 'DbName': 'default', 'EntityId': 'Zillion', 'FaceId': '156036363', 'Score': -0.005117176100611687}], 'Location': {'Height': 162, 'Width': 120, 'X': 220, 'Y': 205}, 'QualitieScore': 99.81394}]}, 'RequestId': '13B42F67-CDAF-5DEF-A3A4-B2ECFCB84679'}
The max score = 0.81

比对失败的数据则如下所示：


orangepi@orangepizero2:~/smarthouse$ python3.10 face_test.py
{'Data': {'MatchList': [{'FaceItems': [{'Confidence': 14.181928, 'DbName': 'default', 'EntityId': 'linfeng', 'FaceId': '150443939', 'Score': 0.08206918835639954}, {'Confidence': 9.166144, 'DbName': 'default', 'EntityId': 'linfeng', 'FaceId': '150443926', 'Score': 0.0530434250831604}, {'Confidence': 7.3621774, 'DbName': 'default', 'EntityId': 'liuyifei', 'FaceId': '150447272', 'Score': 0.042604073882102966}, {'Confidence': 4.4048343, 'DbName': 'default', 'EntityId': 'Pakho', 'FaceId': '150435069', 'Score': 0.02549027092754841}, {'Confidence': 3.6446795, 'DbName': 'default', 'EntityId': 'Pakho', 'FaceId': '150437504', 'Score': 0.021091341972351074}], 'Location': {'Height': 200, 'Width': 157, 'X': 97, 'Y': 134}, 'QualitieScore': 98.50028}, {'FaceItems': [{'Confidence': 5.9368124, 'DbName': 'default', 'EntityId': 'Zillion', 'FaceId': '156036363', 'Score': 0.03435565158724785}, {'Confidence': 4.0936313, 'DbName': 'default', 'EntityId': 'Pakho', 'FaceId': '150435069', 'Score': 0.023689374327659607}, {'Confidence': 2.6310804, 'DbName': 'default', 'EntityId': 'linfeng', 'FaceId': '150443939', 'Score': 0.015225759707391262}, {'Confidence': 2.4909613, 'DbName': 'default', 'EntityId': 'liuyifei', 'FaceId': '150447260', 'Score': 0.01441490650177002}, {'Confidence': 1.2927439, 'DbName': 'default', 'EntityId': 'linfeng', 'FaceId': '150443926', 'Score': 0.007480960339307785}], 'Location': {'Height': 119, 'Width': 135, 'X': 369, 'Y': 531}, 'QualitieScore': 51.177025}]}, 'RequestId': '62CA237A-CC70-5486-9909-22108C853CD1'}
The max score = 0.08

因此，就可以利用获取的最大score的值判断是否大于0.6来判断是否比对成功。

返回数据的说明：

Data：这是一个对象，其中包含了匹配列表的信息。
MatchList：这是一个数组，其中包含了匹配的结果。每个元素都是一个对象，代表一个匹配项。
FaceItems：这是一个数组，其中包含了匹配项中所有人脸的信息。每个元素都是一个对象，包含了一些关于该人脸的信息，如自信度（Confidence）、数据库名（DbName）、实体ID（EntityId）、面部ID（FaceId）和分数（Score）。
Location：这是一个对象，包含了人脸在原始图像中的位置信息，包括宽度（Width）、高度（Height）、左上角的x坐标（X）和y坐标（Y）。
QualitieScore：这是一个浮点数，表示了整个匹配过程的质量得分。

C语言调用阿里云人脸识别接口

face.c
#include <Python.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>void face_Init(void)
{Py_Initialize();PyObject *sys = PyImport_ImportModule("sys");PyObject *path = PyObject_GetAttrString(sys, "path");PyList_Append(path, PyUnicode_FromString("."));
}void face_Finalize(void)
{Py_Finalize();
}double alicloud_Search_Face(void)
{PyObject *pModule = PyImport_ImportModule("face");if (!pModule){PyErr_Print();printf("Error: failed to load face.py\n");goto FAILED_MODULE;}PyObject *pFunc = PyObject_GetAttrString(pModule, "alicloud_Search_Face");if (!pFunc){PyErr_Print();printf("Error: failed to load alicloud_Search_Face\n");goto FAILED_FUNC;}PyObject *pValue = PyObject_CallObject(pFunc, NULL);if (!pValue){PyErr_Print();printf("Error: function call failed\n");goto FAILED_VALUE;}double result = 0.00;if(!PyArg_Parse(pValue, "d", &result)){PyErr_Print();printf("Error: parse failed\n");goto FAILED_RESULT;}printf("result = %lf\n", result);FAILED_RESULT:Py_DECREF(pValue);
FAILED_VALUE:Py_DECREF(pFunc);
FAILED_FUNC:Py_DECREF(pModule);
FAILED_MODULE:return result;
}
main.c
#include <stdio.h>
#include <stdlib.h>
#include "face.h"int main()
{double face = 0.00;face_Init();face  = alicloud_Search_Face();printf("face = %f\n", face);face_Finalize();return 0;
}
face.py
# -*- coding: utf-8 -*-
# 引入依赖包
# pip install alibabacloud_facebody20191230import os
import io
from urllib.request import urlopen
from alibabacloud_facebody20191230.client import Client
from alibabacloud_facebody20191230.models import SearchFaceAdvanceRequest
from alibabacloud_tea_openapi.models import Config
from alibabacloud_tea_util.models import RuntimeOptionsconfig = Config(# 创建AccessKey ID和AccessKey Secret，请参考https://help.aliyun.com/document_detail/175144.html。# 如果您用的是RAM用户的AccessKey，还需要为RAM用户授予权限AliyunVIAPIFullAccess，请参考https://help.aliyun.com/document_detail/145025.html。# 从环境变量读取配置的AccessKey ID和AccessKey Secret。运行代码示例前必须先配置环境变量。access_key_id=os.environ.get('ALIBABA_CLOUD_ACCESS_KEY_ID'),access_key_secret=os.environ.get('ALIBABA_CLOUD_ACCESS_KEY_SECRET'),# 访问的域名endpoint='facebody.cn-shanghai.aliyuncs.com',# 访问的域名对应的regionregion_id='cn-shanghai'
)search_face_request = SearchFaceAdvanceRequest()
#场景一：文件在本地
def alicloud_Search_Face():stream0 = open(r'/home/orangepi/smarthouse/liuyifei_test.jpg', 'rb')search_face_request.image_url_object = stream0#场景二：使用任意可访问的url#url = 'https://viapi-test-bj.oss-cn-beijing.aliyuncs.com/viapi-3.0domepic/facebody/SearchFace1.png'#img = urlopen(url).read()#search_face_request.image_url_object = io.BytesIO(img)search_face_request.db_name = 'default' #数据库默认名字db_name/DbName : defaultsearch_face_request.limit = 5runtime_option = RuntimeOptions()try:# 初始化Clientclient = Client(config)response = client.search_face_advance(search_face_request, runtime_option)# 获取整体结果print(response.body)if 'MatchList' in response.body.to_map()['Data']:message = response.body.to_map()['Data']['MatchList']scores = []for match in message:for item in match.get('FaceItems', []):score = item.get('Score')if score is not None:  # 确保分数不为 Nonescores.append(score)if scores:  # 确保至少有一个分数max_score = max(scores)value = round(max_score, 2)print(f"The max score = {value}")return valueelse:print("No scores found.")else:print("No matches found.")except Exception as error:# 获取整体报错信息print(error)# 获取单个字段print(error.code)# tips: 可通过error.__dict__查看属性名称if __name__ == "__main__":alicloud_Search_Face()#关闭流
#stream0.close()

智能家居项目的软件实现

软件框架
语音监听线程
消息队列
网络监听线程
火灾监测线程
消息接收处理线程
GPIO引脚状态配置
OLED对指令状态的实时显示
语音播报线程
人脸识别
开关卧室灯
开关客厅灯
开关风扇
开门

整个项目开启4个监听线程， 分别是：

  1. 语音监听线程:用于监听语音指令， 当有语音指令过来后， 通过消息队列的方式给消息处理线程发 送指令。
  2. 网络监听线程：用于监听网络指令，当有网络指令过来后， 通过消息队列的方式给消息处理线程发 送指令。
  3. 火灾检测线程：当存在煤气泄漏或者火灾闲情时， 发送警报指令给消息处理线程。
  4. 消息监听线程： 用于处理以上3个线程发过来的指令，并根据指令要求配置GPIO引脚状态，OLED 屏显示、语音播报，还有人脸识别开门。

上述四个线程采用统一个对外接口接口，同时添加到监听链表中。

代码实现

之前讲过智能分类的项目，因为会用到语音模块、OLED显示、网络模块、这些代码都可以从智能分类的 项目中直接拷贝过来使用，另外添加之前准备好的人脸识别的代码 。 另外根据软件框架。再定义gdevice.h和control.h的头文件。

control.h
#ifndef _CONTROL_H_
#define _CONTROL_H_#include <stdlib.h>
#include <stdio.h>struct control
{char control_name[128]; //监听模块名称 int (*init)(void); //初始化函数void (*final)(void);//结束释放函数void *(*get)(void *arg);//监听函数，如语音监听void *(*set)(void *arg); //设置函数，如语音播报struct control *next;
};struct control *add_control_to_ctrl_list(struct control *phead, struct control *device);#endif
control.c
#include "control.h"struct control *add_control_to_ctrl_list(struct control *phead, struct control *ctrl_interface)
{
//    struct control *p = phead;if (phead == NULL){phead = ctrl_interface;printf("%s|%s|%d:\n", __FILE__, __FUNCTION__, __LINE__);return phead;}else{ctrl_interface->next = phead;phead = ctrl_interface;printf("%s|%s|%d:\n", __FILE__, __FUNCTION__, __LINE__);return phead;}return phead;
}
device.h
#ifndef _DEVICE_H_
#define _DEVICE_H_#include <stdio.h>
#include <stdlib.h>
#include <wiringPi.h>struct gdevice
{char dev_name[128]; //设备名称int key; //key值，用于匹配控制指令的值int gpio_pin; //控制的gpio引脚int gpio_mode; //输入输出模式int gpio_status; //高低电平状态int check_face_status; //是否进行人脸检测状态int voice_set_status; //是否语音语音播报struct gdevice *next;
};struct gdevice *add_device_to_gdevice_list(struct gdevice *phead, struct gdevice *device);struct gdevice *find_gdevice_by_key(struct gdevice *pdev, unsigned char key);int set_gpio_gdevice_status(struct gdevice *pdev);#endif
device.c
#include "device.h"struct gdevice *add_device_to_gdevice_list(struct gdevice *phead, struct gdevice *device)
{struct gdevice *p = phead;printf("%s|%s|%d:%p\n", __FILE__, __FUNCTION__, __LINE__, p);if(p == NULL){phead = device;printf("%s|%s|%d:\n", __FILE__, __FUNCTION__, __LINE__);return phead;}else{device->next = phead;phead = device;printf("%s|%s|%d:\n", __FILE__, __FUNCTION__, __LINE__);return phead;}return phead;
}struct gdevice *find_gdevice_by_key(struct gdevice *pdev, unsigned char key)
{struct gdevice *p = pdev;printf("%s|%s|%d:\n", __FILE__, __FUNCTION__, __LINE__);if(p == NULL){printf("%s|%s|%d:\n", __FILE__, __FUNCTION__, __LINE__);return NULL;}while(p != NULL){if(p->key == key){printf("%s|%s|%d:\n", __FILE__, __FUNCTION__, __LINE__);return p;}p = p->next;if(p == NULL){p = pdev;}}return NULL;
}#if 0struct gdevice
{char dev_name[128]; //设备名称int key; //key值，用于匹配控制指令的值int gpio_pin; //控制的gpio引脚int gpio_mode; //输入输出模式int gpio_status; //高低电平状态int check_face_status; //是否进行人脸检测状态int voice_set_status; //是否语音语音播报struct gdevice *next;
};#endifint set_gpio_gdevice_status(struct gdevice *pdev)
{
//    printf("\033[41;30m%s|%s|%d:pdev->gpio_status = %d\033[0m\n", __FILE__, __FUNCTION__, __LINE__, pdev->gpio_status);if (pdev != NULL){printf("%s|%s|%d:pdev->gpio_status = %d\n", __FILE__, __FUNCTION__, __LINE__, pdev->gpio_status);if (pdev->gpio_pin != -1){pinMode(pdev->gpio_pin, pdev->gpio_mode);printf("\033[45;30m%s|%s|%d:gpio_pin = %d, gpio_mode = %d\033[0m\n", __FILE__, __FUNCTION__, __LINE__, pdev->gpio_pin, pdev->gpio_mode);}if(pdev->gpio_status != -1){digitalWrite(pdev->gpio_pin, pdev->gpio_status);printf("%s|%s|%d:pdev->gpio_status = %d\n", __FILE__, __FUNCTION__, __LINE__, pdev->gpio_status);}return 0;}else{
//        printf("%s|%s|%d: \033[41;36m something here \033[0m\n", __FILE__, __FUNCTION__, __LINE__);return -1;}
}
剩余工程代码放在Github上

因为 .c 文件已经多达17个了，虽然是CV但是也很麻烦，干脆直接把整个工程放在 Github 上了。

https://github.com/Zillion6/orangePi_smart_house.git

git clone https://github.com/Zillion6/orangePi_smart_house.git

内置有两个版本的智能家居项目，一个是仅用结构体配置链表，另一个则是用 .inih 轻量级的C库构成链表。

这篇关于12.【Orangepi Zero2】基于orangepi_Zero_2 Linux的智能家居项目的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1036495。

相关文章

linux生产者，消费者问题

linux生产者，消费者问题

pthread_cond_wait() ：用于阻塞当前线程，等待别的线程使用pthread_cond_signal()或pthread_cond_broadcast来唤醒它。 pthread_cond_wait() 必须与pthread_mutex 配套使用。pthread_cond_wait()函数一进入wait状态就会自动release mutex。当其他线程通过pthread
阅读更多...
Linux 安装、配置Tomcat 的HTTPS

Linux 安装、配置Tomcat 的HTTPS

Linux 安装 、配置Tomcat的HTTPS 安装Tomcat 这里选择的是 tomcat 10.X ,需要Java 11及更高版本 Binary Distributions ->Core->选择 tar.gz包 下载、上传到内网服务器 /opt 目录tar -xzf 解压将解压的根目录改名为 tomat-10 并移动到 /opt 下, 形成个人习惯的路径 /opt/tomcat-10
阅读更多...
乐鑫 Matter 技术体验日｜快速落地 Matter 产品，引领智能家居生态新发展

乐鑫 Matter 技术体验日｜快速落地 Matter 产品，引领智能家居生态新发展

随着 Matter 协议的推广和普及，智能家居行业正迎来新的发展机遇，众多厂商纷纷投身于 Matter 产品的研发与验证。然而，开发者普遍面临技术门槛高、认证流程繁琐、生产管理复杂等诸多挑战。  乐鑫信息科技 (688018.SH) 凭借深厚的研发实力与行业洞察力，推出了全面的 Matter 解决方案，包含基于乐鑫 SoC 的 Matter 硬件平台、基于开源 ESP-Matter SDK 的一
阅读更多...
RedHat运维-Linux文本操作基础-AWK进阶

RedHat运维-Linux文本操作基础-AWK进阶

你不用整理，跟着敲一遍，有个印象，然后把它保存到本地，以后要用再去看，如果有了新东西，你自个再添加。这是我参考牛客上的shell编程专项题，只不过换成了问答的方式而已。不用背，就算是我自己亲自敲，我现在好多也记不住。 1. 输出nowcoder.txt文件第5行的内容 2. 输出nowcoder.txt文件第6行的内容 3. 输出nowcoder.txt文件第7行的内容 4. 输出nowcode
阅读更多...
【Linux进阶】UNIX体系结构分解——操作系统，内核，shell

【Linux进阶】UNIX体系结构分解——操作系统，内核，shell

1.什么是操作系统？ 从严格意义上说，可将操作系统定义为一种软件，它控制计算机硬件资源，提供程序运行环境。我们通常将这种软件称为内核（kerel)，因为它相对较小，而且位于环境的核心。  从广义上说，操作系统包括了内核和一些其他软件，这些软件使得计算机能够发挥作用，并使计算机具有自己的特生。这里所说的其他软件包括系统实用程序（system utility）、应用程序、shell以及公用函数库等
阅读更多...
用Microsoft.Extensions.Hosting 管理WPF项目.

用Microsoft.Extensions.Hosting 管理WPF项目.

首先引入必要的包: <ItemGroup><PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" /><PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" /><PackageReference Include="Serilog
阅读更多...
eclipse运行springboot项目，找不到主类

eclipse运行springboot项目，找不到主类

解决办法尝试了很多种，下载sts压缩包行不通。最后解决办法如图： help--->Eclipse Marketplace--->Popular--->找到Spring Tools 3---->Installed。
阅读更多...
Windows/macOS/Linux 安装 Redis 和 Redis Desktop Manager 可视化工具

Windows/macOS/Linux 安装 Redis 和 Redis Desktop Manager 可视化工具

本文所有安装都在macOS High Sierra 10.13.4进行，Windows安装相对容易些，Linux安装与macOS类似，文中会做区分讲解 1. Redis安装 1.下载Redis https://redis.io/download 把下载的源码更名为redis-4.0.9-source，我喜欢跟maven、Tomcat放在一起，就放到/Users/zhan/Documents
阅读更多...
vue项目集成CanvasEditor实现Word在线编辑器

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor 前提声明： 由于CanvasEditor目前不支持vue、react 等框架开箱即用版，所以需要我们去Git下载源码，拿到其中两个主
阅读更多...
React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装，可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 （1）通过position属性,可以控制下拉选项的位置 （2）通过传入width属性, 可以自定义下拉选项的宽度 （3）通过传入classN
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2