- 博客(17)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 项目实训（三）：输入法开发（4）
本次开发主要实现了图片截图的处理很多时候文字截取时是带有背景或者是歪扭的，本次增加简单的图像处理功能，使用canvas处理处理掉文字背景同时可以对文字rotate// 处理旋转的方法 onRotate(e) { // 旋转画布后重新paint图案 const pre = this.$refs.pre; const context = this.editContext; const angle = (Math.PI * (e - 50)) /
2022-05-04 19:35:58
542
原创 项目实训（三）：输入法开发（2）
本次开发主要实现前端截图上传，替换使用不太方便的图片上传文字上传由于是从画板中截图，htmltopng之类的dom读取截图库就不可以使用一开始考虑使用chrome extension实现截图，但实现起来效果不太理想（向js逻辑传递截图数据比较啰嗦，需要通过storage），且extension发布不方便还有浏览器限制与版本限制，考虑其他实现后来经过调研发现getDisplayMedia可以获取屏幕视频流，可以把视频流打入video从中截取一屏内容读入canvas中实现截图但这样截取的是整屏幕
2022-05-04 13:58:27
640
原创 项目实训（二）：输入法开发（1）
本次开发主要实现png转换svg并且输出功能前端截图比较别扭，计划下一次开发实现，本次开发先使用upload图片上传组件前端组件暂时使用element，待版本稳定后使用vuetify重构核心部分图片格式转换，经过调研选用npm包：svg-png-converter可以接受base64 png输入，按像素转成svg，并且可以接受简单调色操作async transferToSvg(data) { const result = await png2svg({ tr
2022-05-04 13:35:51
807
原创 项目实训（一）
近期和学长讨论了项目的现状以及未来的技术选型未来的方向（1）文档管理部分计划将目前集成在编辑器中的文档管理抽离出来，实现一个比较完整的云文档管理功能，包括文档的用户权限以及读写等CURD功能。需要学长先行将document部分抽离，单独打成npm包。这样在前端和后端导入该npm包，可以实现统一的文档管理（2）用户管理部分将用户部分抽离并完善，在单独的登录注册功能之外，添加用户的文档权限。用户应该可以访问自己的文档，同时可以授予他人权限访问自己的文档，可以是有偿的或无偿的，由用户来决定。同
2022-03-27 11:59:36
140
原创 2021SC@SDUSC SDUDOC项目分析（十三）
Engine.js（一）私有属性：app_element: 此处的appelement是vue中的this，也就是vue实例packages:见下图传入方法：checkRouter：传入name，检查name是否对应当前的页面Engine.checkRouter = function(name){ return this._app_element.getRouterComponent() && this._app_element.getRouter.
2021-12-23 15:27:57
493
原创 2021SC@SDUSC SDUDOC项目分析（十二）
Line（二）添加的handler：left_click 新建一条点到之前已经选中点的直线，如果没有点，就创建一个ToolManager.addHandler(new Handler('line.onMouseLeftClick', 'left_click', false, Engine, function(event){ if(DocumentManager.getCurrentPage() <= 0) return; let collide_list = Collid
2021-12-20 21:36:37
78
原创 2021SC@SDUSC SDUDOC项目分析（十一）
Line（计算类）Line的计算类，有用于数学计算的方法内部属性：方法：_getEndpointDots：传入线的起点，斜路与线的长度（半径），计算出线的终点所在的坐标_getEndpointDots：Line（一）和之前分析过的Dot2D一样，也是一个图形类，代表一根线继承自element私有属性：方法：getLine：获取Line的计算实例类checkCollide：检查碰撞，实际返回的是distanceLine2D.prototype...
2021-12-20 20:52:58
84
原创 2021SC@SDUSC SDUDOC项目分析（十）
HttpRequest.js基于axios进一步封装的网络请求模块processError：错误处理方法，接收一个err，通过engine显示相应的错误信息，并将其打印在控制台上processResponse：processResponse，判断返回数据的状态并根据状态通过engine打印，并返回True和Flase来表明请求状态postJsonWithHead：封装好的post方法，专门用来post json（content-type为application/json），会给请求加上请求头
2021-12-19 17:09:45
102
原创 2021SC@SDUSC SDUDOC项目分析（九）
DocumentManager（二）addAfterCurrentPage：通过方法体来看，应该是新建界面时调用的方法DocumentManager.addAfterCurrentPage = async function(filename, src){ //新建界面时调用的方法、 //将选中的图片转base64传给服务器，获取服务器返回的src_link let request_src = await HttpRequest.uploadWebPage(filename, src
2021-12-06 15:27:36
285
原创 2021SC@SDUSC SDUDOC项目分析（八）
DocumentManager私有属性filename：文档名page_array：pageArry维护一个page_id组成的数组和current_page当前页面
2021-12-01 16:51:26
168
原创 2021SC@SDUSC SDUDOC项目分析（七）
PageArray.js维护所有的page_id的数组与当前也current_page的值私有属性page_list：所有page的page_id组成的数组current_page:当前页，是index而非当前的page id方法：addAfterPage：传入page id，在指定index页面后添加一页。并将其指定为当前pageremovePage：移除指定页面，比较迷惑PageArray.prototype.removePage = function(page_i
2021-12-01 16:15:36
82
原创 2021SC@SDUSC SDUDOC项目分析（六）
ElementManager与ColideManagerColideManager负责进行碰撞管理，不持有元素本身的引用，维护元素id与鼠标点击距离的数组属性：colide_list：id与distance组成的object数组collide_list：缓存之前查询的结果方法：update：获取所有元素，并计算他们距离鼠标点的距离。然后向collide_list中添加一个由id和distance组成的object//获取距离鼠标最近的limit个元素CollideM.
2021-11-23 15:26:30
192
原创 2021SC@SDUSC SDUDOC项目分析（五）
render与handler的逻辑，以Dot.js中的为例handler：当选中这个插件，并且在屏幕中执行相应操作时，ToolManager会调用当前插件的handler。以左键点击为例，会新建一个点，点的类型由附近有无直线决定ToolManager.addHandler(new Handler('dot.onMouseLeftClick', 'left_click', false, Engine, function(event){ //非当前界面，直接返回 if(Doc
2021-11-22 19:19:02
350
原创 2021SC@SDUSC SDUDOC项目分析（四）
2021SC@SDUSCDot.js详解，是空间的一个二维点。同时也负责dot工具的注册继承于element属性：type：点的类型，有自由点、直线附属点、直线交叉点x，y：点的坐标值此处的属性注册在prototype上，猜测是防止构造时漏缺属性产生错误方法：initialize：初始化构造方法，传入id与所属page，同时传入两个参数，根据点的类型不同可以是x，y坐标，所属直线等属性都被重写了访问器，只有getMove：传入一个point类，将实例.
2021-10-31 16:05:10
108
原创 2021SC@SDUSC SDUDOC项目分析（三）
2021SC@SDUSCToolManager模块详解主要功能：管理插件，接收插件的注册与handler注册属性：tools：存有全部的tool列表Tool_list：按照tools中的所属slot分类过后的差价列表，以插件类型为键名，属性为一个tool数组handlers：存有插件注册的handler，object类型，以handler的id为键方法：CalcToollist：将tools计算成tool_listGettoollist：传入一个slo..
2021-10-31 15:30:53
99
原创 2021SC@SDUSC SDUDOC项目分析（二）
2021SC@SDUSC上次的博客主要介绍了项目的背景与代码文件的作用，本次主要分析sdudoc引擎的插件的注册与原理,以左侧工具栏为例。可以看到左侧工具栏有很多工具，每一个工具都对应着一个静态类，而静态类会在初始化时将自己注册到ToolManager的一个Tool类中，统一管理。以移动工具为例在Engine下的plugin文件夹中，有对应的move.js，类中有对应的handler与渲染方法等，而其中调用了ToolManager中的addTool方法，注册了一个新的Tool实例，即将该
2021-10-09 21:20:19
82
原创 2021SC@SDUSC SDUDOC项目分析（一）
一、SDUDOC项目介绍SDUDOC是一个古籍管理器，可以对古籍图片进行数字化处理，目前系统已经基本实现了编辑器的功能，该编辑器能够上传扫描的古籍图像，并且能对图像进行注释、分块等处理二、技术栈1、前端框架vue应用广泛的前端框架，实现数据的动态绑定，有良好的性能2、2D渲染库- PIXI速度很快的2D库，用来渲染绘制基本的图形3、vuetify一个material风格的vue样式库，减少了很多css设计并使风格统一4、面向对象的原生js也是该项目最大的特点。不同于传
2021-09-29 23:06:49
129
空空如也
node.js 如何同步实现数据库读写与return
2021-02-05
TA创建的收藏夹 TA关注的收藏夹
TA关注的人