iamlujingtao-CSDN博客

canvas 缩放/拖动/还原/封装和实例一、预览二、使用2.1 创建和配置2.2 方法三、重点说明3.1 配置里有2个宽高设置3.2 分开设置事件四、源码一、预览最近需要用到canvas的缩放、拖动、还原等操作，网上有些资料，但用起来都不太方便，自己重新写了一个操作类，能满足上述使用情况，而且用起来很方便，也很灵活，画布尺寸和css尺寸不一致情况也考虑到，拖动支持触摸和鼠标。效果如下：二、使用2.1 创建和配置 // 创建对象并进行配置 var canvas = new CanvasOpe

2021-08-13 21:02:18 3536 1

原创 prettier批量格式化等命令

前言有时候需要批量格式化文件，目前prettier使用最广泛，本文记录一些使用命令一、全局安装prettiernpm install --global prettier二、配置.prettierrc.js在项目根目录建立配置文件.prettierrc.js，并按需求填写配置module.exports = { overrides: [ { files: ['*.nvue'], options: { parser: 'vue', },

2021-07-28 20:58:52 8030 1

原创腾讯地图开发-三维多边形的添加、选取、展示

腾讯地图开发-三维多边形的添加、选取、展示一、效果展示二、核心代码讲解1、引入地图api2、初始化地图3、隐藏比例尺和腾讯地图logo4、获取点坐标5、添加三维多边形6、多边形选取及高亮风格7、添加文字三、源码一、效果展示二、核心代码讲解1、引入地图api<script src="https://map.qq.com/api/gljs?v=1.exp&key=你的开发key&libraries=geometry"></script>其中key通过腾讯地

2021-05-20 10:21:10 2263 1

原创 echarts 柱状图添加排序图标/序号

echarts 柱状图添加排序图标/序号一、实现效果二、核心代码（图片序号）三、核心代码（文字序号）四、源码（这里用了vue）一、实现效果使用echarts的柱状图实现下面效果，须在名称前面添加序号：二、核心代码（图片序号）核心代码在于配置属性中的 axisLabel，需要formatter 和 rich 属性配合，注意看代码注释formatter中格式化为 {a1| 张三 }然后rich中通过匹配 a1来配置序号样色，这里使用了图片，所以 backgroundColor 里设置image路径

2021-05-18 14:45:21 6167 5

原创 flutter安装、配置、no devices等各种问题解决方案

flutter安装、配置、各种奇葩问题一、关于环境变量二、安装1、安装git 和 Android Studio2、安装flutter2.1 添加环境变量2.2 下载安装flutter3、编辑器安装flutter插件三、问题1、no devices1.1 在环境变量增加 ANDROID_HOME1.2 path里面增加2个值：1.3 打开cmd，或者在Android studio终端输入1.4 更换adb版本2、flutter run 很慢，或者卡在Running Gradle task‘assembleD

2021-01-04 20:07:08 4271 3

原创 typescript 提示 Object is possibly ‘null‘ 的N种解决方法

document.querySelector('.main-table').setAttribute('height', '300px');如上，我要设置某元素的高度，但typescript提示 Object is possibly ‘null’，是因为可能不存在选择元素的情况。解决方案一最正确的解决方案，就是加null的判断const table = document.querySelector('.main-table');if (table) { table.setAttribute('

2020-12-03 21:34:32 20317 3

原创 VSCode插件开发流程兼【代码注释阅读小说】插件发布

VSCode插件开发流程兼【代码注释阅读小说】插件发布一、前言二、需求三、成果演示四、插件开发流程1、安装环境2、运行生成器3、文件介绍package.json 插件配置extension.js 插件程序入口4、调试5、本地打包和安装6、上线发布五、附【代码注释阅读小说】核心代码六、参考资料一、前言很早以前就想写vscode相关的插件，最近有时间于是研究一下。二、需求定一个需求：编辑器里面可以用代码注释的形式看小说，达到写代码，看小说两不耽误，老板还会夸你认真工作呢，这是摸鱼的最高境界！三、成果演

2020-11-06 11:21:06 11335 8

原创 chrome设置黑暗模式的4种方法

chrome设置暗黑模式的4种方法前言方式一具体操作：效果：方式二具体操作：效果：前言对于大部分chrome用户来说，设置chrome暗黑模式是十分常用的需求，特别是对于夜猫子来说，本文总结了4种方式，各有利弊，自行选择。方式一方式一是单纯设置chrome皮肤为黑暗模式，内容区域不会矮黑，功能是chrome自带的，也十分容易设置。具体操作：桌面找到google chrome图标右键->属性，在后面加上： --force-dark-mode效果：方式二方式二是单纯设置chrome皮

2020-09-30 17:34:27 76643 9

原创 vue + swiper 的正确使用姿势（附即插即用css、动态更新数据，使用建议）

vue + swiper 展示了常用的图片滚动样色，以及动态变更数据后插件响应跟新的效果

2020-09-28 20:33:35 3945 6

原创生成多个SSH Key及对应Git配置的详细说明

生成多个SSH公钥及对应Git配置使用一、应用场景二、查看已有SSH Key三、生成SSH Key四、查看已生成的SSH Key代码五、Git配置多个SSH Key六、代码托管网站配置SSH Key七、测试连通一、应用场景如果有多个github账号，不同账号使用不同SSH Key，或者使用多个托管网站（gitee、github、gitlab…）等，不同托管网站使用不同SSH Key，那么就需要生成不同的公钥，然后分别配置，具体操作步骤如下。二、查看已有SSH Key输入： ls ~/.ssh/ 能

2020-07-16 19:27:48 1646

原创 vue+ElementUI 表单嵌套表格逐行校验（新增、编辑）的完美解决方案

vue+ElementUI 表单嵌套表格逐行校验（新增、编辑）的完美解决方案一、成果二、要点和解决思路三、源码一、成果在线地址gitHub地址如果帮到你，请点个赞^_^如图，ElementUI表单里嵌套了表格，表格内每行能进行新增、编辑、删除等操作，同时能针对该行的字段进行校验（而不是整个表单校验！），这种需求应该很常见，但是搜了很多资料，没有完美的解决方案，大部分都只是针对整个表单进...

2020-03-29 22:59:33 14619 29

原创 chrome执行js脚本的4种方法及优缺点分析

chrome执行js脚本的3种方法及优缺点分析方法一：标签执行方法二：开发者工具"代码片段"功能方法三：chrome自制插件执行方法一：标签执行新建或修改标签，然后在网址上输入代码，javascript: 后面是具体执行代码。执行的时候点击该标签即可。优点操作和执行都很简单缺点代码维护麻烦，只能执行不断行代码权限能获取并编辑页面元素方法二：开发者工具"代码片段"功...

2020-03-27 21:44:19 6840

原创解决js类定义里面绑定事件this指向问题

问题分析最近一个js问题困扰了2小时：现在我们需要定义一个类，类里面初始化对象时会绑定事件，然后销毁方法会解绑事件，精简代码如下：（这里使用es6定义类的方式，使用原始的function思路也是一样的）class Test { constructor() { this.width = 0; } //初始化对象时使window绑定事件resize，设置对象宽度 init(...

2020-03-04 10:35:26 2156 2

原创解决 three.js 的“Texture has been resized from”警告提示

遇到问题在用threejs中使用canvas作为纹理添加文字的时候，遇到了three.module.js?325f:21304 THREE.WebGLRenderer: Texture has been resized from (256x118) to (256x64)类似的提示，添加n个就提示n个，好烦。解决方案网上很少相关信息，最后在外国网站找到了解决方案，只需要把canvas的尺...

2020-03-03 11:05:44 4969

原创 html5拖放+vue+localStorage，实现拖放排序并记录到本地

html5拖放+vue+localStorage，实现拖放排序并记录到本地前言效果技术要点完整代码前言因业务需求，需要在页面上列出多个视频，并能拖放排序，且记录排序。现使用技术如下：vue + html5的drag事件实现元素拖放排序 +l ocalStorage记录到本地浏览器上，刷新页面不会重置排序。本示例为了更好的用户体验，排序后使用css3 的 translate 来变更元素位置...

2020-01-16 17:05:13 397

原创 vue前端+nodejs后端通讯最简单demo

前言本文记录vue前端+nodejs后端通讯最简单的方法，供广大网友最快速进入全栈开发。效果演示本示例效果如下：前端是一个登陆表单，信息提交给后端，后端收到后给前端反馈信息。技术架构前端 vue + axios + wepack后端 nodejs + express前端部分安装部署前端安装vue，方式多种，本文使用vue-cli3 + vue ui图形化安装，具体请百度，命令如...

2020-01-12 21:31:40 6779

原创 vue自定义组件，ElementUi表单校验v-model不能即时生效的解决方法

vue自定义组件，ElementUi表单校验v-model不能即时生效的解决方法前言核心解决代码完整代码父组件子组件前言上篇文字我们介绍了vue自定义组件并使用v-mode实现双向绑定，当我们做form组件的时候经常要使用表单校验，但在使用ElementUi表单校验时，有时候校验v-model不能即时生效，如下图：其中子组件为一个输入框，父组件使用ElementUi校验子组件输入的值，我们...

2020-01-10 21:20:49 5760 1

原创 vue自定义组件，v-model完美使用方式

vue自定义组件，v-model完美使用方式前言实现效果父组件子组件前言当我们自定义form组件的时候，v-mode是几乎必须的，但v-mode的正确写法应该是怎样呢？其实只要了解vue自定义组件保留的关键变量 value 和方法 input 就简单很多了。实现效果我们定义了父子组件，并各自有自己的输入框，父子的输入框实现双向绑定，效果如下：父组件父组件代码如下，插入了一个自定义的...

2020-01-10 20:07:26 6152

原创手把手教你开发photoshop面板插件（附demo和工具）

手把手教你做photoshop面板插件一、前言二、插件演示三、目录文件介绍3.1 插件安装3.2 插件文件介绍3.3 manifest 文件介绍3.4 jsx文件加载的2中方式3.5 index.html 程序入口3.6 main.js一、前言phtoshop插件通常有2中方式，一种是以“脚本运行”的方式，另一种是“面板插件”的方式，最近自己需要做一个面板插件，但是发现相关教程实在太少了，本文...

2019-11-11 17:58:49 15837 6

转载 2篇Vue相关的思维导图，不放过任何一个细节

从思维导图入手理解vue关联知识

2019-10-22 17:48:49 1436

原创与时俱进，css不定宽高水平垂直居中的5种方法

与时俱进，css不定宽高水平垂直居中的5种方法一、前言二、方法总结三、效果五、源码一、前言本文总结了css不定宽高水平垂直居中的5种方法，考虑到兼容性，用到css3的方法多用手机端，手机端ie可以不用考虑。各方法原理我在代码里都有注释。二、方法总结分别是：方法一：table-cell + inline-block兼容性：ie8+, chrome全支持方法二：css3 pos...

2019-10-17 17:48:42 1239

原创 js+animate.css实现滚动页面，元素动态出现（附演示地址和源码）

js+animate.css实现滚动页面，元素动态出现（附演示地址和源码）一、背景二、效果三、原理四、在线演示和源码一、背景之前做项目用到滚动页面，元素动态出现的效果，当时研究一番决定用Animate.css + fullpage.js + 一堆js控制，这段时间也有项目也有这种需求，不过不是整页滚动，而是不确定高度滚动，所有用不到fullpage，于是只能手写js控制。二、效果三、原理...

2019-10-17 10:54:38 5779 1

原创解放双手，nodejs批量处理文件（匹配+重命名+转换代码）

解放双手，nodejs批量处理文件（匹配+重命名+转换代码）一、背景二、需求三、成果一、背景公司现在有2套系统，新系统和旧系统，2套系统使用的技术方案不同，所以网站代码也有些不同。现在需要把旧系统代码转换为新系统代码，通常情况下我们是手动修改的，但是改了几次后发现实在痛苦，于是想能否让程序自动转换。如果只是替换代码，很多软件都可以，但是实际情况不是简单的替换，而是要做很多复制判断，而且整个...

2019-10-17 09:45:29 1572

原创批量处理文件研究（前端小伙子花式踩坑经历）

批量处理文件研究（前端小伙子花式踩坑经历）一、需求二、实施2.1 window自带的批量修改文件/文件夹2.2 网上下载批处理软件2.3 写bat批处理代码2.4 写javaScript批处理代码2.5 写nodeJs批处理代码三、总结一、需求现在需求是这样的：你现在要维护100多个同类型站点，每个站点大约有30多个模板文件，虽然目录和文件命名大体一致，但是由于网站系统升级，导致部分文件名变更...

2019-10-16 18:03:28 268

原创响应式图片实践研究（html5 picture/srcset 等多种方法对比）

响应式图片实践研究（html5 picture/srcset 等多种方法对比）一、需求二、html5新属性 srcset&sizes三、html5新标签四、css3媒体查询五、用js判断处理六、后端代码判断处理、第三方云服务一、需求现在有一需求对于一个宽屏的banner焦点图，要求根据浏览器尺寸读取不同尺寸的图片，设浏览器宽度为w，w<767时读取640px768<=...

2019-10-16 16:53:48 570 1

原创提高效率：web前端图标切片心得

本文介绍一下个人的web前端图标切片心得，用于提高生产效率。如上图，现在我们输出经常会遇到一组图标按钮，通常的做法都是把图标都放到一张图里面，然后用css的backgruond-position来控制位置，就是常说的css sprite啦。但问题是图标图层我们通常都是随便放的，没有规则，所以输出的时候都是通过chrome来微调到正确位置，如果有20个图标就要微调20次，非常耗费时间，写出来的...

2019-10-16 09:26:48 508

原创开箱即用：网站换肤（附演示地址和源码）

开箱即用：网站换肤（附演示地址和源码）一、前言二、原理三、演示四、在线演示&源码一、前言现在很多网站都要求支持换肤（色）功能，我整理了一个最简单的demo，支持cookie（刷新有效），供有需要的人事直接投入使用。二、原理三、演示四、在线演示&源码–>在线演示地址–>GitHub地址...

2019-10-16 09:16:14 837

原创 html5获取我的位置并在百度地图上显示

HTML5获取我的位置并在百度地图上显示一、前言二、在线演示和GitHub源码一、前言最近有兴趣研究了下移动端的地图api，发现其实挺简单的，HTML5也提供了地理位置API：Geolocation，能获取当前所在位置的经纬度，结合一些地图api，就能直观地看到我在地图上所在的位置，相当于app应用里面的“我的位置”。在网上搜下Geolocation就能获得详细信息，其实核心就是这个：nav...

2019-10-16 09:03:45 732

原创开箱即用：div模拟select并美化

通常我们做友情链接都是用默认的，但各浏览器的风格都不一样，而且css还不能做成各浏览器一致的效果，所以对于要求高的客户，或者输出人员自己也受不了的时候，还是自己用div模拟一个吧。效果：html： <section class="friendLinks clearfix"> <dl> <dt&...

2019-10-16 09:01:16 249

Unity 代码片段，旧版Text实现文字描边

空空如也