- 博客(91)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 基于canvas画布的实用类Fabric.js的使用
一、Fabric.js简介Fabric.js是一个对canvas进行封装的Javascript库，在原生canvas之上提供了交互式对象模型，通过简洁的api就可以在画布上进行丰富的操作。它主要的功能包括在canvas上创建和填充图形，比如矩形、圆形、多边形；生成的图像自带缩放、旋转、拖拽等功能；还可以给图形填充渐变颜色；各个图形可以相互组合等等。
2023-07-31 18:16:28
4242
1
原创 基于canvas画布的实用类Fabric.js的使用Part.3
• 自由绘画 • 绘制背景图片 • 绘制文本 • 绘制线和路径 • 自由绘制矩形 • 自由绘制圆形 • 自由绘制椭圆形 • 自由绘制三角形 • 自由绘制多边形
2023-04-03 17:38:28
1095
原创 基于canvas画布的实用类Fabric.js的使用Part.2
一、分组（Groups） Groups是Fabric最强大的功能之一，它可以将任意数量的Fabric对象组合在一起，形成一个小组，分组后，所有对象都可以一起移动、修改、缩放、旋转甚至更改其外观等
2023-02-24 09:41:10
1188
1
原创 基于canvas画布的实用类Fabric.js的使用Part.1
每个Fabric对象都有一个animate方法，该方法可以动画化该对象，animate(动画属性，动画的结束值，[动画的详细信息])
2023-02-22 10:35:44
1688
原创 uni-app 小程序获取实时定位和车辆签到（wx.getLocation方法）
uni-app 小程序获取实时定位和车辆签到（wx.getLocation方法）
2022-10-20 17:41:04
5394
18
原创 uni-app 小程序获取实时定位和车辆签到（wx.onLocationChange方法）
uni-app 小程序获取实时定位和车辆签到（wx.getLocation方法）
2022-06-22 11:51:30
6980
原创 Vue-移动端适配rem、vw、vh
一、移动端适配rem1、安装lib-flexiblenpm i lib-flexible --save2、在main.js引入lib-flexible// main.jsimport 'lib-flexible/flexible'3、安装postcss和postcss-pxtoremnpm install postcss postcss-pxtorem --save-dev4、配置postcss-pxtorem在根目录下的.postcssrc.js文件...
2022-04-08 15:38:10
2108
2
原创 ECharts相关参数说明
1、xAxisxAxis: { show: true, // 是否显示x轴 position: 'top', // x轴的位置 top、bottom type: 'category', // 坐标轴类型 value、category、time、log name: '姓名', // 坐标轴名称 nameRotate: 10,
2022-02-23 10:16:04
1002
2
原创 Vue-使用element-resize-detector监听元素大小变化
1、应用场景底部固定按钮栏使用 position: fixed 固定定位，宽度等于右侧内容栏的宽度，当我们左侧菜单栏收起的时候，其宽度也能够自适应变化。也就是说底部栏的宽度需要监听其父元素右侧内容的宽度从而实现自适应变化。2、 解决方法：使用 element-resize-detector（1）下载npm i element-resize-detector --save（2）导入const elementResizeDetectorMaker = requir...
2022-02-16 14:19:20
4883
原创 Vue-图片懒加载
1、安装npm install vue-lazyload --save-dev2、引入// main.jsimport VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, { preLoad: 1.3, error: require('./assets/images/vehicle-placeholder.png'), loading: require('./assets/images/vehicle-placeholder
2022-01-14 16:00:49
125
原创 Vue-利用v-model和.sync进行父子通信
1、v-model通常子组件更新某个变量并需要告知父组件时，需要子组件$emit触发事件，然后父组件$on监听该事件再去改变值。 但熟悉 v-model 的双向数据绑定原理后，我们可以巧妙地运用这一原理去实现父子组件之间动态传值：父组件通过 v-model 绑定一个变量传给子组件； 子组件通过 props['value'] 接收； 子组件通过 this.$emit('input', n) 去改变父组件中v-model绑定的变量。// 父组件<temp...
2021-12-15 16:17:36
1180
原创 Vue-异步树+自定义穿梭框的实现
1、效果图2、需求 首先接口获取到已添加人员列表，然后通过异步树+穿梭框进行人员的增加和删除。使用树结构展示组织信息，点击父节点展开按钮获取该组织下的所属组织，点击树节点传递获取该组织的所属人员，将人员展示在待添加列表，人员可以左移右移，并且左移时会进行回显（只回显属于该组织下的人员），最后点击保存就将右侧已添加列表进行保存。3、源码<template> <div> <el-button ...
2021-12-14 15:38:16
1300
原创 CSS-自适应正方形的实现
1、效果展示 html结构如下：<body> <div class="card-box"> <div class="card"></div> </div></body>2、实现方法（1）设置垂直方向的padding在 CSS 中，margin 和 padding 的百分比是相对于父元素的宽度来计算...
2021-11-26 17:37:41
1422
4
原创 数组去重方法和性能对比
1、数据模板let arr1 = Array.from(new Array(100000), (x, index) => { return index;})let arr2 = Array.from(new Array(50000), (x, index) => { return index + index;})let arr = arr1.concat(arr2);function distinct() { }console.log("开始数组去重，
2021-11-25 17:07:41
760
原创 Vue-图片上传el-upload和blob转base64
1、文件上传<template> <el-form :model="form" label-position="top" ref="form"> <el-form-item label="二维码" required> <el-upload ref="upload" class="upload-image" action="" :auto-upload="false" single-file list-type="
2021-11-25 14:48:03
2195
原创 html2canvas截屏
1、安装npm install --save html2canvas2、导入import html2canvas from "html2canvas"3、基本语法let dom = document.getElementById("id"); html2canvas(dom, { backgroundColor: "#fff",}).then((res) => { let url = res.toDataURL("image/png"); cons
2021-09-28 15:38:01
916
原创 Vue-刷新页面
1、provide、inject方法通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。 app.vue文件代码：<template> <h-page id="app"> <router-view v-if="isRouterAlive" /> </h-page></template><script> export ...
2021-09-28 10:11:12
182
原创 Vue-文件上传和下载
1、a标签download属性在H5中，为a标签新增了一个download属性，来直接文件的下载，文件名就是download属性文件名。download属性暂时只支持Google Chrome 和 Mozilla Firefox，其他浏览器均不支持该属性； download是H5新增的属性，H5以前没有该属性；2、URL.createObjectURLURL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL，这个URL的生命...
2021-09-16 13:56:58
1045
1
原创 CSS-一些实用却很少用到的属性
1、去除点击文字出现蓝色背景.hbk{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}2、鼠标覆盖高亮显示div:hover { opacity: 0.8;}3、鼠标覆盖显示为小手指div:hover { cursor: pointer;}4、CSS模糊匹配(1）选中class包含"
2021-09-14 10:03:34
558
原创 Vuex辅助函数mapState、mapMutations和mapActions使用
1、Vuex目录结构 讲解这些属性之前，我们先看项目的store目录结构和主要代码：app/index/store/index.js代码：import Vue from "vue";import Vuex from "vuex";import mutations from "./mutations";import actions from "./actions";Vue.use(Vuex);const state = { userInfo:...
2021-08-18 11:21:05
1730
1
原创 ES6-常用数组遍历方法区别
1、map() map()通过指定函数处理数组的每个元素，并返回处理后的数组。当数组中元素是值类型，map不会改变数组；当是引用类型，则可以改变数组。map不会检查空数组。let arr = [ { name: 'zhangsan', age: 18 }, { name: 'lisi', age: 20 }, { name: 'wangwu', age: 22 }, { name: 'test', age: 24 }];...
2021-08-11 19:49:06
370
原创 Linux安装和部署nginx
1、安装所需环境（1）PCRE安装yum -y install pcreyum -y install pcre-devel离线安装：https://pkgs.org/search/?q=pcre（2）ZLIB安装yum -y install zilbyum -y install zilb-devel离线安装：https://pkgs.org/search/?q=zlib...
2021-08-05 10:27:47
153
原创 Vue-WebSocket原理及使用
1、简介以前的http协议通信只能由客户端发起。如果我们想要了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。http协议做不到服务器主动向客户端推送信息。之前的做法就是使用轮询，每隔一段时间，就请求接口，了解服务器有没有新的信息，但是它效率低下，且非常浪费资源。WebSocket就诞生了，它最大特点就是服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。2、构造函数let ws = new WebS......
2021-08-02 17:49:34
2966
1
原创 Vue-devServer.proxy代理配置
1、基本用法// vue.config.jsdevServer: { proxy: { '/api': { target: 'http://localhost:81', } }} 现在，请求到 /api/xxx 现在会被代理到请求http://localhost:81/api/xxx，例如 /api/user现在会被代理到请求 http://localhost:81/api/user。2、忽略API前缀如果不希望传递/a...
2021-08-02 14:55:14
3014
原创 Vue-nginx反向代理
1、安装nginx见链接：https://blog.csdn.net/weixin_43638968/article/details/1127112722、常用nginx命令start nginx // 开启nginx服务nginx -s stop // 关闭nginx服务，快速停止nginx，可能并不保存相关信息nginx -s quit // 关闭nginx服务，完整有序的停止nginx，并保存相关信息nginx-s reload ...
2021-07-31 17:28:11
5706
原创 Vue-强制刷新
1、key-changing（最好）使用key标记组件身份，当key改变时释放原始组件，重新加载新的组件。<template> <div :key="key"> <div>{{val}}</div> ... </div></template><script> export default { data() { ...
2021-07-31 14:53:14
1346
原创 Vue-数字滚动和翻牌器
1、数字滚动vue-count-to（1）安装// 安装npm install vue-count-to// 导入import countTo from 'vue-count-to'// 使用<CountTo :start-val="startVal" :end-val="endVal" :duration="2500" class="count-number"></CountTo>
2021-07-31 14:14:04
8784
6
原创 对象数组删除另一个数组存在的对象
1、需求批量删除选中的数据，点击删除时从list中删除setList包括的所有数据：2、实现let list = [ { date: "2021-07-19", week: "星期一" }, { date: "2021-07-20", week: "星期二" }, { date: "2021-07-21", week: "星期三" }, { date: "2021-07-22", week: "星期四" }, { date: ......
2021-07-20 14:21:04
731
个人博客网站.zip
2020-04-26
全民飞机大战.zip
2020-04-25
webpack配置文件.zip
2020-04-15
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人