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

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

对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor

2. 富文本编辑器(MVP)

2.15 Mouse hover over text

2.15.1 再议 Bounding box

首先,让我们来回顾一下CanvasTextEditorChar的包围盒:

如上图,CanvasTextEditorChar的包围盒是由:left, boundingBoxTop, width, height定义的。另外,其top仅指的是textBaseLine的纵坐标,跟包围盒没有直接的关系。

我们期望的结果是:当鼠标hover在包围盒上时,产生相应变化。

所以,不能直接让CanvasTextEditorChar直接继承ResponsiveToMouseHover,因为二者的top含义完全不同。而是要让CanvasTextEditorChar的包围盒继承它。

2.15.2 实现

修改CanvasTextEditorChar

  • 让其持有一个boundingBox对象:

    • 添加属性:boundingBox: ResponsiveToMouseHover
    • constructor中为boundingBox初始化

  • 当修改Char的位置信息时,要同时更新boundingBox的位置信息

  • render中调用boundingBox.render()

同时,修改CursorType:

添加普通文字对应的鼠标样式:

然后修改CanvasTextEditorParagraphCanvasTextEditor中对应的destructor:

2.15.3 效果

为了看得更清楚,我们可以加上一些辅助线。修改ResponsiveToMouseHover.render():

然后再看下效果:

(未完待续)

从零开始,开发一个 Web Office 套件(5):Mouse hover over text的更多相关文章

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

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

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

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

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

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

  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 套件(6):光标 & Click 事件

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

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

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

  9. 从零开始,开发一个 Web Office 套件(10):捕获键盘事件,输入文字

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

随机推荐

  1. linux + opencv + cuvid中使用cv::cuda::GpuMat类的一些坑

    1.我最终成功实现了opencv中利用cuvid实现GPU视频解码:核心代码是: 1 cv::cuda::GpuMat d_frame; 2 cv::Ptr<cv::cudacodec::Vid ...

  2. [源码分析] Facebook如何训练超大模型 --- (3)

    [源码分析] Facebook如何训练超大模型 --- (3) 目录 [源码分析] Facebook如何训练超大模型 --- (3) 0x00 摘要 0x01 ZeRO-Offload 1.1 设计原 ...

  3. golang中的标准库time

    时间类型 time.Time类型表示时间.我们可以通过time.Now()函数获取当前的时间对象,然后获取时间对象的年月日时分秒等信息.示例代码如下: func main() { current := ...

  4. golang中mutex使用

    package main import ( "fmt" "sync" "time" ) /* 高并发是golang语言最大的亮点 一个线程可 ...

  5. Android开发----开发工具的安装与TextView组件

    开发工具的安装 选择使用Android Studio进行开发,Android Studio 是谷歌推出的一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT, ...

  6. Nginx请求连接限制

    目录 Nginx的请求限制 HTTP协议的连接与请求 连接限制 配置示例 做个演示: 请求限制 配置示例 基本指令 limit_req_zone limit_req zone 做个演示: Nginx的 ...

  7. linux中shell编程 -->三剑客习题汇总

    目录 1.找出/proc/meminfo文件中以s开头的行,至少用三种方式忽略大小写 2.显示当前系统上的以root,centos或者user开头的信息 3.找出/etc/init.d/functio ...

  8. 微服务架构 | 4.2 基于 Feign 与 OpenFeign 的服务接口调用

    目录 前言 1. OpenFeign 基本知识 1.1 Feign 是什么 1.2 Feign 的出现解决了什么问题 1.3 Feign 与 OpenFeign 的区别与对比 2. 在服务消费者端开启 ...

  9. windows系统配置Nginx使用SSL证书实现Https反向代理

    Nginx反向代理服务,可以代理接收请求,并把请求转发到设置好的其他服务器上. 例如,Nginx服务器为 100.101.102.103,A服务为 100.101.102.104 ,通过Nginx配置 ...

  10. python13day

    昨日回顾 生成器:生成器就是迭代器,生成器是自己用python代码构建的 生成器函数 生成器表达式 python内部提供的 如何判断函数和生成器函数 yield yield return 吃包子的区别 ...