从零开始，开发一个 Web Office 套件（5）：Mouse hover over text
2024-09-07 13:09:54
《从零开始, 开发一个 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():
然后再看下效果：
（未完待续）
最新文章
- Alpha阶段总结
- neo4j关闭和开启密码访问权限
- text/plain && text/html
- YY前端课程2
- freeCodeCamp:Seek and Destroy
- hiho一下 第六十四周 Right-click Context Menu
- ios cell常用属性
- Asp.Net判断字符是否为汉字的方法大全
- EXTJS4.2 控件之Grid 行点击事件
- MVC @Html.DropDownListFor 默认值
- Create RCU
- CSS实现DIV三角形
- HDU3473--Minimum Sum（静态区间第k大）
- 终于懂了：FWinControls子控件的显示是由Windows来管理，而不是由Delphi来管理（显示透明会导致计算无效区域的方式有所不同——透明的话应减少剪裁区域，所以要进行仔细计算）
- Cocos2d-xvision3.0加载失败，和，Vs2012环境搭建
- spring异常处理
- tomcat 修改为自己项目界面
- MongoDB副本集模式安装
- 八,ESP8266 文件保存数据
- [SDOI2013] 直径