阅读 1402

我也做了一个可视化H5编辑器

昨天看到一篇文章介绍 可视化编辑器实现原理,我也来凑凑热闹

我们的实现思路是一样的,原理也差不多,我就不重复写了[斜眼笑],我着重介绍一下他未实现的部分

  1. 文本字体
  2. 标尺与编辑区域四周覆盖物

1.文本字体

字体设置没什么好说的,使用 css @font-face引用字体就行了,需要注意的点是 “文字提取(把字体文件中的某些文字提取出来形成一个新的字体文件)”

我们知道一个字体文件例如“PingFangSC.ttf”大小可能有几兆甚至几十兆,如果一个页面中使用了几个字体,那发布后的页面可能就需要加载几十上百兆的字体,这很不合理,所以就用到了字体提取,这里介绍一个js的字体提取库Fontmin先看一下效果

demo

这里分为两个情景

  1. 编辑 编辑时会在结束编辑之后请求后端提取接口,返回一个base64编码的提取后的字体
  2. 发布 发布时会合并相同字体的文本,再请求批量字体提取接口返回提取后的字体文件url的数组

这是发布后的效果 可以看到发布之后全部资源不到300kb,字体仅占8kb

2. 标尺与编辑区域四周覆盖物

  1. 标尺 先看效果

可以看到鼠标移动到标尺上会有淡淡的设计线,点击之后会在点击的位置显示一条设计线,注意标尺上显示的数值是设计尺寸,跟设计区域的实际像素不一样

然后左侧的标尺是怎么实现的,来看看这里的DOM结构与css代码 可以看到其实就是绝对定位的盒子里面放了一些固定高度的p标签,文本的垂直显示利用css样式

writing-mode: vertical-rl;
复制代码
  1. 四周遮挡物 照例先看效果

可以看到图层移到设计区域外面后有一层灰色覆盖物,这里的实现其实也很简单,四周是四个绝对定位的半透明div,为什么div在上面还可以选中下面的元素是因为设置了css属性

pointer-events: none;
复制代码

这是一个很好用的css属性

文章分类
前端
文章标签