前端
关注
分享
扫一扫
WaqarLeaver
这个作者很懒，什么都没留下…
展开
-
Cesium和Three融合之第一人称加模拟太阳光加模型加载
Cesium和Three融合场景的一次尝试原创 2022-08-12 17:31:41 · 1191 阅读 · 10 评论 -
用四面体中点三角网迭代法进行椭球体曲面细分的实践
按照《3D Engine Design for Virtual Globes》书上4.1.1和4.1.2中介绍的方法，使用webgl从头到尾撸一波，效果如下（录制gif分辨率问题请忽略其中阴影线）：迭代层数为0（原始四面体）：迭代次数为1：迭代次数为2：迭代次数为3：迭代次数为4：书中说到4已经可以了，但是我觉得到5还是有区别，更加圆，但是5以后确实看不到什么区别了，迭代次数为5：方法大致思路是：1.用四个点绘制一个四面体：2.对四面体每条边取中点投影到椭球体上，对于每个三角原创 2021-08-28 13:30:56 · 442 阅读 · 0 评论 -
js输出数组全排列代码
/** 输出字符串全排列* 例如：* 入参：abc* 出参：abc acb bac bca cab cba* */function main() { let ttt=getquanpailie("abcd"); console.log(ttt);}function getquanpailie(str) { let strlist=[]; for(let i=0;i<str.length;i++){ strlist.push(str[i]原创 2021-08-01 13:40:32 · 521 阅读 · 0 评论 -
垂直滚动条挤占子元素宽度的解决方法
html如下所示：假设子元素的高度超过的父元素的自定义高度，那么父元素会出现垂直滚动条，但是这里的垂直滚动条会占用子元素的原本的宽度空间，导致子元素内部的元素排列混乱，解决这个问题的方法：.father{overflow-y:overlay;}这样就可以了，简单吧，正因为简单，所以要记录下来，防止以后忘记了。...原创 2021-07-27 17:13:09 · 1006 阅读 · 2 评论 -
设置前端元素失去焦点的方法记录
假如在前端vue界面中有一个元素，假设是checkbox吧，被点击后自动获取焦点，只读属性document.activeElement指向该元素，然而要想让它失去焦点，除非点击一个别的能自动获取焦点的元素，比如input之类，要不然就无法做到，好像这些能自动获取焦点的元素是有什么优先权似的，凌驾于其他千千万万普普通通的div至上，且占座完后还不礼貌地让开，真是不够绅士。为了让它能够文明一点，有个小小的方法就是，在其他普通的div中，定义tabindex，随便定义其值是多少，于是在你需要让这些自以为是的家伙原创 2021-03-12 15:53:42 · 2091 阅读 · 1 评论 -
openlayer加载wfs图层的地址和坐标系说明
openlayer加载wfs图层的地址说明如果我们把wfs图层发布在geoserver上，那么大多数情况下会生成一个发布地址：http://ip:port/geoserver/工作区名称/ows?service=WFS…openlayer加载时后面也要填补上，这里对后面填补的内容说明一下：http://ip:port/geoserver/工作区名称/ows?service=WFS&am...原创 2020-02-21 11:05:00 · 1325 阅读 · 0 评论 -
新建vue项目关于eslint的几点说明
安装npm,nodejs,vue-cli这些不讲，这里记录的是后面用命令行新建vue项目的几点注意，否则后面麻烦。cmd命令行定位到要创建项目的文件夹下，然后输入vue init webpack ”项目名称“，命令行会提示一些选项：总之，关于eslint（代码规范格式）和test（测试）这些都不要安装，除非大公司有要求，如果这里安装了，到idea项目中有代码检查（eslint），全是红色...原创 2020-02-17 16:22:15 · 2195 阅读 · 0 评论 -
雾特效的改进
之前介绍的雾特效是线性雾（见博客：https://blog.youkuaiyun.com/wqy248/article/details/89675159#comments），后来我改动了一下，使雾的浓度呈指数增长，目的是更加逼真。其他都不变只是雾因子的计算方式稍作修改，原来的：float f=(depthcolor.r-0.22)/0.2;改成：float f=1.0-pow(2.71828,0.0-...原创 2019-11-06 14:09:32 · 402 阅读 · 8 评论 -
一次Vue中computed没有触发的原因排查经历
vue中computed计算属性可以用来绑定动态变量，而且它可以实时刷新，并且也可以在watch中监控，所以本人很喜欢用这个东西，一般把需要随data中变量一起变化的属性全部放在这里面，data中只定义互相独立互相不影响的变量，这样可以极大地减少重复变量的定义，使代码结构清晰，也便于排查错误。 然后最近出现了一个问题，就是我在computed中定义的一个动态变量没有在相关属性发生变化后触发...原创 2019-11-01 17:53:55 · 30953 阅读 · 4 评论 -
Vue怎么在程序初始化时从后台读取数据加载全局变量
vue项目有时候需要在所有页面mounted之前从后台接口读取数据来初始化全局变量。但是奈何所有页面的mounted都是异步同时调用，而读接口操作通常也是异步返回promise，这样就不免会出现mounted时读接口操作还没有进行完这种情况，所以我想最好有个机制能解决这个问题，让所有读接口初始化全局变量的工作在mounted之前进行，而这种机制应该对读接口是否同步异步没有要求，即使异步也能保证...原创 2019-10-15 16:35:02 · 8004 阅读 · 0 评论 -
element-ui bug踩坑：input不能放到el-form中，不然造成莫名其妙的路由跳转，在el-form中还是用el-button好了
在一个el-form中写入一个input button 点击以后页面自动刷新，因为路由发生了跳转，应该是element-ui的一个bug，将input移出el-form问题解决，以下是触发路由跳转页面刷新的页面写法（vue）<el-form ><input type="image" src="***" ></input></el-form>...原创 2019-10-13 09:31:54 · 890 阅读 · 1 评论 -
Cesium聚簇实现-kdbush类实现
上一篇讲了kdbush实现原理，本篇看下kdbush源码，了解其算法具体实现。kdbush是一个开源js库，github地址：https://github.com/mourner/kdbush/开发者除了开发了该库，还开发了另外几个空间搜索库，包括rbush，rbush-knn，geokdbush，相关的原理说明请参考：http://www.sohu.com/a/137533865_64276...原创 2019-09-04 08:45:44 · 3499 阅读 · 0 评论 -
js闭包及var和let对闭包的作用
js闭包及var和let对闭包的作用为了便于理解，本文用一个例子程序来体现js闭包和var、let变量声明对所谓闭包的作用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></hea...原创 2019-08-25 19:05:59 · 926 阅读 · 0 评论 -
Cesium聚簇实现-kdbush原理
Cesium聚簇实现-kdbush源码剖析文章目录问题说明KDbush库的分块重排序算法说明KDbush库的查找范围点算法说明矩形框范围查找圆形范围查找 上一篇文章通过调试发现Cesium实现点聚簇过程中一个bug，从中猜测其实现聚簇核心代码在kdbush类中，本文展开kdbush类查看它是如何实现点聚簇效果的。问题说明 假设二维平面中有10个点，分别为ABCDEFGHIJ，如下图所示...原创 2019-08-25 19:05:22 · 3227 阅读 · 0 评论 -
翻译 Secrets of the JavaScript Ninja 边译边学（6）
Secrets of the JavaScript Ninja 边译边学（6）2 Testing and debugging2 测试和调试In this chapter:• Tools for Debugging JavaScript code• Techniques for generating tests• Building a test suite• How to test a...原创 2019-06-30 10:07:01 · 147 阅读 · 0 评论 -
翻译 Secrets of the JavaScript Ninja 边译边学（12）
Secrets of the JavaScript Ninja 边译边学（12）第3.1节 函数的区别是什么？3.1 What’s with the functional difference?3.1 函数的区别是什么？How many times have you heard someone moan “I hate JavaScript!”?你听到过多少次有人抱怨“我讨厌JavaScr...原创 2019-07-05 08:25:13 · 174 阅读 · 0 评论 -
翻译 Secrets of the JavaScript Ninja 边译边学（11）
Secrets of the JavaScript Ninja 边译边学（11）回忆总结部分 从开始翻译这本书到现在大概有一个多星期了，已经翻译完了前两章，感觉比较吃力，但是总体还是觉得比较有益处，因为需要翻译，所以很多平时不注意的细节在这里要仔细多推敲一下。希望后面还会继续坚持下去。 第一章主要介绍了JavaScript主要的基本概念，函数、闭包、对象 第二章主要介绍了如何自己构建...原创 2019-07-04 08:09:32 · 289 阅读 · 0 评论 -
Vue data中定义数据作用
Vue 在data中定义的数据，其在dom中访问可以只用数据名，但是在method中访问必须前面加this. 不然提示not defined比如代码：Vue.component('my-component',{ // template:'&amp;lt;button @click=&quot;counter++&quot;&amp;gt;{{counter}}&amp;lt;/button&amp;原创 2018-11-07 14:18:05 · 5941 阅读 · 0 评论 -
js vue窗口拖拽事件
想要实现vue组件的窗口拖拽事件，需要在vue 的最上层div中设置v-drag，然后添加指令directives drag：directives:{ drag(el){ el.onmousedown = function(e){ var disx = e.clientX - el.offsetLeft; var disy ...原创 2018-12-11 11:36:33 · 2251 阅读 · 2 评论 -
div制作四角边框
上图：其中二级菜单的四个角单独用符号装饰，为了不受拉伸影响，决定不用四个图片，而是css样式方法实现：.partcomwithborder{ background: linear-gradient(to bottom,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left top no-re...原创 2019-01-22 14:26:41 · 3618 阅读 · 0 评论 -
Cesium使用后期渲染方式实现雾特效
Cesium开源方法里有专门的Fog类，可以实现雾，只要控制其显隐即可。但是由于Cesium有深度测试，需要控制其深度阈值，让其在不同的场景中都能正常显示。cesium超出深度阈值部分就不渲染了，看起来那部分是黑色的，这样确定合适的阈值并根据场景实时变换比较困难。所以果断采用PostProcessStage方式对cesium的webgl渲染后的画面进行重新再次渲染，这样不用担心深度测试的阈值确定不...原创 2019-04-29 15:04:51 · 8812 阅读 · 13 评论 -
翻译 Secrets of the JavaScript Ninja 边译边学（1）
Secrets of the JavaScript Ninja 边译边学（1）前言由于工作的关系，一直想好好研究JavaScript基础，网上推荐看这本书，确没有完整的翻译版本，于是决定自己边看边翻译边学习，中间要是有需要实践的，自己理解的，正好一起在这里记录下来。由于个人水平有限，翻译和理解仅供参考，如有错误，欢迎交流指正。封面翻译原文MEAP EditionManning Earl...原创 2019-06-21 22:12:24 · 293 阅读 · 0 评论 -
翻译 Secrets of the JavaScript Ninja 边译边学（2）
Secrets of the JavaScript Ninja 边译边学（2）第一章 进入忍者的世界原文In this chapter:A look at the purpose and structure of this bookWhich libraries we will focus uponWhat is advanced JavaScript programming?Cr...原创 2019-06-21 22:13:29 · 200 阅读 · 0 评论 -
翻译 Secrets of the JavaScript Ninja 边译边学（9）
Secrets of the JavaScript Ninja 边译边学（9）2.3 Testing frameworks2.3 测试框架A test suite should serve as a fundamental part of your development workflow. For this reason you should pick a suite that that ...原创 2019-07-02 08:18:53 · 195 阅读 · 0 评论 -
翻译 Secrets of the JavaScript Ninja 边译边学（13）
Secrets of the JavaScript Ninja 边译边学（12）第3.1.1节 为什么JavaScript的功能性质如此重要?3.1.1 Why is JavaScript’s functional nature important?3.1.1 为什么JavaScript的功能性质如此重要?It’s likely that if you’ve done any amount ...原创 2019-07-08 07:57:26 · 261 阅读 · 0 评论 -
翻译 Secrets of the JavaScript Ninja 边译边学（4）
Secrets of the JavaScript Ninja 边译边学（4）1.3 Cross-browser considerations1.3跨浏览器注意事项Perfecting our JavaScript programming skills will get us far, but when developing browser-based JavaScript applicat...原创 2019-06-27 08:13:40 · 293 阅读 · 2 评论 -
翻译 Secrets of the JavaScript Ninja 边译边学（3）
#Secrets of the JavaScript Ninja 边译边学（3）1.2 Understanding the JavaScript Language1.2理解JavaScript语言 Many JavaScript coders, as they advance through their careers, may get to the point at which they...原创 2019-06-26 07:51:53 · 247 阅读 · 0 评论 -
Secrets of the JavaScript Ninja 边译边学（10）
Secrets of the JavaScript Ninja 边译边学（10）2.4 The Fundamentals of a Test Suite2.4 测试套件的基本原理The primary purpose of a test suite is to aggregate all the individual tests that your code base might have ...原创 2019-07-03 07:57:59 · 210 阅读 · 0 评论 -
翻译 Secrets of the JavaScript Ninja 边译边学（5）
Secrets of the JavaScript Ninja 边译边学（5）1.4 Best practices1.4最佳实践Mastery of the JavaScript language and a grasp of cross-browser coding issues are important parts of becoming an expert web applicati...原创 2019-06-28 08:19:09 · 202 阅读 · 0 评论 -
翻译 Secrets of the JavaScript Ninja 边译边学（7）
Secrets of the JavaScript Ninja 边译边学（7）2.1 Debugging Code2.1 调试代码Remember when debugging JavaScript meant using alert() to verify the value ofvariables? Well, the ability to debug JavaScript code ...原创 2019-06-30 10:08:32 · 211 阅读 · 0 评论 -
翻译 Secrets of the JavaScript Ninja 边译边学（8）
Secrets of the JavaScript Ninja 边译边学（8）2.2 Test generation2.2 生成测试用例Robert Frost wrote that good fences make good neighbors, but in the world of web applications, indeed any programming discipline,...原创 2019-07-02 08:18:30 · 163 阅读 · 0 评论 -
nodejs+vue开发
由于公司开发需要，最近又转向前端。只能一切归零重新开始，突然想到《三体》中最高级文明：归零者。CSS中定义的样式：#id .classvue中定义视图，写法跟html静态页面差不多，只是最外层有个template，目前还不清楚有什么影响。class后面双引号内容parent空格son样式，这是一种写法。...原创 2018-10-29 17:34:33 · 1425 阅读 · 0 评论