首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

(10月最新) 前端图形学实战: 从零开发几何画板(vue3 + vite版)

/euryd 接下来就继续这个话题, 我们进一步扩展, 来从零实现一个几何画板。...你将收获 vue3 + vite的实用技巧 几何画板的基本开发思路 元素创建, 编辑, 拖拽, 图层管理 撤销和重做 导入导出 利用几何和代数学知识解决前端问题 demo演示 在分享方案之前, 我先给大家演示一下做好的...demo, 这样可以更好的理解我们接下来要做的事情: 2022-10-15 10.16.31.gif 技术实现 我们继续沿用上一篇文章几何学在前端边界计算中的应用和原理分析的工程, 由于几何画板相当于一个独立的小应用...画板搭建 画板搭建主要是静态和交互部分, 这里简单和大家介绍一下基本构造: image.png 上图可知画板主要分两个部分: 画布区(包含记录鼠标移动坐标的文本提示) 侧边控件区 画布的点阵背景我们用...,并实现表单渲染器来动态的更新元素的属性, 类似于 H5-Dooring 中的编辑面板: 2022-10-15 20.55.10.gif 在后面的文章中我会实现一个min版的属性编辑器来完善我们的几何画板

72420

Canvas实现网页协同画板

协同画板相关介绍 画板协同: 简单来说就是使用canvas开发一个可以多人共享的画板,都可以在上面作画画板,并且画面同步显示 canvas白板相关使用参考我之前的文章:Canvas网页涂鸦板再次增强版...协同画板实现 Canvas工具类封装 palette.js /** * Created by tao on 2022/09/06. */ class Palette { constructor...协同画板实现效果 书写 撤回和前进 多边形 多画板协同 新加入客户端同步 协同画板相关难点和解决方案 实现实现画板协同,发送消息的时机 解决方案:是通过将canvas...(以后尝试,可行性未知) PC端鼠标操作画板和手机端触摸操作事件不一致的问题 解决方案:PC端鼠标操作画板是mousemove、mousedown、mouseup事件;手机触摸事件是touchmove...(上述的Palette工具类中已加入了触摸事件的处理,但是仍有多点触摸的事件未进行处理) 多人同时操作画板画板目前未实现多人同时操作 目前画板还比较简单,未实现操作步骤元素化,每个操作结构都可以进行选择拖拽的功能

1.7K20

Proe发布几何与复制几何

进入正题,Proe发布几何与复制几何,可以说是父子关系,先有发布,后有复制。通过复制几何与发布几何,可以加快绘图速度,非常使用的技巧。下面简述之。...发布几何是在你要准备给其它零件提供参考的模型里进行的,使用发布几何的意义在于你可以在原始模型中把需要提供给别的零件的参考进行预先打包,实际上发布几何创建的是一个参考指向的集合。...要真正使用发布几何,你必须在另外一个零件中使用复制几何来把前面发布出来的几何集合复制过来,当然这样的复制过程只需要直接选择前面的发布几何特征就可以,不需要再一个个去选择不同的参考。...新用户一般习惯直接使用复制几何,但这是一个不好的习惯,建议都采用发布几何结合复制几何的方式进行参考的使用 第一步,复制所需要的曲面。...第二步,发布几何。 选中第一步复制的曲面,然后插入-共享数据-发布几何。 第三步,复制几何。 找到自己需要复制几何的零件,执行操作。

1.7K20

前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)

本文是 100+前端几何学应用案例 专栏的第三篇文章, 在第一篇文章 几何学在前端边界计算中的应用和原理分析 和第二篇文章 前端图形学实战: 从零开发几何画板(vue3 + vite版) 中我介绍了几何学在前端领域的应用以及如何从零开发一个几何画板...15 20.46.21.gif 如果大家感兴趣可以在 gitee 查看我的具体代码实现: https://gitee.com/lowcode-china/euryd 接下来就继续上次的话题, 来从零实现几何画板的撤销和重做功能...你将收获 撤销重做的实现思路 vue 和 react 框架下的撤销重做库介绍 从零实现几何画板的撤销重做功能 挖掘 撤销重做 的扩展场景 demo演示 技术实现 在实现撤销重做功能之前, 我们需要先理清设计思路...创建记录管理器(recordManager) 为了保证专栏文章的连贯性, 我还是以上一篇文章前端图形学实战: 从零开发几何画板(vue3 + vite版) 中实现的几何画板为例, 采用 vue3 来实现...后期规划 后面会继续完善画板, 实现图层管理, 导入导出, 下载等可视化编辑器常用的功能, 如果大家感兴趣, 可以参考我的 github: https://gitee.com/lowcode-china

61510
领券