![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端低代码编辑器
文章平均质量分 75
A &......
无。。。。。。。。。
展开
-
web前端编辑器内容-图层拖动排序功能的开发
vue3实现拖动排序,掌握拖动排序的原理。原创 2024-01-21 17:49:42 · 1361 阅读 · 0 评论 -
web前端编辑器内容-使用html2canvas获取截图,并处理一些问题
所以虽然我们中间的元素 css 尺寸是 375px,但是因为 Apple 是视网膜屏幕,所以使用了两倍于 css 尺寸的设备像素来渲染它,这就是最后图片尺寸为 750 px 的原因。这是因为我们页面上面的元素都是使用的是阿里云的oss,所以图片的地址会存在跨域的情况,htmlCanvas对于任何跨域的资源都不会做处理,所以就不会显示截图出现的背景图片。第二个问题是html2canvas获取到的截图在某些机型上面得到的宽度是750px,但是我们设置的宽度是375。第三个问题是有的区域出现了灰色黑色的区域。原创 2023-12-24 22:26:34 · 1512 阅读 · 0 评论 -
web前端编辑器内容-完成属性设置的优化
对于业务组件来说,其属性是有很多的,如果把所有属性都平铺在页面上,就会非常长,而且想要更改其中的某些属性,可能需要向下滚动很久才能找到,对于UI的交互不是很友好,需要对属性的不同特性进行分组。改造前:改造后:CommonComponentProps一开始就是按照不同的属性进行分类的,所以比较符合我们的一个需求。首先,组件总属性分两大类:业务组件(独特属性),通用属性(CommonComponentProps)将组件通用属性分类分多个小类: size,border type,shadow…原创 2024-01-21 22:07:15 · 604 阅读 · 0 评论 -
web前端编辑器内容-拖动元素改变元素的位置和大小的完成
拖动改变位置大小的交互实现原创 2024-01-22 00:25:43 · 1481 阅读 · 0 评论 -
web前端编辑器内容-创建业务组件和编辑器基本行为
editWrapper组件就是为了隔离两个组件,方便后续的一些拖拽,拉伸,吸附的一些效果。编辑器主要分为三部分,左侧是组件模板库,中间是画布区域,右侧是面板设置区域。在父组件中接收change事件来改变stroe中的compoents的值。在component-list组件中循环渲染这个模板。当组件内的change事件改变后,组件内部会触发。右侧是使用表单的方式来更新元素的值。中间是使用交互手段来更新元素的值。左侧是预设各种组件模板进行添加。最终转换成出来的值是这样的。原创 2023-12-22 14:16:12 · 4703 阅读 · 0 评论 -
web前端编辑器内容-HTML2Canvas 截图的原理
样式没起作用,原因是我们只添加的html,并没有添加样式,如果要做到一样,需要把样式也添加到svg中去,这就是htmlCanvas简单的原理。通过canvas.getContext(‘2d’)可以拿到canvas提供的2D渲染上下文,然后在里面绘制形状,文本,图象和其他对象。可缩放矢量图(Scalable Vector Graphics, SVG),是一种可用于描述二维的矢量图,基于XML的标记语言。内部的原理主要是根据要截图元素的节点进行遍历,根据类型进行复制,添加样式,另外就是对于不支持。原创 2023-12-25 00:13:46 · 1409 阅读 · 0 评论 -
web前端编辑器内容-数据结构设计上面的难点
web架构师编辑器内容在数据结构上面的一些思考和难点原创 2024-01-21 18:32:53 · 559 阅读 · 0 评论 -
web前端编辑器内容-编辑器组件图层面板功能开发-锁定隐藏、键盘事件功能的开发
我们这一部分主要是对最右侧图层面板功能进行剖析,完成对应的功能的开发:每个图层都对应编辑器上面的元素,有多少个元素就对应多少个图层,主要的功能如下:图层和编辑器中的元素都是一一对应的,在editor.ts中,其实就是对应的图层,有对应的一些属性,对于不同的状态,我们来添加对应的标识符来添加特定的标识符来表示他的状态即可。最开始的样子进行锁定隐藏操作原创 2024-01-17 00:38:54 · 891 阅读 · 0 评论 -
web前端编辑器内容-改进字体下拉菜单
前面说到我们可以通过面板配置来更新画布上面的一些属性,如果我们有这样一个需求:在右侧面板配置里面需要查看字体的样式效果我们应该怎么做呢?渲染的时候有两种方案:方案一使用tsx进行渲染,方案二:借助render函数桥梁,将vnode转换成真实dom。原创 2023-12-22 14:47:11 · 1152 阅读 · 1 评论 -
web前端编辑器内容-快捷键操作的实现
js复杂快捷键功能的开发原创 2024-01-22 23:56:54 · 859 阅读 · 0 评论 -
web前端编辑器内容-添加自动保存的功能
低代码编辑器添加自动保存的功能原创 2024-01-28 10:12:05 · 1184 阅读 · 0 评论