《 Starting from scratch , To develop a Web Office Kit 》 Series blog Directory

This is a series of blogs , The ultimate goal is to make a project based on HTML Canvas Of , Similar to Microsoft Office Of Web Office Kit , Include : file , form , Slide ... wait .

Corresponding Github repo Address : https://github.com/zhaokang555/canvas-text-editor

2. Rich text editor (MVP)

2.15 Mouse hover over text

2.15.1 Further discussion Bounding box

First , Let's review CanvasTextEditorChar The bounding box of ：

Pictured above ,CanvasTextEditorChar The bounding box is made of ：left, boundingBoxTop, width, height Defined . in addition , Its top It just means textBaseLine The ordinate of , It has nothing to do with the bounding box .

The expected result is ： When mouse hover When on the bounding box , Produce corresponding changes .

therefore , Can't just let CanvasTextEditorChar Direct inheritance ResponsiveToMouseHover, Because of the difference between the two top The meaning is totally different . It's about letting CanvasTextEditorChar Your bounding box inherits it .

2.15.2 Realization

modify CanvasTextEditorChar：

Let it hold one boundingBox object ：
- Add attribute ：boundingBox: ResponsiveToMouseHover
- stay constructor In Chinese, it means boundingBox initialization

When modifying Char When the location information of , You want to update at the same time boundingBox Location information for

stay render Call in boundingBox.render()

meanwhile , modify CursorType:

Add the mouse style corresponding to ordinary text ：

And then modify CanvasTextEditorParagraph and CanvasTextEditor Corresponding destructor:

2.15.3 effect

To see better , We can add some auxiliary lines . modify ResponsiveToMouseHover.render():

And then look at the effect ：

（ To be continued ）

Starting from scratch , To develop a Web Office Kit （5）：Mouse hover over text More articles about

Starting from scratch , To develop a Web Office Kit (2): Rich text editor
The book is written before. : Starting from scratch , To develop a Web Office Kit (1): Rich text editor This is a series of blogs , The ultimate goal is to make a project based on HTML Canvas Of , Similar to Microsoft Office Of Web Of ...
Starting from scratch , To develop a Web Office Kit (1): Rich text editor
This is a series of blogs , The ultimate goal is to make a project based on HTML Canvas Of , Similar to Microsoft Office Of Web Office Kit , Include : file , form , Slide ... wait . Rich text editor Go on a journey of thousands of miles ...
Python The way ,Day18 - To develop a WEB Let's chat to tease my sister
Python The way ,Day18 - To develop a WEB Let's chat to tease my sister Content of this section : Project practice : To develop a WEB The chat room functional requirement : Users can chat with friends one-on-one You can search . Add someone as a friend Users can search and add groups Every ...
Python To develop a WEB The chat room
Project practice : To develop a WEB The chat room functional requirement : Users can chat with friends one-on-one You can search . Add someone as a friend Users can search and add groups Each group has an administrator who can approve the user's group addition request , Group administrators can use multiple , Group administrators can delete . add to . ...
《30 Heaven studies 30 A new technology 》-Day 15：Meteor —— Create one from scratch Web application
Catalog :https://segmentfault.com/a/1190000000349384 original text : https://segmentfault.com/a/1190000000361440 up to now ...
stay 2015 year To develop a Web App What you have to know
In the past year , I'm developing my first important... From scratch Web application . Experience teaches a lot of things you didn't know before , Especially in terms of security and user experience . It is worth mentioning that , The last time I tried to build any reasonable complexity was in 2005 year . therefore , In security protection ...
To develop a Web App What you have to know
In the past year , I'm developing my first important... From scratch Web application . Experience teaches a lot of things you didn't know before , Especially in terms of security and user experience . It is worth mentioning that , The last time I tried to build any reasonable complexity was in 2005 year . therefore , In security protection ...
How to use Eggjs Develop a project from scratch （2）
In the last article , We've used Sequelize Connected to the database , And can carry on the simple database operation , On this basis , We try to develop a complete project . In this article, we start from user registration . Log in and get started , Try to develop user module related code . user ...
[iOS] Develop an instant messaging from scratch APP
Preface This is my graduation project . At the beginning of the project, it was because I had studied it a little before XMPP agreement , On this basis, it should not be difficult . And then it's half a year before we start choosing technology , I think why not start from the bottom ! No need XMPP, Contact at that time ...
phaser3 Introductory tutorial - Develop a brick game from scratch
Project code Project code Experience it. Space start , The left and right arrows control the movement Experience it. Phaser brief introduction Phaser It's a HTML5 Game framework . It uses a lot of HTML5 API, for example Canvas,WebGL,Audio,G ...

Random recommendation

Front desk access Dropdownlist Selected text
$("#ddltest").find("option:selected").text()
VC++ Make DLL Specific explanation
1. DLL Basic concepts of Applications (exe) To reference object code (.obj) External functions , There are two ways to achieve it -- Static and dynamic links . 1. Static links The linker searches the corresponding library file (.lib), And then put this on ...
mysql Repair tables and optimize tables
REPAIR TABLE `table_name` Repair table OPTIMIZE TABLE `table_name` Optimization table
SP2010 3D Tag cloud Web part -- Cool effect , Strongly recommend ！！
SP2010 3D Tag cloud Web part -- Cool effect . Strongly recommend ! ! Project description narrative Based on simplicity Flash Of 3D Tag cloud Web parts .SP Server 2010 Use . Built in tag cloud Web parts ...
Linux Use IDEA To configure maven Of web Project skeleton archetype（ Templates ） Custom skeleton
explain : The skeleton of this article is archetype, It can also be understood as a template , Always refers to the basic configuration when you create a project . Preface : In the use of IDEA establish maven Of web Project time , Generally, the provided default is used directly web project , Pictured But creating ...
KUR-Couriers
Topic link : QwQ Solution: Take the weight as the subscript , Create a tree for each point about x spot , The trees rooted in it cover 1 To x The number of occurrences of each number in the interval Code: #include<bits/stdc++.h> ...
【linux kernel】 Interrupt handling - Break the top half 【 turn 】
from :http://www.cnblogs.com/embedded-tzp/p/4451354.html Welcome to reprint , Keep the author's information when reprinting , thank you . mailbox :[email protected] Blog Garden ...
MySQL8 New features CTE
[ blind BB] The last day of the National Day holiday , I thought I would go back to work tomorrow : The inner excitement cannot be expressed in ordinary words , It may be that the feelings of Chinese people have always been relatively introverted ( I can't carry this pot alone ) Or maybe we are more action oriented (Just Do IT). but ... ...
Reprint ：C/C++ About string.h Header files and string class
Study C Language , Functions that use strings, such as stpcpy().strcat().strcmp() etc. , To include header files string.h Study C++ after ,C++ Standard classes with strings string,string Classes also have many methods , use s ...
MarkDown Grammar practice notes
MarkDown Usage rule title Markdown Support the syntax of two titles , class Setext And the class atx form Setext form : In the form of a baseline Selext In the form of : 1. The highest level title (=)2. Second level title ( ...