创新实训
文章平均质量分 56
curiouity
这个作者很懒,什么都没留下…
展开
-
创新实训:动作队列与动作类
撤销是将上一个动作造成的影响消除,而重做是将消除的动作的影响重新添加。撤销和重做通过两个队列进行管理。分为actionQueue和backQueue当进行撤销动作的时候,将actionQueue的末尾action弹出到backQueue的末尾中,并执行撤销动作当进行重做动作的时候,将backQueue的末尾action弹出到actionQueue的末尾中,并执行重做动作需要注意的是,有的动作不会产生影响,所以不应加入队列,有的动作为连续多次发生,如果全部加入到队列当中,可能对功能造成极大的影响,所以原创 2022-05-26 11:04:17 · 288 阅读 · 0 评论 -
创新实训:右侧功能栏
右侧功能栏一共有六种样式,对这些功能和设计思想进行一定的介绍原创 2022-05-24 23:31:19 · 98 阅读 · 0 评论 -
创新实训:上侧功能栏介绍
1.上方功能栏1 上方功能栏1.1 画布放缩显示+放大缩小+按钮设置+快捷键设置+自适应grid画布画布的设置通过tranform的scale属性进行设置,scale的设置有三种不同的方式,通过界面的scaleNum进行设置,自增1%,自减1%。通过统一的接口对scale进行设置,同时,由于scale属性并不会改变svg的大小,需要在外侧的div进行改变以适配。首先,将整体div的大小进行一定的设置。画布的大小+scale-padding(使scale后画布位置不进行改变的padding)map原创 2022-05-24 23:21:01 · 113 阅读 · 0 评论 -
创新实训:模块介绍--分组
前端通过连接后端核心库,为客户提供分组的功能当通过ctrl模式一次性选中多个组件时,可以通过右侧的功能栏的分组按钮进行分组。完成分组中,组内元素可以有统一的移动和其他特性1.功能介绍关于分组有两个功能:link和groupgroup的实现基于link。link:在组件之间建立父子关系。之后父组件的行动会影响子组件,但是子组件的行动不会影响父组件。group:在组件之间建立分组关系。组内元素可以一起移动。2.功能实现分析可以看出 link是实现group的基础,但是link和group之间又有原创 2022-05-19 20:56:51 · 252 阅读 · 0 评论 -
创新实训10:附着和移动规则的建立
这周的主要目标是实现一下两个功能。这两个功能的实现均比较繁杂,为了能更好的进行代码的书写,先在这里理清一下自己的思路。1.附着分析:附着的基本要求是可以从组件悬浮时出现的附着点拉出一条箭头,并允许箭头附着在另一个组件的附着点上,首先箭头移动到组件的边缘出会显示组件的附着点,并在一定距离内被附着点所吸附,同时需要移动一段距离才能离开。同时被吸附后对应附着点的移动会引起相应的组件移动。2.移动规则在不同的情况下移动组件有着不同的规则1.移动箭头时,箭头会在附着点一定范围内被附着点吸引2.移动组件时原创 2022-04-27 21:50:19 · 58 阅读 · 0 评论 -
项目实训8:各种svg解析器的制作以及贝塞尔曲线的学习
对于附着和锚点的功能,由于附着对后端不会产生影响并且前端有许多关于附着的api方便计算,所以决定该功能在前端实现。首先,针对svg的七种基本模型:line,rect,circle,ellipase,polygon,polyline,path.设计附着点的解析器。前六种的机制较为简单,但是path有些复杂。所以下文记录一下对于path的学习过程path将路径记录在d属性中,且有许多的操作指令进行对path的绘制,记录一下各种操作指令以及他们的效果。1.M x y和m x y(大写绝对定位,小写相对定位原创 2022-04-24 14:16:35 · 449 阅读 · 0 评论 -
项目实训7:项目具体的实现关于svg的各种功能
现在已经是第八周了。经过之前的各种铺垫和讨论,我已经基本上将前端搭建完成,前后端之间也能利用websocket进行通信。本周的任务: 创建图形 画布缩放、 移动 关键点的移动 图形的拖动 组件:直线、矩形、…(其他视情况) 撤销、重做 删除 保存图片 画布网格 Markdown这任务还是挺重的,由于架构的变化,打算使用dom直接操作svg而不是原来的绘制在canvas中。我需要先熟悉一些关于dom操作svg的方法和手段。1.demo目标:通过点击屏幕绘制出svg,原创 2022-04-11 21:12:33 · 2086 阅读 · 0 评论 -
项目实训4:与后端的连接
因为前端使用vue,而后端使用c++,为了避免网络延迟所可能带来的延迟,我们需要将c++代码进行转换并当成js的包被前端调用。我这周的主要目标便是尝试进行前后端的连接。我了解到nodejs可以通过一些特殊机制将c++的代码转换为编译后的node文件。我首先根据官网上的hello world进行操作,因为我并不会使用nodejs,我短暂的补了一些nodejs的知识。成功运行addon的hello world后,我的心情还是比较激动的。但是我发现webpack在编译时会报错。但是我没在网上找到合适的资料原创 2022-03-29 23:35:29 · 1739 阅读 · 0 评论 -
项目实训3:项目的细节填充
本周在上周的框架基础上,对界面的细节进行填充1.实现左侧栏的拖拽功能这个功能是通过鼠标事件进行实现的。由于对前端不是特别熟悉,我进行了多次尝试。eg1:使用mousedown方法将flag置为true,mouseup方法将flag置为false,使用mousemove方法在flag===true的时候,对左侧栏的宽度进行调整。但是这个方法会带来很大的延迟。方法的实现也不是非常优美。eg2:在mousedown方法注册mousemove方法和mouseup方法。我觉得这样的实现比较合理。第二种代码原创 2022-03-21 15:09:33 · 1191 阅读 · 0 评论