![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 81
HouGISer
武大GIS专业背景、前端工程师、地图编辑器研发经验。
业余时间探索技术落地场景,维护个人快速迭代工具网站:https://tryiscool.space。
商务合作私聊。
展开
-
【Modelground】个人AI产品MVP迭代平台(3)——工程化架构设计
这套架构是我在开发Modelground过程中,逐渐摸索出来的比较成熟的架构。很多坑都是过程中发现并解决,并不是一开始就能考虑到的。总结而言,依赖monorepo多项目管理模式,实现项目依赖,并行开发。通过流水线模式,简化项目启动流程。通过公共模型服务,减少冗余静态文件复制动作,在打包时统一拷贝。以上,就是Modelground的工程化架构设计内容,极大减少了本人开发耗时,可以将精力集中在构思创意上。如果本文对你有帮助,希望能得到你的三连+订阅Modelground专栏。原创 2024-06-02 23:38:52 · 670 阅读 · 0 评论 -
【Modelground】个人AI产品MVP迭代平台(2)——网站从0-1部署教程
总体的费用是服务器99元+域名188元+域名证书0元=287元,使用时长1年,(域名10年)。总体耗时大概是2周以内,周期最长的是ICP备案审核和域名证书审核。以上,你就可以通过域名访问你自己的服务啦!感兴趣的小伙伴,记得订阅这个专栏,这个专栏提供保姆级从0-1的AI平台搭建实操,一定能帮助到你!原创 2024-06-02 12:00:49 · 987 阅读 · 2 评论 -
【Modelground】个人AI产品MVP迭代平台(1)——平台简介
Modelground(模型广场)是探索先进模型落地场景的“实验室”,旨在用技术改善生活。维护者是本人。目前,Modelground已经集成了部分模型:Mediapipe视频处理、神投手、AI健身计数等。当前,所使用的模型都是基于Mediapipe,后期会考虑集成入其他有意思的模型。原创 2024-06-02 09:00:00 · 661 阅读 · 0 评论 -
图片标注编辑平台搭建系列教程(9)——支持撤销的画线行为
编辑器中的绘制,要想做的足够好,是需要支持撤销形点的,因为作业员在绘制过程中,可能会点错位置,需要及时撤销,否则影响编辑效率。撤销我们知道,需要通过ID编辑器的history的undo来实现,那么意味着,每一次插入形点,都需要插入一版Graph。如何在兼顾渲染的情况下,保证每一版本的graph中的几何正确,以支持撤销?这篇文章提供一种实现思路。原创 2024-05-12 22:46:33 · 283 阅读 · 0 评论 -
图片标注编辑平台搭建系列教程(8)——osmEntity转为fabric.Object
上一章我们讲过,当标注平台解析完数据后,会把数据存入Graph,数据格式为osmEntity。为了渲染出osmEntity,我们还需要将osmEntity转换为fabric.Object的格式。本章介绍这一步的具体实现以及一些坑。原创 2024-04-03 11:12:52 · 459 阅读 · 0 评论 -
图片标注编辑平台搭建系列教程(7)——标注平台架构设计
整体而言,fabric负责搞定一切渲染,简单样式足以。而强大的地图编辑器ID,用于图片编辑,简直是小菜一碟。本文详细讲讲标注平台的架构设计。原创 2024-04-01 23:21:58 · 836 阅读 · 0 评论 -
图片标注编辑平台搭建系列教程(6)——fabric渲染原理
值得注意的是,fabric渲染过程中有两次canvas变换,第一次变换是canvas的viewport整体变换(反应到标注平台就是canvas的自身的transform参数),第二次变换是每个object各自的变换,将object从画布左上角点为原点,转为以object中心点为原点。原创 2024-03-30 18:28:18 · 590 阅读 · 4 评论 -
图片标注编辑平台搭建系列教程(5)——线宽不居中问题
fabric中的polyline和polygon(继承自polyline),有一个普遍问题,就是如果设置了left和top后,同时设置了线宽,会发现线宽并不是沿着坐标序列居中渲染,而是以坐标最小外接矩形的左上角为原点,整体往右和下渲染。本期从源码内容详细分析成因。原创 2024-03-30 18:08:38 · 395 阅读 · 0 评论 -
图片标注编辑平台搭建系列教程(4)——fabric几何定制渲染
标注的几何,有时需要一些定制化的渲染样式,例如,线中间展示箭头,表示方向。本期教程教大家如何实现fabric几何定制化渲染。原创 2024-03-29 21:52:30 · 559 阅读 · 0 评论 -
图片标注编辑平台搭建系列教程(3)——画布拖拽、缩放实现
标注平台很关键的一点,对于整个图片为底图的画布,需要支持缩放、拖拽,并且无论画布位置在哪里,大小如何,所有绘制的点、线、面的坐标都是相对于图片左上角的,并且,拖拽、缩放,点、线、面的坐标不改变。要实现这一点,其实就是理解这个画布的坐标系,以及变换矩阵。原创 2024-03-28 22:32:21 · 808 阅读 · 0 评论 -
图片标注编辑平台搭建系列教程(2)——fabric.js简介
fabric提供了二维图形编辑需要的所有基础能力,包括:数据管理、图形渲染、图形编辑和事件监听。其中,图形编辑可以通过事件监听和图形渲染来实现,所以可以弃用。下一章,讲讲图片标注中,画布的拖拽、缩放涉及的坐标系相关知识。原创 2024-03-26 22:40:52 · 468 阅读 · 0 评论 -
图片标注编辑平台搭建系列教程(1)——目录
这个系列教程,我将结合自己的工作经验,以及碰到过的难点问题,教大家如何构建一个比较完善的标注系统。涉及领域包括图形学和数学,语言主要是JavaScript。原创 2024-03-25 21:52:26 · 652 阅读 · 2 评论 -
吉他初学者学习网站搭建系列(7)——如何在线制作乐谱(扒歌)
教你如何在线制作乐谱,满足你的扒歌需求!原创 2023-12-25 12:45:52 · 1218 阅读 · 0 评论 -
吉他初学者学习网站搭建系列(6)——如何根据歌名查歌词
如何根据歌名查歌词?这篇文章帮你实现原创 2023-12-25 11:47:41 · 423 阅读 · 0 评论 -
吉他初学者学习网站搭建系列(5)——如何做一个在线节拍器
教你制作一个在线节拍器原创 2023-12-05 20:04:32 · 655 阅读 · 0 评论 -
吉他初学者学习网站搭建系列(4)——如何查询和弦图
教你如何实现一个和弦图在线查询功能原创 2023-12-02 20:23:17 · 606 阅读 · 0 评论 -
吉他初学者学习网站搭建系列(3)——如何实现吉他在线调音
实现吉他在线调音功能原创 2023-11-26 00:33:24 · 943 阅读 · 2 评论 -
吉他初学者学习网站搭建系列(1)——目录
利用周末时间搭建一个兴趣驱动的小网站,帮助吉他初学者更好地学习,目前已集成乐谱滚动播放、查和弦、调音、节拍器、制作乐谱等功能,欢迎使用原创 2023-11-25 23:05:28 · 1046 阅读 · 0 评论 -
吉他初学者学习网站搭建系列(2)——如何实现一个乐谱播放器
手把手教你做一个乐谱播放网站!原创 2023-07-09 20:36:03 · 621 阅读 · 0 评论 -
万语千言,不敌一纸情书
背景2.14就是情人节了,不知道各位读(直)者(男)想到了什么样的礼物,或者是还没有女盆友。。想来和女盆友在一起已经五年多了,想当年没少给她写情书。尽管后来这一个习惯断了,但是情书这种形式还是很有意义。现在作为一名理工男,想用技术来实现一个电子情书。我给这个项目起了一个挺浪漫的名字:一纸情书。实际上这个项目是去年疫情期间,我和女盆友异地,我花了一天时间做出来送给她的,她还挺喜欢的。网页链接:[https://railwayhs.cn/loveletter](https://railwayhs.c原创 2021-02-10 15:13:02 · 2657 阅读 · 13 评论 -
2020,非专科前端的自我救赎
目录实习秋招成果1. 约球online小程序的2.0版本2. 百度个性化地图及遥感图瓦片下载合成器3. 通用爬虫框架4. 基于栅格图像的城市边界识别软件5. BikeMap6. SharePics结语无意间看到CSDN的年度征文活动,想借这个契机写写我2020年的经历。本人是某高校地信(GIS)专业的学硕,现在已经是研三了。地信这个专业算是一个交叉学科,属于测绘的一个分支。理论上无非是一些空间分析或者制图综合,技术方面就是一些数据库和可视化等。就开发这个层面而原创 2021-01-10 21:43:57 · 368 阅读 · 0 评论 -
【约球online】小程序构建系列教程第三话——地图点聚合功能实现
文章目录前言需求聚合算法具体实现调用时机前言用过微信小程序的map组件开发地图的同学,应该知道mapcontext这个对象的api相当少,功能远不如百度、腾讯、高德地图的JavaScript API。如果要实现聚合、热力图等,都必须自己动手实现。地图开发最常见的一个需求就是展示点要素,如果需要展示大量的点要素,如果全部展示,不仅渲染上存在很大的开销,而且也会存在图标压盖等问题,影响体验,因此就需要有点聚合的功能,并且随地图缩放来自动重算。这篇教程就交大家如何实现一个通用的点聚合功能,并在文末附上源码原创 2020-10-11 22:51:42 · 2877 阅读 · 6 评论 -
【约球online】小程序构建系列教程文章目录
目录文章导航项目简介关于教程文章导航【约球online】小程序构建系列教程第一话——技术选型及架构设计【约球online】小程序构建系列教程第二话——合理使用websocket【约球online】小程序构建系列教程第三话——地图点聚合功能实现项目简介约球online小程序是个人开发的一款实时约球小程序,属于个人主体类小程序,服务类目为信息查询和报名/预约。目前正常运营,暂未做推广。小程序码如上图所示,感兴趣的朋友可以扫码体验。该小程序整包代码600+k,基于uniapp框架开发,主要技术是v原创 2020-10-11 12:00:58 · 626 阅读 · 1 评论 -
微信小程序图片内容审核功能云函数+小程序端代码完整实现【填坑】
文章目录背景实现技术栈小程序端基本思路主要代码云函数思考主要参考背景开发微信小程序的同学如果涉及了社交类目,应该都会碰到由于缺少内容审核机制导致不过审的情况。微信小程序官方实际上提供了图片、文本、视频的审核接口,可以通过https和云函数两种方式调用,对于一些小项目的前端开发者而言,云函数是非常方便的一种选择。一般来说,文本检测的接口没什么难度,比较容易出问题的是图片检测的实现(视频接口本人没...原创 2020-05-02 18:45:55 · 4050 阅读 · 0 评论 -
uniapp开发h5页面实现图片预加载功能
背景h5页面,很多时候存在大量的图片、动画,这些都需要下载大量的静态资源,如果我们直接打开页面,会发现部分图片正在加载或者还未下载的现象,严重影响体验效果。为了解决这个问题,我们需要进行图片预加载的操作。什么是图片预加载?简单来说,图片预加载就是在页面渲染前把所有的图片、GIF等静态资源全部下载完毕,使得页面渲染后直接打开缓存的图片资源,从而减少卡顿的问题,优化用户体验。那么如何在h5中...原创 2020-01-24 17:24:44 · 12187 阅读 · 2 评论 -
uniapp开发h5页面,实现背景音乐播放+暂停
背景我们平常见到的h5页面,大多数都有背景音乐,打开页面自动播放,该文教大家如何利用uniapp开发h5,实现内置音乐播放、暂停,以及音乐icon的旋转和暂停动画。创建音乐对象代码如下:var innerAudioContext = uni.createInnerAudioContext();innerAudioContext.autoplay = true;//自动播放innerAu...原创 2020-01-24 17:03:38 · 12322 阅读 · 7 评论 -
解决uniapp开发h5页面时使用canvas字体显示大小有误问题
背景用uniapp开发h5页面,如果你使用canvas画图,可能会用到canvasContext.setFontSize()这个函数,经过测试,如果设置的size是小数,那么在csdn、知乎等内置浏览器中访问,字体大小是不正确的。解决方法用Math.round()等取整函数,将小数转为整数,再赋值。建议最好使用canvas中,涉及数字的都取整,不要用小数,以免出现其他问题!...原创 2020-01-04 16:47:25 · 2608 阅读 · 0 评论 -
uniapp之微信小程序开发——根据主题色动态修改svg的颜色
文章目录小程序引用图片的几种方式如何根据主题色改变图标颜色?小程序引用图片的几种方式这一期我们直入主题,教大家如何动态改变图标的颜色。首先,我们知道小程序引用图片的方式并不多。目前小程序并不支持直接引用svg文件,也不支持直接引用本地文件。总结下来,可行的方法有如下几种:img的src引用云文件的cloudID图片的https链接图片base64格式字体图标如uniapp的u...原创 2019-12-21 22:53:20 · 6586 阅读 · 6 评论 -
【约球online】小程序构建系列教程第一话——技术选型及架构设计
文章目录背景功能定位技术选型架构设计小程序部分截图结语背景不做鸽王是本人暑假做的一个约球微信小程序,主要功能是一对一约球、一对多广播等实用功能。目前该小程序已经发布,可以通过以下小程序码进行试玩。微信小程序是大三有段时间接触的新技术,那时候小程序刚出来,我觉得很新鲜,就跟着视频学了点,不过那时候前后端技术不如现在,所以很多不太理解,两年后重操旧业,感觉容易上手的多。这是我第二次自己做整个网...原创 2019-09-30 23:19:09 · 1790 阅读 · 7 评论 -
【约球online】小程序构建系列教程第二话——合理使用websocket
文章目录背景WebSocket接口有哪些?WebSocket实战小程序生命周期两种ws需求情况心跳重连背景上一篇集中写了一些坑,接下来的教程主要针对具体问题进行探讨。本章主讲uniapp微信小程序如何使用websocket,具体包括应该在哪里连接服务器、在哪里监听消息等等。本人目前正在开发的“不做鸽王”小程序由于用到了Websocket,对这方面的问题研究的比较多,在此分享以下我的经验,希望...原创 2019-09-10 15:43:14 · 6420 阅读 · 4 评论 -
uniapp之微信小程序开发——目前遇到的坑
文章目录写在开头所谓的坑1. main.js你最好别瞎改写在开头所谓的坑1. main.js你最好别瞎改当我们在HBuilder X中新建一个uniapp项目时,默认的main.js长这样:import Vue from 'vue'import App from './App'Vue.config.productionTip = falseApp.mpType = 'app'...原创 2019-08-25 17:44:08 · 30157 阅读 · 12 评论 -
微信小程序开发之路——地图调用,你得注意的几个坑
文章目录现在前头开发工具版本如何调用?几个问题1. 地图组件的大小和定位2. 给地图添加控件3. 地图属性3.1 指南针3.2 比例尺3.3 显示带方向的当前定位点3.4 设置地图初始中心位置3.5 设置地图比例尺3.6 设置地图旋转角度3.7 设置地图倾斜角度3.8 允许3D楼块3.9 允许俯视3.10 允许缩放3.11 允许拖动3.12 允许旋转3.13 开启卫星图3.14 开启实时路况参考网...原创 2019-08-04 00:55:07 · 24509 阅读 · 12 评论 -
Webpack4打包多页面工程基本教程——小白的填坑之旅
背景Webpack是当下使用人数最多的网页打包工具。当前其github主页的star数量为49.2k,比另一个流行的打包工具parcel(31.9k)要高不少。本人(小白一枚)由于项目需要的原因,最近几个月断断续续学习和使用webpack进行多页面工程的打包,可以说是一路挖坑一路填坑,最终实现了令人满意的效果。本文将回顾一路以来遇到的主要问题,简单分析并着重给出解决方案。希望给遇到同样问题的读者...原创 2019-06-05 23:17:28 · 6499 阅读 · 10 评论