- 博客(71)
- 收藏
- 关注
RSS订阅原创 svg学习记录（十一）
在某些情况下，一些基本的svg图形并不能实现诸如阴影、模糊等效果。而滤镜(filter)就是用来解决创建复杂效果的难题的。filterSVG过滤器在应用过滤效果的时候需要一个输入源，这个输入源可以是一个图形或者一个图形的alpha通道，或另一个过滤器的输入值。SVG过滤器可以从输入源中产生一个输出图像。一个过滤器的输出可以是另一个过滤器的输入，这样，过滤器可以被链接起来使用。滤镜与之前定义渐变效果类似，它需要在def标签中定义，然后再通过它的ID值引用到图形元素中。模糊效果我们看一个简单的例子：
2022-01-23 18:11:50
660
原创 实现antd的Upload组件复制粘贴上传文件
记录一下工作中学习，需求背景：用户在上传项目中遇到的问题图片时，需要先用截图工具保存图片到本地，然后再点击上传按钮来上传图片，操作繁琐，能不能像聊天工具一样支持复制粘贴上传。需求描述：支持用户粘贴上传图片。首先先展示一下项目中使用上传组件的逻辑，展示不了公司代码，就自己写的小demo，代码有待优化。import React, { useEffect, useState } from 'react';import { Upload, Modal } from 'antd';import * as _
2022-01-16 19:28:38
2062
4
原创 React实现组件的拖拽
加粗样式近期接到了一个使antd的Drawer组件可以拖拽的需求，以前没有写过类似的案例，只能去网上搜索解决方案，发现有挺多react的拖拽的组件，但是项目中不允许随便引用组件，只能使用原生HTML的拖拽方案了。下面记录一下学习的心得：了解HTML的拖拽注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。提示： 链接和图片默认是可拖动的，不需要 draggable 属性。在拖放的过程中会触发以下事件：在拖动目标上触发事件 (源元素):ondragstart - 用户开始拖
2022-01-09 20:46:27
5374
3
原创 svg学习记录（十）
svg支持多种遮罩效果，分别为剪切路径和遮罩。剪切路径：图形在剪切路径内是可见的，在剪切路径外是不可见的；遮罩mask：遮罩是一种容器，它定了一组图形并把它们作为半透明的媒介可以用来组合前景对象和背景。剪切路径和遮罩的一个重要区别就是：剪切路径是一位蒙版，也就是说剪切路径的对象要么是全透明的，要么是全不透明的。而蒙版可以指定不同位置的透明度。剪切剪切路径使用clipPath标签定义，后使用clip-path属性引用，它用于限制一个图形的显示。当图形超出clipPath规定的范围，那么超
2022-01-03 21:22:17
382
原创 svg学习记录（九）
在学习完SVG图形的基本绘制之后，和CSS一样，SVG的图形中也可以进行图形的移动、旋转、缩放等转换操作。gg这个标签，它用于图形的集合，利用g可以批量的给集合中的图形进行批量赋值。<g fill="red"> <circle cx="10" cy="10" width="30" height="30" r="10"></circle> <circle cx="40" cy="10" width="30" height="30" r="10"&
2021-12-26 21:07:15
539
原创 svg学习记录（八）
在SVG中有两种截然不同的文本模式. 一种是写在图像中的文本，另一种是SVG字体。关于后者我们将在教程的后面进行讲解，现在我们主要集中前者：写在图像中的文本。texttext标签用于在画布中，放置任何的文字。<text x="10" y="20">Hello</text>文字的内容写在text标签体中，x和y分别代表文本在画布中显示的位置。text-anchor该属性用于设置文本从坐标点中的文本流方向，值分别是start、end、middle、inherit。从下面图
2021-12-19 20:30:04
344
原创 svg学习记录（七）
在SVG中，图形对象一般使用fill 、stroke进行填充。SVG可以自定义一个图形作为填充的背景，这个图形可以是一个SVG元素，也可以是位图图像，下面我们结合实例来讲解如何去使用。图案pattern标签用于定义一个填充对象，可以将定义的这个对象到指定图形中进行重复、平铺、覆盖填充。之后使用自身的属性fill / stroke来引用自定义的填充对象pattern。它和渐变一样，需要被放置到defs标签中。我们先看下这个简单例子：<svg width="200" height="200"&g
2021-12-12 20:58:20
574
1
原创 svg学习记录（六）
在SVG中，并非只能填充图形颜色和添加描边，你也可以像CSS一样，给绘制的图形应用添加渐变色。分为线性渐变、径向渐变，具体如何应用渐变色我们进行看下去，在SVG中我们不能使用linear-gradient函数，这是无效代码！！线性渐变线性渐变是沿着直线改变颜色，我们看一个线性渐变的例子：<svg width="300" height="500"> <defs> <linearGradient id="test"> &l
2021-12-05 21:01:59
478
原创 svg学习记录（五）
在上一篇文章介绍了如何使用SVG中最强大的path路径进行图形绘制，在之前的一些例子中我们在绘制图形时使用了一些属性，例如stroke、fill，今天本篇将详细讲讲这些属性是怎么使用的。fillfill属性设置绘制图形中内部的颜色（默认为black），如果你不想填充色可以将fill值设置为none，例如：<rect x="10" y="10" width="50" height="50"></rect><rect x="70" y="10" width="50" hei
2021-11-28 21:30:23
484
原创 svg学习记录（四）
前面学习了基本图形的绘画后，我们将更深入的学习SVG中的path路径绘制。小写命令符的区别在上一篇文章中的两个例子，我们的命令都是使用大写字母的方式来绘制我们的图形的，其实也可以使用小写字母的方式来绘画。但，小写字母是相对命令，类似于电脑中的相对路径和绝对路径，它们的参数不是指定一个明确的目标，而是表示相对于它前面的点需要移动多少距离。例如前面的示例，画的是一个200*100的矩形，用相对命令可以这样描述：<path d="M10 10 h 200 v 80 h -200 Z" fill="re
2021-11-21 21:16:07
505
原创 svg学习记录(三)
在前面，已经学习了SVG的一些基础知识，了解SVG在页面中的定位，viewBox属性的使用场景还有它的兄弟preserveAspectRatio属性，有了这些基础知识之后，现在来学习SVG中图形的基本绘画。基本绘画矩形以下代码代表绘制一个矩形，rect标签中的x、y属性分别指定了矩形左上角端点的横坐标和纵坐标，width、height属性分别指定矩形的宽度和高度。<circle cx="100" cy="50" r="100" fill="red"></circle>
2021-11-14 19:52:03
463
原创 svg学习记录(二)
在上一篇文章中，已经介绍了简单的SVG的绘画，如何去引入SVG文件。接下来继续看看SVG中的定位系统与viewBox的知识点。SVG定位在SVG元素使用的是坐标系统（网络系统），和Canvas类似。以页面的左上角为起标点，以px为单位，x轴的正方形是向右边的，而y轴正方向是向下边。看下面这个例子，绘画一个矩形，在rect标签中加入x和y属性，从左上角开始，向右边偏移50px的距离，再向下偏移60px的距离，开始绘画一个宽高各100的矩形。<svg width="200" height="200
2021-10-31 22:25:54
299
原创 svg学习记录(一)
什么是SVGSVG诞生于1999年，是一种XML语言，类似XHTML，即SVG，可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变、合成、或者通过滤镜完全改变外观。为什么学SVG？它有什么优势？比起其他的图像格式（例如jpg，gif），SVG的优点是:1.可以使用任何文本编辑器来创建绘画SVG。2.可以搜索、索引、脚本化、压缩SVG图像。3.SVG图像可以扩展，可以在任何分辨率
2021-10-24 21:35:15
200
原创 TypeScript中的运算符和操作符
介绍一下TypeScript中的其中常见的操作符和运算符一、非空断言操作符 (!)在上下文中，当类型检查器无法断定类型时，一个新的后缀表达式操作符 – ！可以用于断言操作对象是非null和非undefined的时。接下来看看其具体使用场景：赋值时忽略 null 和 undefinedconst fn = (name: string | null | undefined) => { const objName: string = name; // 报错 const objName: s
2021-10-17 20:28:48
1229
原创 前端实现人员关系图谱
入职前端工作到现在差不多有一年半的时间了，和朋友偶然聊天的时候被问到，能不能用所学的前端知识做一个家族关系的族谱，可以使家族关系更加简单明了。当时听完这个需求，觉得可能还是蛮简单的，后来动手做的时候，发现族谱的连线，是需要根据返回的数据动态生成的，这就是我这个小前端，有点头秃了????。解决技术困难当时阻碍我前进的就是如何实现族谱的连线以及根据数据渲染它们的对应关系，后来在逛博客的过程中，发现了antdesign的charts图表组件。利用这个组件，如果可以进行一些改造，可能就可以实现族谱的关系图。
2021-09-21 18:01:10
8713
7
原创 React虚拟dom
虚拟DOM(Virtual DOM)什么是虚拟DOM一句话总结虚拟DOM就是一个用来描述真实DOM的javaScript对象,这样说可能不够形象,下面分别用代码来描述真实DOM以及虚拟DOM。真实dom：<ul class="list"> <li>a</li> <li>b</li> <li>c</li></ul>对应的虚拟DOM:let vnode = h('ul.li
2021-09-12 19:42:56
192
原创 什么是函数式编程
函数式编程是声明式编程的一部分。javascript中的函数是第一类公民，这意味着函数是数据，你可以像保存变量一样在应用程序中保存、检索和传递这些函数。函数式编程有些核心的概念，如下：不可变性(Immutability)纯函数(Pure Functions)数据转换(Data Transformations)高阶函数 (Higher-Order Functions)递归组合不可变性(Immutability)不可变性意味着不可改变。 在函数式编程中，你无法更改数据，也不能更改。 如果要
2021-09-05 20:26:39
1837
原创 React捕捉错误
错误在我们日常编写代码是非常常见的。举个例子，在react项目中去编写组件内JavaScript代码错误会导致 React 的内部状态被破坏，导致整个应用崩溃，这是不应该出现的现象。作为一个框架，react也有自身对于错误的处理的解决方案。如何捕捉错误为了解决出现的错误导致整个应用崩溃的问题，react16引用了错误边界新的概念错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组
2021-08-29 19:43:48
729
原创 React 中的 key的作用
一、是什么首先，给出react组件中进行列表渲染的一个示例：const data = [ { id: 0, name: 'abc' }, { id: 1, name: 'def' }, { id: 2, name: 'ghi' }, { id: 3, name: 'jkl' }];const ListItem = (props) => { return <li>{props.name}</li>;};const List = () =>
2021-08-22 19:16:21
538
原创 扁平数据结构转Tree型数据
看到这样一个题目：将以下数据按要求输出：let arr = [ {id: 1, name: '部门1', pid: 0}, {id: 2, name: '部门2', pid: 1}, {id: 3, name: '部门3', pid: 1}, {id: 4, name: '部门4', pid: 3}, {id: 5, name: '部门5', pid: 4},]输出结果：[ { "id": 1, "name": "
2021-08-15 21:14:12
401
原创 前端实现两个盒子同步滚动
最近在工作中有一个版本对比的需求，左右两边的展示不同的版本，在滚动左边版本的时候右边版本也随之滚动。当时做的时候准备打算用一个大盒子包括这两个盒子，滚动的时候滚动最外面的大盒子，后来因为组长规划的是两个版本用一个组件，传一个叫做position的props，再传不同版本的数据就可以。后来考虑了一下，在我的知识范围里面如果不能用盒子包括，就只能用事件监听加上操纵dom了。下面是我的实现方法。 import React, {Component} from 'react';import './Test.css
2021-08-08 22:20:11
1357
原创 fetch通信
随着前端异步的发展, XHR 这种耦合方式的书写不利于前端异步的 Promise 回调. 而且,写起来也是很复杂. fetch API 本来是在 SW(ServiceWorkers) 中提出的, 不过, 后面觉得好用, 就把他挂载到 window 对象下. 这样, 在前端的正常通信中, 我们也可以直接调用。兼容性作为一个未来常用的api,看一下他的兼容性。可以看到，在比较流行的浏览器中都是已经兼容了Fetch API的。我们可以通过对 window.fetch 的能力检测，判断出浏览器是否支持 Fe
2021-07-16 18:27:13
199
1
原创 你不知道的javaScript读书笔记(十二)
笔记JavaScript 中的数组是通过数字索引的一组任意类型的值。字符串和数组类似,但是它们的 行为特征不同, 在将字符作为数组来处理时需要特别小心。 JavaScript 中的数字包括“整 数”和“浮点型”。基本类型中定义了几个特殊的值。null 类型只有一个值 null , undefined 类型也只有一个值 undefined 。 所有变量在赋值之 前默认值都是 undefined 。 void 运算符返回 undefined 。数 字 类 型 有 几 个 特 殊 值, 包 括 NaN (
2021-07-11 19:48:04
97
原创 TypeScript学习--Symbols
自ECMAScript 2015起，symbol成为了一种新的原生类型，就像number和string一样。symbol介绍symbol类型的值是通过Symbol构造函数创建的。let sym1 = Symbol();let sym2 = Symbol("key"); // 可选的字符串keySymbols是不可改变且唯一的。let sym2 = Symbol("key");let sym3 = Symbol("key");sym2 === sym3; // false, symbo
2021-07-11 19:10:45
274
原创 TypeScript学习--泛型
泛型的定义泛型： 是程序设计语言的一种风格或者范式，泛型允许在强类型程序设计语言中编写代码时使用一些以后才指定的类型，在实例化时作为参数指明这些类型。这意味着组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时提供了十分灵活的功能。泛型的使用//定义泛型type FnType = <T>(arg: T) => T;//定义参数和返回值必须类型一致的函数fntypeconst fnType: FnType = (arg) => { retur
2021-06-27 21:21:10
176
1
原创 你不知道的javaScript读书笔记(十一)
笔记JavaScript 有 七 种 内 置 类 型: null 、 undefined 、 boolean 、 number 、 string 、 object 和 symbol ,可以使用 typeof 运算符来查看。变量没有类型,但它们持有的值有类型。类型定义了值的行为特征。很多开发人员将 undefined 和 undeclared 混 为 一 谈, 但 在 JavaScript 中 它 们 是 两 码 事。 undefined 是值的一种。 undeclared 则表示变量还没有被声明过。
2021-06-27 20:37:58
69
原创 TypeScript学习--属性定义
通过以下关键字来限制属性的读取权限。public关键字 定义可以在类外部访问的成员-private关键字 定义私有属性，在类外部不可访问（包括子类和实现类）protected关键字 定义受保护的属性，在同类与子类中可以被访问（实现类和类外部不可被访问）私有属性 private 与受保护属性 protected一般来说如果类的属性是 public 的那么，如果有两个类的属性与类型一致，其 new 出来的对象就是同一类型的，但是，如果这两个相同的类中有属性是 private 或者 prot
2021-06-20 21:48:44
860
原创 你不知道的javaScript读书笔记(十)
行为委托在软件架构中你可以 选择是否 使用类和继承设计模式。大多数开发者理所当然地认为类是 唯一(合适)的代码组织方式,但是本章中我们看到了另一种更少见但是更强大的设计模式: 行为委托 。行为委托认为对象之间是兄弟关系, 互相委托, 而不是父类和子类的关系。JavaScript 的 [[Prototype]] 机制本质上就是行为委托机制。也就是说,我们可以选择在JavaScript 中努 力实现类机制(参见第 4 和第 5 章),也可以拥抱更自然的 [[Prototype]] 委托机制。当你只用对象来
2021-06-20 21:04:04
76
原创 你不知道的javaScript读书笔记(九)
原型笔记：如果要访问对象中并不存在的一个属性, [[Get]] 操作(参见第 3 章)就会查找对象内部 [[Prototype]] 关联的对象。这个关联关系实际上定义了一条“原型链”(有点像嵌套的作用域链),在查找属性时会对它进行遍历。所有普通对象都有内置的 Object.prototype ,指向原型链的顶端(比如说全局作用域),如 果在原型链中找不到指定的属性就会停止。 toString() 、 valueOf() 和其他一些通用的功能 都存在于 Object.prototype 对象上,因此语言
2021-06-06 22:50:53
87
1
原创 Typescript学习——接口
接口：interfaceTypeScript 的核心原则之一就是对‘值’ 所具有的结构进行类型检查，而接口的作用就是为这些类型命名或为你的第三方代码定义契约。相当于定义了值的类型。用法const foo = (params: {name: string})=>{ rerurn parasms}foo函数使用时，必须传入一个包含参数为name且类型为string，否则类型检查器会报错。用interface来描述interface TestParam { name: string}
2021-06-06 21:24:55
102
原创 你不知道的javaScript读书笔记(八)
混合对象“类”笔记：类是一种设计模式。 许多语言提供了对于面向类软件设计的原生语法。 JavaScript 也有类 似的语法,但是和其他语言中的类完全不同。类意味着复制。传统的类被实例化时,它的行为会被复制到实例中。类被继承时,行为也会被复制到子类 中。多态(在继承链的不同层次名称相同但是功能不同的函数)看起来似乎是从子类引用父 类,但是本质上引用的其实是复制的结果。JavaScript 并不会(像类那样)自动创建对象的副本。混入模式(无论显式还是隐式)可以用来模拟类的复制行为,但是通常会产生
2021-05-31 19:18:20
89
1
原创 Typescript学习——静态类型
静态类型：就是你一旦定义了，就不可以再改变他的类型了。一：定义静态类型1：定义let count:number = 1;2：赋值count = "str"; // 这样写会报错，count只能接受number类型的数据count = 55; // 这个样子写是没有问题的3：使用对应类型的方法你讲变量定义成了何种类型，那么这个变量对应就可以使用其类型对应的方法console.log(typeof count.toString());二：自定义静态类型你还可以自己去定义一个静态类型
2021-05-23 20:38:07
449
原创 你不知道的javaScript读书笔记(七)
对象笔记：JavaScript中的对象有字面形式(比如var a = { .. })和构造形式(比如 var a = new Array(..))。字面形式更常用,不过有时候构造形式可以提供更多选项。许多人都以为“JavaScript 中万物都是对象”,这是错误的。对象是 6 个(或者是 7 个,取 决于你的观点)基础类型之一。对象有包括 function在内的子类型,不同子类型具有不同 的行为,比如内部标签 [object Array] 表示这是对象的子类型数组。对象就是键 / 值对的集合。可以通
2021-05-18 16:46:08
91
原创 React 小技巧：摆脱hooks依赖烦恼
react项目中，很常见的一个场景:const [watchValue, setWatchValue] = useState('');const [otherValue1, setOtherValue1] = useState('');const [otherValue2, setOtherValue2] = useState('');useEffect(() => { doSomething(otherValue1, otherValue2);}, [watchValue, ot
2021-05-16 19:55:55
702
4
原创 你不知道的javaScript读书笔记(六)
this全面解析笔记：this的运行机制：（1） this是在运行时绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。（2） 当一个函数被调用时，会创建一个活动记录(有时候也被称作执行上下文)。这个记录会包含函数在哪里调用(调用栈)、函数的调用方式、传入的参数等信息。this就是记录这个属性，它会在函数执行时候被用到。查看函数this的方法：this的绑定就是通过函数的直接调用位置，所以分析函数的直接调用位
2021-05-14 19:07:06
1116
17
原创 你不知道的javaScript读书笔记(五)
第五章：作用域闭包笔记：闭包就好像从JavaScript中分离出来的一个充满神秘幻想色彩的未开化世界，只有最勇敢的人才能到达那里。但实际上，它只是一个普通且明显的事实，那就是我们在词法作用域中写代码，而其中的函数也是值，可以随意传来传去。当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这就产生了闭包。如果没能认出闭包，也不了解它的工作原理，使用它的过程中就很容易犯错，比如在循环中。但同时闭包也是个非常强大的工具，可以用多种形式来实现模块等模式。模块有两个主要的特征：（1
2021-04-25 18:58:01
115
原创 你不知道的javaScript读书笔记(四)
第四章：提升笔记：我们习惯将 var a = 2;看作一个声明，而实际上JavaScript引擎并不这么认为。它将var a和 a = 2当作两个单独的声明，第一个阶段是编译阶段的任务，而第二个则是执行阶段的任务。这意味着无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理。可以将这个过程形象地想象成所有的声明(变量和函数，函数优先于变量)，都会被“移动”到各自作用域的顶端，这个过程被称为提升。这里有个误区要记录一下，函数声明会存在提升，但是函数表达式不存在提升，先来看一下下面的代码
2021-04-25 15:45:19
157
原创 你不知道的javaScript读书笔记(三)
第三章：函数作用域和块级作用域笔记：函数是 JavaScript 中最常见的作用域单元。本质上,声明在一个函数内部的变量或函数会 在所处的作用域中“隐藏”起来,这是有意为之的良好软件的设计原则。但函数不是唯一的作用域单元。块作用域指的是变量和函数不仅可以属于所处的作用域, 也可以属于某个代码块(通常指 { … } 内部)。从 ES3 开始, try/catch 结构在 catch 分句中具有块作用域。在 ES6 中引入了 let 关键字( var 关键字的表亲), 用来在任意代码块中声明变量。 i
2021-04-19 19:28:50
106
原创 React-Router学习记录
目前的web项目很多都是SPA(单页面应用)模式，它内部使用的就是Router组件方式，实现跳转。本次记录的是React-Router中的react-router-dom的使用，大部分react的项目中基本使用的都是这个路由组件，它分为BrowserRouter和HashRouter的方式。一、路由基本使用路由的使用思路是，在index.js中引入BrowserRouter,使它能够全局生效，在TotalRoute.js中注册路由，在导航栏组件中使用路由。import React from "reac
2021-04-19 16:52:36
133
1
原创 你不知道的javaScript读书笔记(二)
第二章：词法作用域笔记：在第一章中说明，js的作用域查找变量是通过作用域链进行查找的，首先从当前作用域逐步查找到全局作用域结束。但是在js中有两个方法“修改”（也可以说欺骗）作用域查找，下面简单介绍一下这两个方法。一、 eval()JavaScript中的eva()函数可以接收一个字符串作为参数，并骗过js执行引擎，好像这个代码本来就在和这个位置。在执行eval()之后的代码时，引擎并不知道或者在意前面的代码时像eval()一样动态插入的，还是本来就在这里的，它只会和往常一样，对作用域进行查找。请看
2021-04-11 22:56:29
87
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人