react中使用react-konva实现画板框选内容

文章目录

  • 一、前言
    • 1.1、`API`文档
    • 1.2、`Github`仓库
  • 二、图形
    • 2.1、拖拽`draggable`
    • 2.2、图片`Image`
    • 2.3、变形`Transformer`
  • 三、实现
    • 3.1、依赖
    • 3.2、源码
      • 3.2.1、`KonvaContainer`组件
      • 3.2.2、`use-key-press`文件
    • 3.3、效果图
  • 四、最后

一、前言

本文用到的react-konva是基于react封装的图形绘制。Konva 是一个HTML5 Canvas JavaScript 框架,它通过对 2d context 的扩展实现了在桌面端和移动端的可交互性。Konva 提供了高性能的动画,补间,节点嵌套,布局,滤镜,缓存,事件绑定(桌面/移动端)等等功能。你可以使用 Konva 在舞台上绘制图形,给图形添加事件,移动、缩放和旋转图形并且支持高性能的动画即使包含数千个图形。

1.1、API文档

英文文档点击【前往】,中文文档点击【前往】

1.2、Github仓库

点击【前往】访问Github仓库,在线示例地址,点击【前往】

二、图形

在线制图最基础的应用是拖拽元素,比如,在画布上拖拽一张图片或某种形状,对该图片进行缩放或旋转操作。

画布就是<Stage>,每个图层为<Layer>

2.1、拖拽draggable

konva 中内置了很多形状的元素,比如圆形、矩形等,以下示例为星型,这里先用<Star>试一下:

import Konva from 'konva'
import { Circle, Rect, Stage, Layer, Text, Star } from 'react-konva'const Shape = () => {const [star, setStar] = useState({x: 300,y: 300,rotation: 20,isDragging: false,})const handleDragStart = () => {setStar({...star,isDragging: true,})}const handleDragEnd = (e: any) => {setStar({...star,x: e.target.x(),y: e.target.y(),isDragging: false,})}return (<Stage width={1000} height={600}><Layer><Starkey="starid"id="starid"x={star.x}y={star.y}numPoints={5}innerRadius={20}outerRadius={40}fill="#89b717"opacity={0.8}draggablerotation={star.rotation}shadowColor="black"shadowBlur={10}shadowOpacity={0.6}shadowOffsetX={star.isDragging ? 10 : 5}shadowOffsetY={star.isDragging ? 10 : 5}scaleX={star.isDragging ? 1.2 : 1}scaleY={star.isDragging ? 1.2 : 1}onDragStart={handleDragStart}onDragEnd={handleDragEnd}/></Layer></Stage>)
}

其中,可以给 Star 配置一些基础的属性,如:xy 指该元素在画布上的坐标位置,rotaition 指元素的旋转角度;fill 指元素的填充颜色,scaleXscaleY 指元素在 xy 轴上的放大比例等等。

在拖拽的时候,我们要给该元素添加一些拖拽事件,如上:添加 handleDragStart 更改isDragging属性,使其在拖动时产生形变;添加 onDragEnd 事件,更改isDraggingxy 属性,来改变拖动位置,关闭拖动形变特效等。

观察上面的代码发现某些属性和react-dnd类似,但在使用 drag 事件的时候,发现比 react-dnd 方便很多,可能因为底层是 canvas 的原因吧!

2.2、图片Image

有两种方式可以导入图片,一个是用 react-hooks,一个是调用 react 生命周期函数,这里为了图省事,用 hooks

先安装 konva 的官方库use-imageuse-image提供好了跨域属性anonymous,封装一下图片组件:

import { Image } from 'react-konva'
import useImage from 'use-image'const KonvaImage = ({ url = '' }) => {const [image] = useImage(url, 'anonymous')return <Image image={image} />
}export default KonvaImage

如果仍显示跨域问题不能生成图片,需要在服务器端添加跨域头或者做一层转发了。

2.3、变形Transformer

元素变形,需要引用 konvaTransformer组件,该组件可以使元素的缩放、旋转。如下代码,在选中某元素后,会展示 Transformer 组件,在该组件上存在boundBoxFunc属性,当用户触发元素的变形行为时,该函数会被调用,返回一个包含形变后元素的信息(下面代码中为 newBox)。

import React, { useState, useEffect, useRef } from 'react'
import { Image, Transformer } from 'react-konva'
import Konva from 'konva'
import useImage from 'use-image'const KonvaImage = ({ url = '', isSelected = false }) => {const [image] = useImage(url)const imgRef = useRef()const trRef = useRef()useEffect(() => {if (isSelected) {trRef.current.nodes([imgRef.current])trRef.current.getLayer().batchDraw()}}, [isSelected])return (<><Image image={image} draggable ref={imgRef} />{isSelected && (<Transformerref={trRef}boundBoxFunc={(oldBox, newBox) => {// limit resizeif (newBox.width < 5 || newBox.height < 5) {return oldBox}const { width, height } = newBox// console.log('width', width);// console.log('height', height);return newBox}}/>)}</>)
}export default KonvaImage

三、实现

3.1、依赖

安装如下所需依赖:

npm install react-konva konva use-image --save

3.2、源码

3.2.1、KonvaContainer组件

KonvaContainer图片框选区域组件源码如下所示:

/*** @Description: KonvaContainer图片框选区域组件* @props url 需要框选的图片的URL地址* @props width 宽度* @props height 高度* @props defaultValue 默认框选起来区域的数据* @onChange 回调方法,通知父组件框选的内容信息* @author 小马甲丫* @date 2023-12-05 03:22:27
*/
import React from 'react';
import useImage from 'use-image';
import { Stage, Layer, Rect, Image, Transformer } from 'react-konva';
import useKeyPress from '@/hooks/use-key-press';/*** 框选的图片* @param url* @constructor*/
const BackgroundImage = ({ url }) => {const [image] = useImage(url);return <Image image={image} />;
};/*** 背景白板* @param width* @param height* @constructor*/
const BackgroundWhite = ({ width, height }) => {return (<Rectx={0}y={0}width={width}height={height}fill="#fff"id="rectangleBg"name="rectangleBg"/>);
};/*** 框选出来的框* @param canvas* @param shapeProps* @param onSelect* @param onChange* @constructor*/
const Rectangle = ({ canvas, shapeProps, onSelect, onChange }) => {const shapeRef = React.useRef();return (<RectonClick={() => onSelect(shapeRef)}onTap={() => onSelect(shapeRef)}ref={shapeRef}{...shapeProps}name="rectangle"draggableonMouseOver={() => {document.body.style.cursor = 'move';}}onMouseOut={() => {document.body.style.cursor = 'default';}}onDragEnd={(e) => {onChange({...shapeProps,x: e.target.x(),y: e.target.y(),});}}dragBoundFunc={(pos) => {const shapeWidth = shapeRef.current.attrs.width;const shapeHeight = shapeRef.current.attrs.height;let x = pos.x;if (x <= 0) {x = 0;} else if (x + shapeWidth >= canvas.width) {x = canvas.width - shapeWidth;}let y = pos.y;if (y < 0) {y = 0;} else if (y + shapeHeight > canvas.height) {y = canvas.height - shapeHeight;}return {x,y,};}}onTransformEnd={() => {// transformer is changing scale of the node// and NOT its width or height// but in the store we have only width and height// to match the data better we will reset scale on transform endconst node = shapeRef.current;const scaleX = node.scaleX();const scaleY = node.scaleY();// we will reset it backnode.scaleX(1);node.scaleY(1);onChange({...shapeProps,x: node.x(),y: node.y(),// set minimal valuewidth: Math.max(5, node.width() * scaleX),height: Math.max(node.height() * scaleY),});}}/>);
};/*** 主容器* @param props* @constructor*/
const KonvaContainer = (props) => {const [imageObject, setImageObject] = React.useState({width: props.width,height: props.height,url: props.url,});const [rectanglesField, setRectanglesField] = React.useState([]);const [selectedId, selectShape] = React.useState(null);const trRef = React.useRef();const layerRef = React.useRef();const Konva = window.Konva;const hideTransformer = () => {trRef.current.nodes([]);};/*** 初始化框选框* @param list*/const initRectangles = (list) => {const rects = list.map((item, index) => ({...item,id: `rect_${index}`,fill: 'rgb(160, 76,4, 0.3)',}));setRectanglesField(rects);};/*** 监听prop值变换*/React.useEffect(() => {const {url = '',width = 0,height = 0,defaultValue = [],} = props || {};setImageObject({width,height,url,});hideTransformer();// 图片地址不一致说明变更图片,需要重置选框if (url !== imageObject.url) {setRectanglesField([]);selectShape(null);}initRectangles(defaultValue);}, [props.url, props.width, props.height, props.defaultValue]);/*** 更新框选框数据* @param rects*/const updateRectangles = (rects) => {setRectanglesField(rects);props.onChange(rects);};/*** 添加框选框*/const addRec = () => {const data = rectanglesField;const rects = data.slice();const id = `rect_${rects.length}`;rects[rects.length] = {id,...getSelectionObj(),};updateRectangles(rects);selectShape(id);};/*** 删除框选框*/const delRec = () => {const data = rectanglesField;const rects = data.slice().filter((rect) => rect.id !== selectedId);updateRectangles(rects);hideTransformer();document.body.style.cursor = 'default';selectShape(null);};const selectionRectRef = React.useRef();const selection = React.useRef({visible: false,x1: 0,y1: 0,x2: 0,y2: 0,});/*** 高亮框选框* @param id*/const activeTransformer = (id) => {const activeRect =layerRef.current.find('.rectangle').find((elementNode) => elementNode.attrs.id === id) ||selectionRectRef.current;trRef.current.nodes([activeRect]);};/*** useKeyPress监听键盘按键删除键del和返回键backspace* 8  返回键* 46 删除键*/useKeyPress([8, 46], (e) => {// disable click eventKonva.listenClickTap = false;if (e.target.style[0] === 'cursor') delRec();});/*** 获取选中的框选框的信息*/const getSelectionObj = () => {return {x: Math.min(selection.current.x1, selection.current.x2),y: Math.min(selection.current.y1, selection.current.y2),width: Math.abs(selection.current.x1 - selection.current.x2),height: Math.abs(selection.current.y1 - selection.current.y2),fill: 'rgb(160, 76,4, 0.3)',};};/*** 更新框选框*/const updateSelectionRect = () => {const node = selectionRectRef.current;node.setAttrs({...getSelectionObj(),visible: selection.current.visible,});node.getLayer().batchDraw();};/*** 开始绘制框选框* @param e*/const onMouseDown = (e) => {const isTransformer = e.target.findAncestor('Transformer');if (isTransformer) {return;}hideTransformer();const pos = e.target.getStage().getPointerPosition();selection.current.visible = true;selection.current.x1 = pos.x;selection.current.y1 = pos.y;selection.current.x2 = pos.x;selection.current.y2 = pos.y;updateSelectionRect();};/*** 绘制框选框中* @param e*/const onMouseMove = (e) => {if (!selection.current.visible) {return;}const pos = e.target.getStage().getPointerPosition();selection.current.x2 = pos.x;selection.current.y2 = pos.y;updateSelectionRect();};/*** 结束绘制框选框* @param e*/const onMouseUp = (e) => {// 点击Rect框时,会返回该Rect的id// 画框时鼠标在Rect上松开,会返回该Rect的idconst dragId = e.target.getId();if (!selection.current.visible) {return;}// 是否鼠标拖动,并且偏移量大于10时才算拖动。拖动Rect没有偏移量,画框才有偏移量const { current: { x1 = 0, x2 = 0, y1 = 0, y2 = 0 } = {} } = selection || {};const isMove = (x1 !== x2 && Math.abs(x1 - x2) > 10) || (y1 !== y2 && Math.abs(y1 - y2) > 10);// 点击后有拖动就添加Rect框,并且偏移量大于10时才算拖动if (isMove) {addRec();}// 设置可调节大小节点if (!!dragId && !isMove) {// 点击已有的Rect框才设置,并且拖动小于10,也就是没有拖动activeTransformer(dragId);} else if (isMove) {// 拖动大于10,生成新的Rect框activeTransformer();}selection.current.visible = false;// disable click eventKonva.listenClickTap = false;updateSelectionRect();};return (<Stagewidth={imageObject.width}height={imageObject.height}onMouseDown={onMouseDown}onMouseUp={onMouseUp}onMouseMove={onMouseMove}><Layer ref={layerRef}><BackgroundWhite {...imageObject} /><BackgroundImage {...imageObject} />{rectanglesField.map((rect, i) => {return (<Rectanglekey={i}getKey={i}canvas={imageObject}shapeProps={rect}isSelected={rect.id === selectedId}getLength={rectanglesField.length}onSelect={() => {selectShape(rect.id);}}onChange={(newAttrs) => {const rects = rectanglesField.slice();rects[i] = newAttrs;updateRectangles(rects);}}/>);})}<Transformerref={trRef}rotationSnaps={[0, 90, 180, 270]}keepRatio={false}anchorSize={4}anchorStroke='#a04c04'anchorFill="#fff"borderStroke='#a04c04'borderDash={[1, 1]}enabledAnchors={['top-left', 'top-right', 'bottom-left', 'bottom-right']}boundBoxFunc={(oldBox, newBox) => {// limit resize// newBox.rotation !== 0进入return oldBox,就可实现不让旋转if (newBox.width < 20 || newBox.height < 20) {return oldBox;}return newBox;}}/><Rect ref={selectionRectRef} /></Layer></Stage>);
};export default KonvaContainer;

3.2.2、use-key-press文件

用到了下面这个hook文件use-key-press

import { useCallback, useEffect, MutableRefObject } from 'react';type keyType = KeyboardEvent['keyCode'] | KeyboardEvent['key'];
type keyFilter = keyType | keyType[];
type EventHandler = (event: KeyboardEvent) => void;
type keyEvent = 'keydown' | 'keyup';
type BasicElement = HTMLElement | Element | Document | Window;
type TargetElement = BasicElement | MutableRefObject<null | undefined>;
type EventOptions = {events?: keyEvent[];target?: TargetElement;
};const modifierKey: any = {ctrl: (event: KeyboardEvent) => event.ctrlKey,shift: (event: KeyboardEvent) => event.shiftKey,alt: (event: KeyboardEvent) => event.altKey,meta: (event: KeyboardEvent) => event.metaKey,
};const defaultEvents: keyEvent[] = ['keydown'];/*** 判断对象类型* @param obj 参数对象* @returns String*/
function isType<T>(obj: T): string {return Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();
}/*** 获取当前元素* @param target TargetElement* @param defaultElement 默认绑定的元素*/
function getTargetElement(target?: TargetElement, defaultElement?: BasicElement) {if (!target) {return defaultElement;}if ('current' in target) {return target.current;}return target;
}/*** 按键是否激活* @param event 键盘事件* @param keyFilter 当前键*/
const keyActivated = (event: KeyboardEvent, keyFilter: any) => {const type = isType(keyFilter);const { keyCode } = event;if (type === 'number') {return keyCode === keyFilter;}const keyCodeArr = keyFilter.split('.');// 符合条件的长度let genLen = 0;// 组合键keyCodeArr.forEach((key) => {const genModifier = modifierKey[key];if ((genModifier && genModifier) || keyCode === key) {genLen++;}});return genLen === keyCodeArr.length;
};/*** 键盘按下预处理方法* @param event 键盘事件* @param keyFilter 键码集*/
const genKeyFormate = (event: KeyboardEvent, keyFilter: any) => {const type = isType(keyFilter);if (type === 'string' || type === 'number') {return keyActivated(event, keyFilter);}// 多个键if (type === 'array') {return keyFilter.some((item: keyFilter) => keyActivated(event, item));}return false;
};/*** 监听键盘按下/松开* @param keyCode* @param eventHandler* @param options*/
const useKeyPress = (keyCode: keyFilter,eventHandler?: EventHandler,options: EventOptions = {},
) => {const { target, events = defaultEvents } = options;const callbackHandler = useCallback((event) => {if (genKeyFormate(event, keyCode)) {typeof eventHandler === 'function' && eventHandler(event);}},[keyCode],);useEffect(() => {const el = getTargetElement(target, window)!;events.forEach((eventName) => {el.addEventListener(eventName, callbackHandler);});return () => {events.forEach((eventName) => {el.removeEventListener(eventName, callbackHandler);});};}, [keyCode, events, callbackHandler]);
};export default useKeyPress;

3.3、效果图

页面效果如下所示:

在这里插入图片描述

四、最后

本人每篇文章都是一字一句码出来,希望大佬们多提提意见。顺手来个三连击,点赞👍收藏💖关注✨。创作不易,给我打打气,加加油☕

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/211157.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基础课20——从0-1客服机器人生命周期

温馨提示&#xff1a;篇幅较长&#xff0c;可点击目录查看对应节点。 1.机器人搭建期 搭建机器人包含&#xff1a;素材整理、问题提炼、相似问题补充、答案编辑、问题分配引擎等等步骤&#xff0c;不同厂商可能有所区别&#xff0c;但关键功能的实现离不开以下步骤。 1.1素材…

Flutter路由的几种用法

Flutter路由跳转 基本路由跳转 ElevatedButton(onPressed: () {//基本路由跳转Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {return const SearchPage();}),);},child: const Text("基本路由跳转"), ), search.dart页面 impo…

说说react的事件机制?

React的事件机制是一种用于处理用户界面事件的方式&#xff0c;它建立在原生DOM事件的基础上&#xff0c;提供了一种更高级、更一致的方式来处理事件。 1. 合成事件&#xff08;Synthetic Events&#xff09;&#xff1a;React引入了合成事件的概念&#xff0c;它是一种React自…

K8S学习指南(3)-minikube的安装

这里写自定义目录标题 简介Windows 系统安装步骤 1&#xff1a;安装 Hypervisor步骤 2&#xff1a;安装 kubectl步骤 3&#xff1a;安装 Minikube步骤 4&#xff1a;启动 Minikube CentOS 系统安装步骤 1&#xff1a;安装 Hypervisor步骤 2&#xff1a;安装 kubectl步骤 3&…

《形式语言与自动机理论(第4版)》笔记(三)

文章目录 [toc]前导《形式语言与自动机理论&#xff08;第4版&#xff09;》笔记&#xff08;一&#xff09;《形式语言与自动机理论&#xff08;第4版&#xff09;》笔记&#xff08;二&#xff09; 第四章&#xff1a;正则表达式4.1|启示4.2|正则表达式的形式定义正则表达式性…

排序算法之四:直接选择排序

1.基本思想 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的数据元素排完 。 2.直接选择排序 在元素集合array[i]--array[n-1]中选择关键码最大(小)的数据元素 若它不是这组元素中的…

练习:最大公约数

1.什么是公约数 公约数&#xff0c;亦称“公因数”。 它是指能同时整除几个整数的数 。 如果一个整数同时是几个整数的 约数 &#xff0c;称这个整数为它们的“公约数”&#xff1b;公约数中最大的称为最大公约数。 2.辗转相除法 辗转相除法之所以有效是因为其基于一个核心原…

给定有n个结点的树和长度为n的排列,q次询问:l, r, x, 若p[l, r]中存在至少一个结点是x的后代,输出yes,否则输出no

题目 #include<bits/stdc.h> using namespace std; const int maxn 1e6 5; int n, q; vector<int> G[maxn]; int L[maxn], R[maxn];//L[i]表示结点i的时间戳&#xff0c;R[i]表示结点i的后代中时间戳的最大值 int p[maxn]; int t[maxn]; struct Node{int id, fl…

MapReduce

1. 请解释MapReduce的工作原理。 MapReduce是一种编程模型&#xff0c;主要用于大规模数据集&#xff08;特别是非结构化数据&#xff09;的并行处理。这个模型的核心思想是将大数据处理任务分解为两个主要步骤&#xff1a;Map和Reduce。 在Map阶段&#xff0c;输入数据被分解…

ssm的健身房预约系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; ssm的健身房预约系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring Spring…

AI模型平台Hugging Face存在API令牌漏洞;大型语言模型与任务模型

&#x1f989; AI新闻 &#x1f680; AI模型平台Hugging Face存在API令牌漏洞&#xff0c;黑客可窃取、修改模型 摘要&#xff1a;安全公司Lasso Security发现AI模型平台Hugging Face上存在API令牌漏洞&#xff0c;黑客可获取微软、谷歌等公司的令牌&#xff0c;并能够访问模…

c++中的内联函数和编译器

内联函数和编译器&#xff1a; 内联函数并不是何时何地都有效&#xff0c;为了理解内联函数何时有效&#xff0c;应该要知道编译器碰到内联 函数会怎么处理&#xff1f; 对于任何类型的函数&#xff0c;编译器会将函数类型(包括函数名字&#xff0c;参数类型&#xff0c;返回值…

Unknown parameter in InstanceGroups[0]: “Configurations“, must be ... 解决方法

使用 aws emr modify-instance-groups 更新集群配置时可能会遇到如下错误信息&#xff1a; Unknown parameter in InstanceGroups[0]: “Configurations”, must be one of: InstanceGroupId, InstanceCount, EC2InstanceIdsToTerminate, ShrinkPolicy 这一报错其实和提供的j…

C语言进阶之路之顶峰相见篇

目录 一、学习目标 二、宏定义 预处理 宏的概念 带参宏 无值宏定义 三、条件编译 条件编译 条件编译的使用场景 四、头文件 头文件的作用 头文件的内容 头文件的基础语句&#xff1a; GCC编译器的4个编译步骤&#xff1a; 总结 一、学习目标 掌握宏定义含义和用…

【Linux】系统初识之冯诺依曼体系结构与操作系统

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.冯诺依曼体系结构 2.操作…

Springboot项目实现简单的文件服务器,实现文件上传+图片及文件回显

文章目录 写在前面一、配置1、application.properties2、webMvc配置3、查看效果 二、文件上传 写在前面 平常工作中的项目&#xff0c;上传的文件一般都会传到对象存储云服务中。当接手一个小项目&#xff0c;如何自己动手搭建一个文件服务器&#xff0c;实现图片、文件的回显…

一篇文章带你了解并使用mybatis框架

mybatis简介&#xff1a; MyBatis 是一款优秀的持久层框架&#xff0c;它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO&#xff08;P…

JavaScript中的发布订阅和观察者模式:如何优雅地处理事件和数据更新

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;JavaScript篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-订阅观察者模式 目录 说说你对发布订阅、观察者模式的理解&#xff1f;…

用生命做事,无人能超越

今天看了《艺术人生——红楼梦剧组20年再聚首》&#xff0c;然后搜索了一下里面的核心人物及其经历。实话说&#xff0c;看完后我内心无法平静&#xff0c;涌动着各种思绪。一是20多年前这群青涩演员的人生际遇&#xff0c;让我感慨。很多人&#xff0c;用这样的机会&#xff0…

‘ChatGLMTokenizer‘ object has no attribute ‘tokenizer‘解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…