- 博客(40)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 浏览器http缓存问题
一、什么是浏览器缓存浏览器将请求过的资源（html、js、css、img）等，根据缓存机制，拷贝一份副本存储在浏览器的内存或者磁盘上。如果下一次请求的url相同时则根据缓存机制决定是读取内存或者磁盘上的数据还是去服务器请求资源文件缓存通过url来判断，如果url不同则是新的资源。所以我们开发时前端会将一些js、css等文件在后面加hash值来避免资源更新时浏览器仍读取缓存文件，导致需要刷新才能获取新的资源的问题这种做法虽然解决了js、css等文件的更新，但是对于index.html这样的文件由于
2024-12-25 20:53:55
1434
原创 计算机图形学中向量相关知识
两个向量统一起点，构成平行四边形，对角线为向量加和的结果两个向量尾首相连，从a起点连接到b终点，为向量加法的结果多向量首尾相连的加法结果为第一个向量的起点到最后一个向量的终点。
2024-11-03 14:03:37
601
原创 HTTPS加密算法
简单来说，HTTPS(HTTP Secure) 就是在 HTTP 协议基础之上加入加密以及认证机制的 HTTP。HTTPS 相较 HTTP 不是一种新协议，只是在 HTTP 通信接口部分使用了 SSL(Secure Socket Layer)和TLS(Transport Layer Security)协议来实现。使得 HTTP 先与 SSL 通信，再由 SSL 和 TCP 通信，而不是 HTTP 直接与 TCP 通信，HTTP 和 HTTPS 图示如下：https是如何加密的呢？
2024-08-14 11:02:14
357
原创 给不规则的shapeGeometry贴图
首先看一下贴图效果，我们要做的是将一个长方形的贴图在不规则的多边形中贴图。1. 取不规则多边形的box2，这个box2就是整个贴图的UV坐标。2. 计算每个不规则的多边形顶点的在该box2上的对应映射。3. 更新整个geometry的uvs数据。计算每个点分别到U轴的投影和V轴的投影。
2024-08-09 15:26:24
505
原创 记录一次threejs内存泄露问题排查过程
观察了一段时间，发现JS head size并没有明显的增长，但是DOM Nodes、Js event listeners随着每次组件的销毁、组件的重新挂载一直呈现增加的趋势。其次我观察到DOM Nodes、Js event listeners在1分钟的组件不断销毁和挂载的过程中，呈现阶梯式的增长，且增长的幅度几乎一致，如下图。首先我们看一下JS head size，观察到在1分钟的组件不断销毁和挂载的过程中，是收敛的，组件挂载是增长，组件卸载时释放，是正常现象。注意我框出来的地方。
2024-04-03 17:49:21
1808
1
原创 webgl和threejs的坐标系以及坐标转换
如何将一个世界坐标下的模型，绘制到屏幕上呢？屏幕变换*标准设备变换*视图变换*模型变换*模型坐标。
2024-01-22 13:24:24
2049
原创 threejs在透视相机模式下，绘制像素大小固定的元素
后来意识到sizeAttenuation: false 只是设置了相机的深度跟Sprite没有关系，但是透视相机的fov还是会影响到sprite的大小的。使Sprite大小不随相机的深度而衰减。但是呢，我们如果我们的fov不是固定的怎么办呢，只需要加上如下配置就可以动态的根据fov去获得这个scale了。找到了这个fov，我们设计相机的fov为这个值，现在我们去设置sprite的scale去改变Sprite的大小。1. 第一步，我们找到一个fov值，在这个值下，我们看到的图标是占满屏幕的。
2024-01-04 17:42:30
1340
5
原创 threejs中修改鼠标cursor不生效的问题修复
引入了dragcontrols，查看dragControls的代码，可以看到代码中有对cursor进行修改。我们在dragcontrols中监听hoveron，在回调中修改鼠标的cursor。threejs中修改canvas的鼠标cursor为自定义的图标不生效。当鼠标hover一个元素时，cursor为自定义的图标。第一次修改如下，生效。
2023-12-22 18:43:02
752
原创 threejs ShapeGeometry 自定义贴图的uv坐标
由于一些原因，要绘制一个长方形，但是这个长方形并不是 PlaneGeometry，而是一个ShapeGeometry。但是同样的贴图，同样的形状，贴图贴在PlaneGeometry上时可以正常显示，但是贴在ShapeGeometry中却不可以正常显示。我们看到，uv是这样的，和他的顶点坐标是一致的，但是实际上，我们希望uv的对应关系和PlaneGeometry是一致的。PlaneGeometry默认顶点坐标和uv坐标对应关系如下，其中点1，2，3，4为geometry的vertex顺序。
2023-12-13 19:44:55
1120
原创 threejs 使用png的texture时，显示的颜色和图片颜色不一致
【代码】threejs 使用png的texture时，显示的颜色和图片颜色不一致。
2023-11-09 18:16:56
1002
1
原创 threejs 的 Dragcontrols 拾取不准的问题
绘制一些点、线、面后，拖拽时选中不精确，导致明明选中的是这个点，但是拖拽应用在相近可拖拽元素上。解决方案：提高three拾取的精确度。
2023-10-25 10:49:19
282
原创 threejs的DragControls当click时会触发dragstart和dragend问题解决
threejs的DragControls 拖拽问题处理
2023-09-26 16:13:07
499
原创 three mesh.clone() 问题
mesh.clone()获取的新模型和原来的模型是共享材质的几何体的，所以代码改动如下。出现问题：每个mesh的颜色都是一样的，并没有根据color动态修改。
2023-06-13 17:05:03
211
原创 前端盲水印
需求给图片加上看不到的水印，当通过其他的方式可以清楚的看到图片中暗藏的水印，以此方式追溯到泄密的人解决办法利用canvas实现图片和水印的绘制，具体过程如下：新建canvas，宽度和高度取要加水印的图片的宽度和高度 在该canvas上绘制要添加的水印文字，文字透明度设置要特别的低，但是当水印透明度小于等于0.003,不可恢复到水印。所以我们设置透明度要不得低于0.003 将该canvas转成img（为什么canvas要转成img?之前遇到canvas在移动端无法长按出现保存、转发等操作）
2021-01-08 15:54:53
967
原创 解决html2canvas截图空白的问题
问题：当出现滚动条时截图会有空白解决办法：获取需要截图的图片的绝对定位，截图时设置精确的x,yhtml2canvas(that.$refs.imageDom, { // that.$refs.imageDom为需要截图的img元素 getActuralPosition为获取绝对位置，之前的文章有写过 x: that.getActuralPosition(that.$refs.imageDom).left, y: that.getActuralPosition(that.$refs.ima
2020-10-16 19:06:09
7615
3
转载 获取精确的滚动条的宽度
// 获取滚动条的宽度getScrollWidth() { // 创建一个div元素 let noScroll, scroll, oDiv = document.createElement('DIV'); oDiv.style.cssText = 'position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;'; // 没有滚动条的clientWidth clientWidth为content+p.
2020-10-16 18:52:08
1568
原创 canvas在移动端长按保存图片
一、背景同一个网页，canvas在PC端可以右键下载，但是在移动端长按时却没反应。现在要求在移动端支持长按图片下载二、实现方式画布(canvas)对象有一个非常有用的方法toDataURL()，这个方法能把画布里的图案转变成base64编码格式的png，然后返回Data URL数据。利用这个我们可以将转成一个image/png格式的图片// 获取所有的canvas图片文件let canvasDom = document.getElementsByTagName('canvas')for
2020-09-24 12:00:24
3144
1
转载 获取元素在页面的位置
一、基本须知一张网页的全部面积就是它的大小，通常情况下由css决定。例如我们给网页设置3000*2000的大小，则网页大小为3000*2000，即使在浏览器中我们需要滚动条才能将这个网站看完整 浏览器窗口的大小（视口）指的是浏览器中看到的那部分网页的面积，例如当我们缩小浏览器的大小时，那视口也会减小 当网页可以在浏览器中全部展示时，不需要滚动条时，则浏览器的适口和网页的大小相同二、获取浏览器窗口的宽和高网页上每个元素都有clientWidth和clientHeight属性，该属性指元素的内容加
2020-09-23 14:26:41
3256
1
原创 css设置小于12px的字体
背景谷歌浏览器默认最小字号为12px，所以即使设置字号为12px以下也不会生效，现在我们要解决的是如何设置小于12px的字体实现方法使用缩放 transform:scale()方法即可以实现字号的缩放<body> <p class="font">你好</p></body><style> .font {...
2020-03-25 16:01:21
5531
2
原创 常用的git命令总结
一、初始化配置$ git config --global user.name "xxx" //配置git仓库人员名称$ git config --global user.email "xxx" //配置git仓库人员的邮箱$ git config -l //列举所有的配置二、查看、添加、提交、删除、找回、重置修改文件$ git help //显示command的help$ g...
2020-02-22 18:12:25
126
原创 npm基础
一、npmnpm：node模块管理工具，使用npm可以快速安装、卸载所需要的自愿文件，如jquery、vue等；npm是随着node一起安装的$ node -v //查看node版本号$ npm -v //查看npm版本号二、基于npm进行模块管理https://www.npmjs.com/ 基于npm的模块都是从npmjs.com平台上下载的下面介绍npm的基本操作：...
2020-02-22 17:37:16
202
原创 正则总结
一、创建正则的两种方式1. 字面量方式var reg = /\d+/字面量方式//之间包起来的都是元字符，有的是具有特殊意义的元字符，大部分是代表本身含义的普通元字符2. 实例创建var reg = new RegExp("\\d+")两种方式的区别（1）字面量方式中出现的都是元字符，不能进行变量的拼接，而实例创建的方式可以eg: var reg = new Reg...
2020-01-15 14:46:09
777
原创 如何解决算百分比，加起来不是100%的问题
思想：1. 所有的百分比取整数部分2. 将所有百分比相加，最理想状态是100%，但相信大部分是小于100%的，取差值3. 数组按小数部分排序4. 从小数最大的那个百分比开始加一，直到补全所有的差值下面这个图说的很清楚了，图是我从百度过来的实现：我把它封装成了方法/* ** ary 要处理的数据的数组集合 ** field 要求百分比的字段 *...
2019-12-18 19:21:06
25773
转载 vue-cli项目打包后生成可修改接口地址的配置文件
一、在static文件夹下新建config.js文件window.g.baseUrl = { http://192.168.1.51:8005}二、在index.html文件中引入<script src="/static/config.js"></script>三、在接口地址中使用var api = window.g.baseUrl+'/...
2019-04-26 10:57:56
4114
原创 DOM库
获取页面中元素的方法document.getElementById('xxx');context.getElementsByName('xxx');context.getElementsByClassName('XXX');不兼容IE6-8,没有这个方法document.getElementsByName('XXX');//在IE中只对表单元素的name起作用document.bod...
2019-03-17 23:07:32
313
原创 DOM盒子模型
css盒子模型DOM盒子模型通过js提供的一些方法获取页面中的样式信息，下面就是我们获取样式信息的一系列方法计算联合样式内容的宽度和高度：我们设置的width/height这两个样式就是内容的宽和高；如果没有设置height，容器的高度会根据里面内容自己进行适应，这样获取的值就是真实内容的高；如果设置固定高度，不管内容是多了还是少了，其实我们的内容高度指的都是设定的那个值；...
2019-03-14 17:27:30
491
原创 常用的dos命令
1. 打开DOS命令window+R2. 查看自己电脑ip地址ipconfig / ipconfig -all3. 查看当前网络状态（以www.baidu.com为例）ping www.baidu.com -t4. 终止当前的dos命令ctrl+c5. 关闭当前的dos窗口exit6. 清屏cls7. 文件夹cd ../ 进入上级目录cd ...
2019-03-04 19:34:29
166
原创 微信小程序如何做自适应（移动设备分辨率和rpx）
pt也称为逻辑分辨率 pt的大小和屏幕尺寸有关系，简单可以理解为长度和视觉单位 px指物理分辨率，和屏幕尺寸没有关系，点是没有大小的。 一个pt可以有一个px构成，也可以有2个，还可以有3个甚至更多组成如何做不同分辨率设备的自适应以iPhone6物理像素750*1334为视觉稿进行设计，而在小程序中使用rpx为单位 iPhone6下 1px = 1rpx = 0.5pt ...
2019-01-11 09:26:31
14573
5
原创 git拉取远程项目到本地，git提交代码到新分支，拉取分支到本地
git拉取远程项目到本地git clone http://gitlab.XXX.com/XXX/XXX.git //克隆远程仓库到本地git提交代码到新分支从master或其他分支拉了一份代码，做了一些修改，但是不想提交到该分支，想新建一个新分支test保存代码。git add . //添加本地需要提交的代码 git commit -m 'add my code to test'...
2019-01-09 11:08:11
2984
原创 vue前进刷新后退不刷新
问题描述：一个页面只有第一次进入会获取数据，之后就不会获取数据（不会发起网络请求）我们发现只有第一次进入页面时才会请求数据，这就有一个问题，如果是详情页面，这样详情的内容就不会刷新，点击不同的商品详情都是同一个，每次需要手动刷新才能，这真的体验很不好主要原因设置了keep-alive缓存<keep-alive> <router-view>&...
2018-11-06 11:31:51
5514
1
转载 搭建静态服务器
前端开发中，经常遇到有些场景需要用到服务器环境，例如AngularJS中的路由，或者是模拟ajax获取数据等需求时，这个时候并不需要考虑到服务端逻辑，只是搭建简单的静态资源服务，因此解决方法有很多，下面介绍几种简单快捷的常用方式：使用http-server如果你安装了node，那么http-server就是个不错的选择，只需要一行命令就可以快速启动。安装：npm install -g http-s...
2018-06-12 16:29:45
389
原创 【CSS】div中内容超过了div的宽度，但是不自动换行的解决办法
问题如上图解决办法： word-wrap: break-word;word-break: break-all;
2018-05-22 14:25:36
8176
1
空空如也
javascript快速排序提示‘too much recursion’
2018-10-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人