标签：平移 Web Office 16 拖动 编辑器 控制点 dx dy

这是一个系列博客，最终目的是要做一个基于 HTML Canvas 的、类似于微软 Office 的 Web Office 套件（包括：文档、表格、幻灯片……等等）。
博客园：《从零开始, 开发一个 Web Office 套件》系列博客目录
富文本编辑器 Github repo 地址：https://github.com/zhaokang555/canvas-text-editor
富文本编辑器 在线 Demo：https://zhaokang555.github.io/canvas-text-editor/

2. 富文本编辑器（MVP）

2.29 Feature：拖动控制点，调整编辑器大小

2.29.1 算法

1. 监听控制点的拖动事件，将拖动的距离记为(dx, dy)。根据控制点所处方位，平移编辑器或者改变其大小：
   1. 如果拖动的是左上角（TopLeft）的控制点，则：
      1. 将编辑器平移(dx, dy)
      2. 将编辑器宽高增加(-dx, -dy)
   2. 如果拖动的是顶部中央（Top）的控制点，则：
      1. 将编辑器平移(0, dy)
      2. 将编辑器高度增加-dy
   3. 如果拖动的是右上角（TopRight）的控制点，则：
      1. 将编辑器平移(0, dy)
      2. 将编辑器宽高增加(dx, -dy)
   4. 如果拖动的是右侧中央（Right）的控制点，则将编辑器宽度增加dx
   5. 如果拖动的是右下角（BottomRight）的控制点，则将编辑器宽高增加(dx, dy)
   6. 如果拖动的是底部中央（Bottom）的控制点，则将编辑器高度增加dy
   7. 如果拖动的是左下角（BottomLeft）的控制点，则：
      1. 将编辑器平移(dx, 0)
      2. 将编辑器宽高增加(-dx, dy)
   8. 如果拖动的是左侧中央（Left）的控制点，则：
      1. 将编辑器平移(dx, 0)
      2. 将编辑器宽度增加-dx
2. 如果平移了编辑器，就会进入上一节讲到的平移编辑器的逻辑，这里就不再赘述；
3. 如果调整了编辑即的宽度，则需要：
   1. 将上边框和下边框横向拉伸，但是高度不变
   2. 将左边框和右边框平移
   3. 将不同位置的控制点平移不同距离
4. 如果调整了编辑即的高度，则需要：
   1. 将左边框和右边框纵向拉伸，但是宽度不变
   2. 将上边框和下边框平移
   3. 将不同位置的控制点平移不同距离

2.29.2 实现

2.29.3 效果

2.29.4 Bug: 平移或调整大小后，点击编辑器空白处，光标不能正确定位

Bug表现：

原因分析：这是因为编辑器平移或调整大小后，editor.blankSpace没有及时更新。

修复：

2.29.5 最终效果

（未完待续）

标签：平移,Web,Office,16,拖动,编辑器,控制点,dx,dy
来源： https://www.cnblogs.com/forzhaokang/p/16081062.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。