- 博客(174)
- 资源 (10)
- 收藏
- 关注
RSS订阅原创 vue脚手架开发打地鼠游戏
游戏设计：规划游戏的核心功能，如场景、随机出现的地鼠、计分系统、游戏时间限制等。简单设计游戏流程，包括开始界面、游戏进行中、关卡设置（如不同关卡地鼠出现数量、游戏时间等）、关卡闯关成功|失败、游戏结束闯关成功|失败等状态。确定游戏的交互方式，PC端测试鼠标左键点击击打地鼠，移动端手指点击击打地鼠。以下为：游戏开发前制作的游戏界面展示效果，如图：其中有加分、减分对应分值的地鼠图片元素，洞口图片元素，以及使用CSS遮罩效果实现的地鼠出洞时像钻出来的效果图片元素（红色的），这里遮罩图片顶部切片向上延伸
2025-02-18 17:08:53
563
原创 微信小程序-CANVAS写入图片素材、文字等数据生成图片
微信小程序-CANVAS写入图片素材、文字等数据生成图片微信小程序中，CANVAS写入图片素材、文字等数据生成图片，最终可将生成的 base64 格式图片保存至相册操作Tips：1、canvas 标签默认宽度 300px、高度 150pxcanvas 生成图片时，写入图片素材、文字等数据前，需要根据实际需求，设置 canvas 宽、高，如以下示例中 设置 posterCanvas.width 及 posterCanvas.height2、同一页面中的 canvas-id 不可重复，如果
2024-07-22 18:18:11
3303
2
原创 Canvas文本换行处理2.0
原处理方法中canvas写入的多行文本无论多少行数据，都是顶部在一条水平线上，但我们在日常开发中，需要根据需求不同，如：列表中的多行文本数据，需要设置无论多少行数据，都需要统一的基准Y轴居中的展示效果，如图：名称一列数据显示在当前行内上下居中展示效果
2024-07-19 18:35:18
657
原创 uniapp日期区间选择器
uniapp日期区间选择器在 uniapp 中创建一个简单的自定义日期范围的日期区间选择器：- 限制有效日期范围开始日期为 2024-01-01，结束日期为当日；- 默认日期区间为当日向前计算的7日区间；- 选择开始时间后，判断不可大于结束时间，且重置开始时间为结束时间；- 选择结束时间后，判断不可小于开始时间，且重置结束时间为开始时间；示例代码：html：CSS：data设置参数数据：created 或 onLoad 中，调用请求接口获取筛选项数据方法：methods 处理方法：
2024-05-07 17:35:23
2571
原创 uniapp picker 多列选择器用法
uniapp picker 多列选择器联动筛选器交互处理方法，uniapp 多列选择器 mode="multiSelector" 数据及筛选联动交互处理，通过接口获取数据，根据用户选择当前列选项设置子列数据，实现三级联动效果，本示例中处理了三级无数据时则从数据中删除，处理三级后二级无数据时则亦从数据中删除，删除的数据最终不展示在筛选器中。
2024-04-17 11:07:50
5699
1
原创 vue 中使 date/time/datetime 类型的 input 支持 placeholder 方法
一般在开发时，设置了 date/time/datetime 类型的 input 属性 placeholder 时，发现实际展示中却并不生效，处理逻辑，判断表单项未设置值时，则设置伪类样式，文本内容为 placeholder 属性值，展示样式重叠在表单项组件上，以达到提示文本效果；
2024-04-08 17:49:09
543
1
原创 uniapp中获取位置信息处理
处理逻辑：一、获取定位时，用户直接同意授权获取定位，得到位置信息； 第1步：获取用户当前的授权状态 => 第2步：判断是同意授权位置时 => 第3步：获取位置 二、获取定位时，用户拒绝授权获取定位的： 第1步：获取用户当前的授权状态 => 第2步：判断是未同意授权位置时，引导用户打开设置界面，重新选择授权功能 => 第3步：用户选择允许授权后 第4步：重新获取位置，得到位置信息 第3步：用户选择不允许授权后 第4步：可至第1步，继续重新获取位置 引用文件可复用的处理逻辑代码：引用文件：需要获取位置代码处执行
2024-02-28 17:55:00
5174
2
原创 安装 nvm
nvm 即 node 版本管理工具 (node version manager)，好处是方便切换 node.js 版本。通过将多个 node 版本安装在指定路径，然后通过 nvm 命令切换时，就会切换我们环境变量中 node 命令指定的实际执行的软件路径。使用场景：若同时在做好几个项目，这些项目的需求都不太一样，导致了这些个项目需要依赖的 nodejs 版本也不同，这种情况下，我们就可以通过 nvm 来切换 nodejs 的版本，而不需要频繁地下载/卸载不同版本的 nodejs 来满足当前项目的要求
2024-01-23 19:38:44
1659
原创 字蛛 font-spider 使用
在移动端的web开发中，设计师们往往为了页面显示效果好看，会使用一些特殊字体，那我们开发时就需要引入这些字体文件，但字体文件如果太大的话，下载就会特别慢，会大大影响的体验效果，所以我们需要对此进行优化处理。字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。它通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
2024-01-19 14:49:48
1731
原创 v-html命令渲染的内容，使用scoped属性的情况下，样式不起作用
questionTitle : "题目中有图片<img src='question/q_1.png' >">>> 在 sass | less 中不作用，用 /deep/ | ::v-deep 来代替。通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped。Vue 3 中 ::v-deep 被废除了，取而代之的是 ::deep。
2023-11-16 16:31:58
1303
1
原创 Howler.js HTML5声音引擎
Howler.js是一个不错的HTML5声音引擎。功能强大，性能不错，用起来也很方便。移动端的Safari和Chrome都禁止网页自动播放声音，必须通过用户的操作，touch, click等触发。Howler可以设置成自动捕捉用户操作激活（解禁）声音播放。支持很多声音格式以兼容各种浏览器。日常开发中，解决一些细节问题1. 苹果手机、安卓手机，自动播放的问题2. 播放延迟处理。使用 Howler.js 对于延迟处理效果比较不错
2023-10-20 18:44:11
1833
原创 翻牌闯关游戏
翻牌闯关游戏3关：关卡由少至多12格、20格、30格图案：12个玩法：点击两张卡牌，图案一到即可消除掉记忆时长(毫秒)：memoryDurationTime:5000可配置，默认5000提示游戏玩法：showTipsFlag:1可配置，1:判断localStorage值，仅一次提示游戏玩法 2:每次游戏第一关都提示游戏玩法提示游戏玩法 时长(毫秒)：showTipsTime:4100可配置，默认4100，注：设置的引导手势动画2s是否需要计时：ifNeedTime:2可配置，0
2023-09-16 22:55:38
511
原创 vue-cli项目使用px转rem插件
只能执行命令 npm uninstall px2rem-loader 卸载 px2rem-loader，经测试：根字号大小不会根据页面尺寸宽度极限变大而变化，依据的页面最大尺寸宽度为540px）后改使用 postcss-pxtorem 插件，完美解决 Vant 组件变小的问题。之前使用 px2rem-loader 插件，但会影响Vant组件变小，与 amfe-flexible 搭配。与 amfe-flexible 搭配。与 lib-flexible 搭配。与 lib-flexible 搭配。
2023-07-12 17:09:19
380
原创 WEB端唤起 百度|腾讯|高德 地图一键导航功能
腾讯地图https://3gimg.qq.com/lightmap/v1/marker/index.html?marker=coord:纬度,经度;title:地点名称没有则根据经纬度自去填充;addr:地点位置地址信息没有则根据经纬度自去填充百度地图http://api.map.baidu.com/marker?location=纬度,经度&title=标题-地点名称&content=内容-地点位置地址信息&output=html&src=webapp.baidu.openAPIdemo高德地图
2023-05-26 16:27:41
2846
原创 小程序中web-view网页中打开或返回小程序页面
小程序中web-view网页中使用JSSDK提供的接口打开或返回小程序页面。1、引入 JSSDK 文件。2、判断是否在小程序环境。3、根据是否小程序环境，执行操作。
2023-05-22 11:32:50
2159
原创 小程序中使用CANVAS实现手写签名并写入模板图片中
小程序中使用CANVAS实现手写签名并写入模板图片中实测，开发者工具中滚动条位置会影响书写，显示有些问题，手机上测试正常
2023-05-04 17:56:43
996
1
原创 小程序中图片转 base64 编码格式
小程序中图片转 base64 编码格式使用例：小程序项目内部图片转 base64 图片并使用 wx.previewImage 查看大图let base64Img = 'data:image/png;base64,' + wx.getFileSystemManager().readFileSync('images/aaa.png','base64');wx.previewImage({ urls: [base64Img], current: base64Img});例：小程序中上传的图片转
2023-05-04 17:30:36
1029
原创 echarts图表展示地图指定区域
echarts地图展示指定区域指定区域获取方式：城市范围选择器：http://datav.aliyun.com/portal/school/atlas/area_selectorecharts地图展示指定区域及经纬度设置展示标注
2023-03-22 14:29:44
3046
原创 移动端H5弹幕test
移动端H5弹幕test之前弹幕滚动效果也是使用CSS动画实现的，列表中根据当前KEY设置动画延时，但数据多的时候，安卓机卡顿明显。此方式采用“分页”方式，每页（每次）截取指定数量的列表数据，当最后一个列表项动画执行完毕后（弹幕展示过程中会有一段时间空白），再截取展示下一页列表数据，当所有列表数据全部执行完毕后，再从第一页开始执行展示效果。
2023-03-21 15:49:53
373
原创 调研生成GIF表情包之路
调研生成GIF表情包之路调研阶段分解GIF图片、合成GIF图片合成GIF图片 - 表情包方案优化阶段表情包可视化编辑、生成配置信息数据工具PHP合成生成GIF动图PHP使用imagick扩展合成透明GIF图帧重叠问题解决方案
2023-02-16 15:54:17
533
原创 表情包可视化编辑、生成配置信息数据工具
表情包可视化编辑、生成配置信息数据工具，合成GIF图片 - 表情包 后续，用于快速、便捷生成 img_config.js 中 要生成的GIF每一帧数据（写入头像图片信息参数）
2023-02-16 11:57:16
553
原创 PHP使用imagick扩展合成透明GIF图帧重叠问题解决方案
PHP使用imagick扩展合成透明GIF图帧重叠问题解决方案，接到的需求要生成透明GIF图，发现生成的GIF图有帧重叠的情况，可能不知道扩展中的方法并未GET全，通过调研最终找到其他解决方案：PHP执行 cmd 命令的方法，执行 ImageMagick - magick 命令
2023-01-15 16:41:05
1053
2
原创 创建vMix虚拟集
从 0 创建 vMix 虚拟集注意事项：每个虚拟集都存储在一个文件夹中，单个虚拟集中最多可以写 5 个可输入图层元素：dynamic="True" 和 4 个缩放元素：。文件包括：第一类文件：config.xml第二类文件：图片（所有图像必须为 JPG 或 PNG 格式，并且必须与虚拟集配置位于同一目录中）第一层、第二层、第三层、...层图片：背景图、中间图、屏幕（正常展示）、屏幕（uvmap贴图展示）、摄像机、前景图 ...虚拟集配置 config.xml 文件的写作
2022-11-10 15:12:24
2729
原创 PHP合成生成GIF动图
主要是针对纯前端生成GIF图片质量问题做的调研；前端把CANVAS处理的每帧图片转成base64图片传至后台，后台生成最终GIF图片返回给前台展示；环境需要：PHP Imagick 示例：实现：php针对项目目录下图片集处理：php处理 base64格式 图片集处理：
2022-10-10 15:52:43
1446
原创 phpstudy安装imagick扩展
phpstudy安装imagick扩展，phpstudy默认是没有安装imagick扩展的，需要自己下载imagick扩展。第一步、安装imageMagick软件。第二步、下载imagick dll扩展。第三步、使用扩展。
2022-09-14 09:02:10
1992
原创 合成GIF图片 - 表情包
合成GIF图片 - 表情包数据配置 - 生成GIF每一帧数据信息（当前帧原始gif素材图片 / 写入头像图片信息:宽、高、x轴位置、y轴位置、旋转角度、旋转中心点）demo 1、上传图片-裁剪（按头像比例裁剪图片 - 规则图形）-处理合成生成表情包demo 2、上传图片-抠图（可移动/旋转/缩放 - 按头像区域内抠图处理 - 不规则图形）-处理合成生成表情包准备 - 数据配置 - 生成GIF每一帧数据信息：例：多张gif图对应数据，实际操作时可选择一张对应生成表情gif图...
2022-07-12 17:44:24
542
原创 分解GIF图片、合成GIF图片
分解GIF图片libgif-js：JavaScript GIF 解析器和播放器https://github.com/aoiu/libgif-jsorhttps://github.com/buzzfeed/libgif-js
2022-07-11 16:29:50
1039
原创 gifshot.js合成GIF
gifshot.js：可以从媒体流、视频或图像创建动画 GIF 的 JavaScript 库。https://github.com/yahoo/gifshot经测试：text配置项：生成的GIF每一帧所覆盖的文本；images配置项（数组）：首个设置的图片会一直显示；如设置text，则优先级最高，当前（帧）图片覆盖文本替换text配置项全局文本；demo：多张图片合成GIF图片；VIDEO生成的GIF；demo资源下载...
2022-07-11 11:28:46
1117
原创 在浏览器上安装 Vue Devtools 工具
npm命令安装：1、创建一个新的文件夹，如 vue-devtools（注：该文件夹在完成扩展程序安装后，不可再 修改文件夹名称 或 移动位置 或 删除文件夹），cmd命令进入此文件夹2、执行命令：npm install vue-devtools3、下载完成后，进入 node_modules/vue-devtools/vender 文件夹，打开 manifest.json 文件，将 persistent 改为 true ，保存文件4、返回上级目录进入 node_modules/vue-devtools 文件夹
2022-07-04 11:57:10
968
1
原创 小技巧或小BUG记载处理
小技巧或小BUG记载处理1、ios中input设置readonly后仍然聚焦出现光标并弹出“完成”面板问题2、ios系统版本15.1环境下，图片四周出现阴影边框设置样式-webkit-tap-highlight-color:rgba(0,0,0,0);同时，也要加上tap-highlight-color:rgba(0,0,0,0);3、禁止微信浏览器调整页面字体大小
2022-02-16 15:47:26
513
原创 CSS 图片遮罩 -webkit-mask
渐变遮罩-webkit-mask: linear-gradient(#000, transparent);图片遮罩语法与 background 相同：-webkit-mask: url(xxx.png) repeat center top;-webkit-mask-size: contain;也可分别设置属性：-webkit-mask-image: url(xxx.png);-webkit-mask-repeat: no-repeat;-webkit-mask-position: cente
2022-02-07 17:44:12
8260
原创 cropperjs图片裁剪器及七牛上传文件
安装：cropperjs : https://github.com/fengyuanchen/cropperjsnpm install cropperjs --save --save-exact--save : 成功后存到 package.json 中 dependencies 中--save-exact : 精确版本号（精确指定版本）Qiniu-JavaScript-SDK : https://developer.qiniu.com/kodo/1283/javascriptnpm instal
2022-01-17 17:21:34
732
从 0 创建 vMix 虚拟集demo
2022-11-10
合成GIF图片 - 表情包
2022-07-12
分解GIF图片、合成GIF图片
2022-07-11
gifshot.js：demo(多张图片合成GIF图片；VIDEO生成的GIF)
2022-07-11
sqlite3.exe
2022-07-06
小程序实现左右滑动切换菜单+瀑布流显示列表demo
2019-05-27
安卓微信中播放视频终于可以不再自动全屏啦
2017-05-27
web手势库AlloyFinger运用案例：代言海报
2016-09-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人