Jump to content

How can I implement a color changing caret?


Recommended Posts

This is a strange title I know.  I will try to explain.


We have built a complete page layout/drawing/rich text editing application powered by PIXI.  Think of a web based Microsoft publisher.


Obviously within this we have the need to render a flashing caret/cursor when the user is editing text.


Currently this caret is a simple sprite with a tiny single color texture rather than PIXI.Graphics (so that it gets naturally antialiased when the textbox is rotated).  This sprite gets scaled vertically to match the size of a given font.  Right now the texture is simply black.  However we would like to make the caret color dependent on the color behind it.


e.g. If the caret is flashing over a dark area, that part of the caret becomes white, or is inverted.  When it is over a lighter area it becomes dark/black.


In PIXI's WebGL renderer only four blend modes are implemented so we cannot use these to achieve the desired effect.


My current thoughts are along the lines of writing a simple custom shader and applying it to the whole stage.  This shader would be fed the coordinates and size of the caret and then draw the caret based on each pixels lightness/darkness.  However this feels extremely overkill and would be quite difficult to get right when the caret/textbox is rotated etc.  There must be a simpler way. 


So the question is, what would be the best way to achieve this? 

Link to comment
Share on other sites

I'm afraid I'm not allowed to show you the app itself at the moment.  Not until it's released anyway.

I've literally just a had an idea.  When the user begins text editing we could blit the stage to a 2d canvas once.  Keep this in memory, then as the caret moves, continually sample the pixel data of the area behind the caret on the 2d canvas with getImageData().  This should still be fast as we would only be sampling a few pixels each time.  Then draw the caret itself pixel by pixel based on the inverse of the sampled pixel data.  Either in a custom fragment shader or by simply replacing the sprites texture each time the caret moves. (The shader would of course be faster)

This still feels a bit hacky.  But it should work.

If anyone has any better ideas, I would love to hear them.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...