这是一个系列博客,最终目的是要做一个基于 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):拖动控制点,调整编辑器大小的更多相关文章

  1. 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器

    书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Of ...

  2. 从零开始, 开发一个 Web Office 套件 (3): 鼠标事件

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...

  3. 从零开始, 开发一个 Web Office 套件(4):新的问题—— z-index

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...

  4. 《从零开始, 开发一个 Web Office 套件》系列博客目录

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...

  5. 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 富文本编辑器 万里长征 ...

  6. 从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  7. 从零开始,开发一个 Web Office 套件(15):拖动边框,平移编辑器

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  8. 从零开始,开发一个 Web Office 套件(6):光标 & Click 事件

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office ...

  9. 从零开始,开发一个 Web Office 套件(5):Mouse hover over text

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...

随机推荐

  1. 分布式锁redis

    1. 首先看这篇文章中  https://mp.weixin.qq.com/s/s-ozSjM5WmSUopxttSWYeQ 为什么redis能实现锁功能呢,看下图,redis命令窗口中,setnx  ...

  2. 多数据源并且数据库类型不同的情况下PageHelper的使用

    一.问题来源 最近开发一个项目需要依赖两个数据源,数据源类型分别为oracle和postgresql,代码中使用com.github.pagehelper分页插件进行分页,代码运行过程中postgre ...

  3. Spring容器 从XML 文件中读取bean的定义,并实例化bean?

    解释Spring框架中bean的生命周期. Spring根据bean的定义填充所有的属性. 如果bean实现了BeanNameAware 接口,Spring 传递bean 的ID 到 setBeanN ...

  4. MariaDB InnoDB基本介绍

    InnoDB锁定模式 事务获取锁,以防止并发事务修改甚至读取某些行或行范围.这样做是为了确保并发写入操作不会冲突. 共享锁(S)和排他锁(X) 两种标准的行级锁是共享锁(S)和排他锁(X) 获取共享锁 ...

  5. pandas学习总结

    什么是pandas pandas数据读取 03. Pandas数据结构 Pandas查询数据的几种方法

  6. ztree详解

    1.添加样式.js <link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_ ...

  7. 安装scrapy速度慢解决方案

    使用终端pip安装scrapy龟速 解决方案: 使用清华源下载 清华园链接 https://mirrors.tuna.tsinghua.edu.cn/help/pypi/ win+R打开cmd 输入p ...

  8. Windows 10搭建FTP服务器

    1 开启FTP服务 控制面板 -> 程序和功能 -> 启用或关闭Windows功能 找到下面选项的勾选 2 添加FTP站点 在开始菜单里面输入 IIS 搜索并打开 IIS管理器 展开左侧菜 ...

  9. 如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  10. shiro+springboot分析思路

    文章目录 前言 一.为什么要使用shiro 二.使用步骤 1.如何认证和授权 2.如何获取数据 总结 前言 shiro和spring security等安全框架可以用户管理和权限认证 一.为什么要使用 ...