从零开始,开发一个 Web Office 套件(5):Mouse hover over text
《从零开始, 开发一个 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
:
添加普通文字对应的鼠标样式:
然后修改CanvasTextEditorParagraph
和CanvasTextEditor
中对应的destructor
:
2.15.3 效果
为了看得更清楚,我们可以加上一些辅助线。修改ResponsiveToMouseHover.render()
:
然后再看下效果:
(未完待续)
从零开始,开发一个 Web Office 套件(5):Mouse hover over text的更多相关文章
- 从零开始, 开发一个 Web Office 套件 (3): 鼠标事件
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...
- 从零开始, 开发一个 Web Office 套件(4):新的问题—— z-index
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...
- 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器
书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Of ...
- 《从零开始, 开发一个 Web Office 套件》系列博客目录
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...
- 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 富文本编辑器 万里长征 ...
- 从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- 从零开始,开发一个 Web Office 套件(6):光标 & Click 事件
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office ...
- 从零开始,开发一个 Web Office 套件(7):新的问题—— Click 事件的 z-index
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- 从零开始,开发一个 Web Office 套件(10):捕获键盘事件,输入文字
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
随机推荐
- ADD software version display
ADD software version display ADD software version display1. Problem Description2. Analysis3. Solutio ...
- vue3知识点的自我总结
1. 我们对ref的错误理解 ref 经常去监听基本数据类型. 同时也可以去监听[数组][对象]都是可以的. ref是深度的监听.并不是大家说的那样不能去监听复杂的数据类型. 只是根据我们推荐ref去 ...
- 《手把手教你》系列技巧篇(五十九)-java+ selenium自动化测试 - 截图三剑客 -上篇(详细教程)
1.简介 今天本来是要介绍远程测试的相关内容的,但是宏哥在操作服务器的时候干了件糊涂的事,事情经过是这样的:本来申请好的Windows服务器用来做演示的,可是服务器可能是局域网的,连百度都不能访问,宏 ...
- C# Reflection反射机制
一.反射 什么是反射 .Net的应用程序由几个部分:'程序集(Assembly)'.'模块(Module)'.'类型(class)'组成: 反射提供一种编程的方式,让程序员可以在程序运行期获得这几个组 ...
- Windows和Linux关闭占用端口
关闭端口的方式有很多种,但是常用的就是这种比较来的快一点 如果通过以下方式解决不了,可以通过关闭服务来解决 Windows 1.查看端口占用的进程 netstat -ano | findstr 800 ...
- vue学习12-表单属性绑定
1 <!DOCTYPE html> 2 <html lang='en'> 3 <head> 4 <meta charset='UTF-8'> 5 < ...
- golang中的原子操作atomic包
1. 概念 原子操作 atomic 包 加锁操作涉及到内核态的上下文切换,比较耗时,代价高, 针对基本数据类型我们还可以使用原子操作来保证并发的安全, 因为原子操作是go语言提供的方法,我们在用户态就 ...
- gin中自定义中间件
package main import ( "github.com/gin-gonic/gin" "log" "time" ) func L ...
- 磁盘sda,hda,sda1,并行,串行
1.sd,hd表示硬盘, a表示第一块盘, 1表示硬盘上的第一个分区 2.sd是Serial ATA Disk ,表示硬盘是scsi,SATA串行接口 hd是 hard disk,表示硬盘是IDE(也 ...
- linux文件详细说明与inode编号
目录 一:文件类型概念说明 1.文件详细信息详解 2.inode编号 一:文件类型概念说明 1.文件详细信息详解 文件详细信息编号 ls - lhi /etc/ 134319695 -rw------ ...