CanvasRenderingContext2D

canvas要素を適当に生やしてこれすると取れるよ！

code:sample.js

const canvas = document.createElement('canvas');

const context = canvas.getContext('2d');

文字を計測するのはこんな感じ

お好みでフォントを指定して

code:sample.js

context.font = '16px monospace';

計測

code:sample.js

console.log(context.measureText('ほげ').width);

繰り返し計測すれば、カーソルの位置を取得できるかな？takker.icon

e.g.

code:sample2.js

const text = 'ほげほげふがふが';

const cursor = {top:0, left: 72};

const canvas = document.createElement('canvas');

const context = canvas.getContext('2d');

context.font = '16px monospace';

const position = text.split('')

.find((_, i) => context.measureText(text.slice(0, i + 1)).width >= cursor.left)?.length

console.log(position);

実際に既存のテキストエディタの中で使われているのを見て知りましたkuuote.icon

CodeMirrorというやつ

自分だったらslice作ったりはしないだろうなーと思いながら見てるkuuote.icon

見付かったら探索を打ち切りたい

打ち切ってみた

まあ即興で書いたコードなのでtakker.icon

最初は2分探索を使おうかと思いましたが、コード書くのがめんどくさかったので、愚直に最初から探索するアルゴリズムにしました

あ、/takker/scrapbox-positionも2分探索使えばもっと速くなるのか。気づかなかったtakker.icon