1

HTMLにおいてCSSまたはJavaScriptを利用しテキスト(テキストを含む要素ではなく、テキスト、文字それ自体)にマウスカーソルが乗っているかを判定し効果をつける方法はありますか。
CSSなら

<style>
#box:hover { /* css */ }
</style>

<div id="box">てきすと</div>

というのではなくて、たとえば疑似コードを書くなら

<style>
#box:textShape:hover { /* css */ }
</style>

みたいなことです。
SVGのを利用した方法については確認済みですので、タイトルの通りCSSあるいはJavaScriptで可能かどうかを教えていただきたく、また可能であれば参考になるページなどを示していただければ幸いです。
よろしくおねがいします。

3
  • Rangeオブジェクトで調べる例が別の質問に挙がってますね: ja.stackoverflow.com/q/21983/8000
    – unarist
    Commented 2016年4月16日 15:03
  • 「テキスト、文字それ自体」といいますと、字形(フォント)の描画部分、まさに線の上、を判定したいという事でしょうか。それとも文字を囲む領域(これならばunaristさんのコメントにあるQ&Aで出来そうですね)なのでしょうか。
    – mjy
    Commented 2016年4月16日 17:12
  • コメントありがとうございます。そちらの手法をとりあえず試してみました(jsfiddle.net/odoL8eLu)が、これは文字列を包括するエリアを矩形で取得できるだけのようでしたので、私の目的とは異なるようです。mjy様のおっしゃっている「字形(フォント)の描画部分、まさに線の上、を判定したい」という質問です。わかりづらくて恐縮です。
    – user15182
    Commented 2016年4月18日 10:38

2 件の回答 2

1

mjy様の回答はとても参考になりました。canvasを使える環境であれば、示していただいた手法が解決法の一つとなるでしょう。また、このことを参考に自分でも調査をしてみると、https://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of-pixel-under-mouse-cursor というQAを発見し、こちらにもやはりcanvasを利用した回答、そして

It's not possible with JavaScript as it goes against cross-domain security.

というようにjsではここまでが限界のようです。また、

通常のHTML要素で描画されている字形に対して、判定を行ないたい

のです。おっしゃるとおりです。

さて私は以前html2canvasというライブラリを使用したことがありまして、これはDOMを読んで独自にレンダリングしcanvas要素にスクリーンショットのようなものを生成してくれるライブラリです。画像の読み込みやiframe,flashなどへのサポートは技術的な制約もあり不完全ですが、テキスト目的という今回の趣旨については十分でしょう。
判定処理の発想はそのままですが、このスクリーンショットの画像を利用したサンプルを作ってみました。

var target = document.querySelector('#box');
var ssCtx;

html2canvas(target, {
  onrendered: function(canvas) {
    ssCtx = canvas.getContext('2d');
  }
});

target.addEventListener('mousemove', function (e) {
  if (ssCtx) {
    var pixel = ssCtx.getImageData(e.offsetX, e.offsetY, 1, 1);
    target.className = pixel.data[3] ? 'text_shape_hover' : '';
  }
});
#box {
  font-size: 200px;
  font-weight: bold;
  transition: color 0.3s;
}
#box.text_shape_hover {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="box">てきすと</div>

結果は良好です。細部について(背景色/scroll/動作負荷/各環境のサポート)については未検証ですが、少なくともテキスト要素について利用するならば、canvasをサポートしてさえいればうまく動作するよう実装できるはずです。

結局canvasで力技かよ、と自分でも思いますが、以上で一応の自己解決として回答を載せておきたいと思います。

0

下のスニペットはcanvas要素を使った例です。
しかし、おそらく質問者さんは通常のHTML要素で描画されている字形に対して、判定を行ないたいのだと思います。
それもcanvasを使った方法の応用で出来るかもしれませんが、少し考えてみないと分かりません。

function text_shape(elm){
	"use strict";
	var ctx = elm.getContext("2d");

	function set_size(){
		var rect = elm.getBoundingClientRect();
		elm.width = rect.width;
		elm.height = rect.height;
	}

	function draw_text(){
		var style = getComputedStyle(elm);
		ctx.font = style.fontSize + " " + style.fontFamily;
		ctx.fillStyle = style.color;
		ctx.textAlign = "left";
		ctx.textBaseline = "top";
		ctx.fillText(elm.textContent, 0, 0);
	}

	function check_hover(ev){
		var alpha = ctx.getImageData(ev.offsetX, ev.offsetY, 1, 1).data[3];
		if(alpha){
			elm.classList.add("text_shape_hover");
			return;
		}
		hover_out();
	}

	function hover_out(){
		elm.classList.remove("text_shape_hover");
	}

	function init(){
		set_size();
		draw_text();
	}

	elm.addEventListener("mousemove", check_hover);
	elm.addEventListener("mouseout", hover_out);
	window.addEventListener("resize", init);

	init();
}

text_shape(document.getElementById("text"));
#text{
	font-size: 2em;
	font-family: serif;
	color: blue;
	width: 100%;
	height: 1em;
}
.text_shape_hover{
	-webkit-filter: hue-rotate(100deg);
	filter: hue-rotate(100deg);
}
<canvas id="text">○● Text 文字</canvas>

上記スニペットでcanvas要素に描画しているのは文字だけです。
ポインタ座標の透明度(アルファ値)を取得し、透明でなければ、そこは字形の上だと分かります。
マウスが動く度に下記のようにこれを判定し、字形の上に来たらtext_shape_hoverというクラスを設定しています。

var alpha = ctx.getImageData(ev.offsetX, ev.offsetY, 1, 1).data[3];
        if(alpha){
            elm.classList.add("text_shape_hover");

text_shape_hoveクラスには下記のようにスタイルを当てています。
canvas要素のcolorを変えても仕方ないので、フィルタを掛けて色を変えています。

.text_shape_hover{
    -webkit-filter: hue-rotate(100deg);
    filter: hue-rotate(100deg);
}

この質問に回答するには、ログインする必要があります。