blog
blog copied to clipboard
forthealllight
📖我的博客，记录学习的一些笔记，如有喜欢，欢迎star
# 通过webgl中的纹理贴图来自定义图片间的转场效果 ------ 本章节建立我们基本上掌握了如何在2D或者3D平面中绘制图形的基础上（当然不了解2D和3D平面绘制图片也可以往下阅读），我们在2D平面中，可以用webgl去绘制我们所需要的图案，但实际中我们用到某个图形时不可能全部一一的去绘制，纹理贴图解决了这个问题，我们可以用已有的图片来填充webgl中的图形。 > * 纹理基础 > * 2D图形的纹理贴图 > * 多纹理单元的纹理贴图 > * 不同纹理间实现转场特效 ------ 这个系列的源码地址为：源码的地址为： https://github.com/forthealllight/webgl-demo ## 一、纹理基础 在了解纹理贴图之前，我们先来了解一下预备知识，首先什么是纹理贴图或者说纹理映射呢？ ***将一张图像贴到一个几何体的表面*** 这就是纹理贴图的含义，这张图像我们就成为纹理，这个工作我们就称为纹理贴图，其本质就是提取图像中的颜色，然后对应的赋予给几何平面的某个位置，从而将图像在几何体表面完成渲染。 这里从纹理（图像）到几何体表面之间有一个映射，为了了解这个映射是怎么发生的，我们必须了解一下纹理坐标和裁剪坐标。 **裁剪坐标** webgl中的裁剪面坐标如下所示：  从上述裁剪坐标系统的示意图中我们可以看出，webgl中整个裁剪平面的中心坐标是(0,0),对于二维的裁剪平面而言其水平方向从(-1,0)到(1,0),其竖直方向从(0,-1)到(0,1). 也就是说其裁剪坐标任何方向的值在区间[-1,1]内。...
# 发布一个react组件——react-read-pdf，用于在移动端展示PDF文件 ------ PC端的浏览器对于PDF文件的展示没有太大的问题，给定一个PDF的链接，就可以用浏览器默认的展示样式来展示和渲染PDF文件的内容。比如一个"http://www.baidu.com/test/pdf"。 如何在移动端展示这个文件。为了在移动端展示和渲染PDF文件的内容，本文在pdfjs的基础上实现了一个简单的react组件，用于展示和渲染PDF文件。 - 将这个react组件，以npm包的形式发布。 - 这个组件的项目地址为：https://github.com/forthealllight/react-read-pdf （如果想看使用的例子，直接下载这个代码或者clone，然后npm install和npm start即可） # React-read-pdf > 使用React16.5编写的组件，用于在移动设备和PC端显示和渲染PDF文件 ## 特点 * **Simple**: 使用简单方便，仅仅是一个react组件 * **Mobile-friendly**: 自适应多种移动端的设备，包括手机，平板和其他的移动办公设备 ## 浏览器支持 * IE 10+ *...
# React本质，第一部分：基础渲染 ------ 在接下来的五篇文章中,会用通俗的方式“重新构造”一个React,通过完成一个简易版本的React的构造,可以帮助我们理解React是如何实现的,以及组件的生命周期存在的原因和作用。 这一系列的文章包括： > * 第一部分：基础渲染 > * 第二部分：componentWillMount and componentDidMount > * 第三部分：基础更新 > * 第四部分：setState > * 第三部分：transaction 声明: 这个系列的文章基于React15.3,所以最新的React的特性比如Fiber等是不支持的,本系列根据React的原理所构建的"Peact"尽可能的实现React的相关功能,但没有完全实现。 ------ ## 一、背景知识：元素(Element)和组件(Components) 在React中有三种不同的实体类型：原生的DOM元素、虚拟React元素(Virtual React Elements)和组件(Components)。...
# 优雅的学习webgl(2)—webgl中的着色器和缓冲区 ------ 在之前一章中我们了解了webgl中的一些常识，也尝试绘制了第一个webgl程序，接下来这一张会介绍一些webgl中的基本概念，包含顶点着色器、片元着色器、缓冲区 > * 什么是顶点着色器和片元着色器 > * 缓冲区 ------ 这个系列的源码地址为：源码的地址为： https://github.com/forthealllight/webgl-demo ## 一、什么是顶点着色器和片元着色器 我们在第一篇文章中初略的介绍了着色器，在这里我们在详细讲讲什么是着色器。 ### 1.顶点着色器 顶点着色器保存了所想绘制的图形的顶点的信息，包括了顶点的坐标，以及顶点的大小。我们结合GLSL语言，来详细的讲讲顶点着色器。 ```js attribute vec4 a_position; void main() { gl_Position = a_position; gl_PointSize...
Redux-saga使用心得总结（包含样例代码），本文的样例代码地址：[样例代码地址](https://github.com/forthealllight/redux-saga-example) ，欢迎star ------ 最近将项目中redux的中间件，从redux-thunk替换成了redux-saga，做个笔记总结一下redux-saga的使用心得，阅读本文需要了解什么是redux，redux中间件的用处是什么？如果弄懂上述两个概念，就可以继续阅读本文。 > * redux-thunk处理副作用的缺点 > * redux-saga写一个hellosaga > * redux-saga的使用技术细节 > * redux-saga实现一个登陆和列表样例 ------ ## 1.redux-thunk处理副作用的缺点 ### （1）redux的副作用处理 redux中的数据流大致是： **_UI—————>action（plain）—————>reducer——————>state——————>UI_**  redux是遵循函数式编程的规则，上述的数据流中，action是一个原始js对象（plain object）且reducer是一个纯函数，对于同步且没有副作用的操作，上述的数据流起到可以管理数据，从而控制视图层更新的目的。 **_但是如果存在副作用，比如ajax异步请求等等，那么应该怎么做？_** 如果存在副作用函数，那么我们需要首先处理副作用函数，然后生成原始的js对象。如何处理副作用操作，在redux中选择在发出action，到reducer处理函数之间使用中间件处理副作用。 redux增加中间件处理副作用后的数据流大致如下： **_UI——>action(side...
# 聊一聊Typescript中与this相关的类型定义 ------ 从本文开始，会陆续介绍一些typescript的使用，由浅入深，本文主要介绍一下Typescript中的this用法以及与this相关的内置函数。 > * Typescript的函数中声明this > * Typescript中箭头函数和this声明 > * Typescript与this相关的内置函数 ------ ## 一、Typescript的函数中声明this ### (1)函数中的this声明 为了说明在typescript中this的声明方法，我们首先需要更改tsconfig.json的配置： "compilerOptions": { ... "noImplicitThis": true } 默认情况下，如果ts没有this对象类型声明，this是自动隐式定义。如果noImplicitThis设置为true,此时不允许this上下文隐式定义，如果使用了没有声明过的this对象就会报错，举例来说(当设置noImplicitThis：true)： ```js function test()...
# React hooks中swr的原理和源码解析 ------ swr是一个hook组件，可以作为请求库和状态管理库，本文主要介绍一下在项目中如何实战使用swr，并且会解析一下swr的原理。从原理出发读一读swr的源码 > * 什么是swr > * swr的的源码 ------ ## 一、什么是swr useSWR是react hooks中一个比较有意思的组件，既可以作为请求库，也可以作为状态管理的缓存用，SWR的名字来源于“stale-while-revalidate”, 是在HTTP RFC 5861标准中提出的一种缓存更新策略 ： ***首先从缓存中取数据，然后去真实请求相应的数据，最后将缓存值和最新值做对比，如果缓存值与最新值相同，则不用更新，否则用最新值来更新缓存，同时更新UI展示效果。*** useSWR可以作为请求库来用： //fetch import useSWR from 'swr' import fetch from...
简要介绍：在webpack的官网，给出了十几种sourcemap，那么每一种sourcemap之间有什么区别，本文在理解sourcemap的基础上，分析在生产和开发环境中，应该采用何种形式的sourcemap ### 一 、 从Sourcemap和Data URL说起 #### (1) 什么是Sourcemap? 我们在打包中，将开发环境中源代码经过压缩，去空格，babel编译转化，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，会造成无法debug的问题。 举例来说，如果压缩等处理过的生产环境中的代码出现bug，调试的时候只能定位到压缩处理后的代码的位置，无法定位到开发环境中的源代码。 sourcemap就是为了解决上述代码定位的问题，简单理解，就是构建了处理前的代码和处理后的代码之间的桥梁。主要是方便开发人员的错误定位。这里的处理操作包括： - 压缩，减小体积 - 将多个文件合并成同一个文件 - 其他语言编译成javascript，比如TypeScript和CoffeeScript等 #### (2) 什么是DataURL? DataURL最早是出现在HTML文件img标签中的关于图片的引用，DataURL提供了一种将图片"嵌入"到HTML中的方法。 跟传统的img的src属性指向服务器中某张图片的地址不同，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。具体通过DataURL引入图片例子如下： ``` ``` DataURL使用于如下的场景 - 访问外部资源受限 -...