サイト内検索

drawFocusRing() メソッド

構文

shouldDraw = context . drawFocusRing(element, x, y, [ canDrawCustom ])

指定の要素がフォーカスされているなら、プラットフォームの慣例に従い、現在のパスの周りにフォーカス・リングを描きます。指定の座標は、特定の位置にユーザーの注意を引く必要があるなら（例えば、拡大ツールがテキスト・フィールドの編集キャレットを追っている場合など）、使われます。

canDrawCustom 引数が true の場合、ユーザーが自身のシステムで特定の方法でフォーカス・リングを表示する設定にしているなら、フォーカス・リングが描かれるだけとなります。（例えば、ハイ・コントラストのフォーカス・リング）

指定の要素にフォーカスが当たっており、canDrawCustom 引数が true で、かつ、ユーザーが特定の方法でフォーカス・リングを表示するよう設定していなければ、true を返します。そうでなければ false を返します。

このメソッドが true を返すとき、ウェブ制作者は、フォーカス・リングを手動で描くことが期待されます。

仕様

canvas がインタラクティブなとき、ウェブ制作者は、その canvas 要素のフォールバック・コンテンツの中に、その canvas でフォーカスできる部分それぞれに対応するフォーカス可能な要素を入れるべきです。

canvas のどの部分がその時点でフォーカスされているのかを示すために、ウェブ制作者は drawFocusRing() メソッドを使って、リングが表示される部分に対応する要素を引数として渡すべきです。このメソッドは、その要素がフォーカスされているなら、フォーカス・リングを表示するだけです。そのため、その要素を描く都度、このメソッドを呼び出しさえすれば良いのです。その要素が最初にフォーカスされているのかそうでないのかをチェックする必要もありません。x と y 引数に、コントロールの中心位置、または、コントロールが編集キャレットを持つなら、そのキャレットの位置を与えるべきです。

drawFocusRing(element, x, y, [canDrawCustom]) メソッドは、呼び出されたら、次の手順を実行しなければいけません：

  1. element がフォーカスされていない、または、このメソッドが関連付けられているコンテキストの要素の子孫でなければ、false を返して、これらの手順を中止します。

  2. 現在の変形マトリックスに従って、指定の座標 (x, y) を変換します。

  3. オプションで、canvas 上の指定座標（変換後）にフォーカスが当たっていることをユーザーに通知します。（例えば、ユーザーの拡大ツールを動かすなどして関与することができます。）

  4. ユーザーが特定のフォーカス・リングの利用を要求しているなら（例：ハイ・コントラストのフォーカス・リング）、または、canDrawCustom 引数が false または指定がなかったなら、プラットフォームの慣例に従って、パスに沿って適切なスタイルのフォーカス・リングを描き、false を返します。そして、これらの手順を中止します。

    フォーカス・リングは、シャドー効果、グローバル・アルファ、グローバル・コンポジション・オペレータの影響を受けるべきではありません。しかし、クリッピング領域の影響は受けるべきです。

  5. true を返します。

canvas 要素には、いくつかのチェックボックスがあります：

<canvas height=400 width=750>
 <label><input type=checkbox id=showA> Show As</label>
 <label><input type=checkbox id=showB> Show Bs</label>
 <!-- ... -->
</canvas>
<script>
 function drawCheckbox(context, element, x, y) {
   context.save();
   context.font = '10px sans-serif';
   context.textAlign = 'left';
   context.textBaseline = 'middle';
   var metrics = context.measureText(element.labels[0].textContent);
   context.beginPath();
   context.strokeStyle = 'black';
   context.rect(x-5, y-5, 10, 10);
   context.stroke();
   if (element.checked) {
     context.fillStyle = 'black';
     context.fill();
   }
   context.fillText(element.labels[0].textContent, x+5, y);
   context.beginPath();
   context.rect(x-7, y-7, 12 + metrics.width+2, 14);
   if (context.drawFocusRing(element, x, y, true)) {
     context.strokeStyle = 'silver';
     context.stroke();
   }
   context.restore();
 }
 function drawBase() { /* ... */ }
 function drawAs() { /* ... */ }
 function drawBs() { /* ... */ }
 function redraw() {
   var canvas = document.getElementsByTagName('canvas')[0];
   var context = canvas.getContext('2d');
   context.clearRect(0, 0, canvas.width, canvas.height);
   drawCheckbox(context, document.getElementById('showA'), 20, 40);
   drawCheckbox(context, document.getElementById('showB'), 20, 60);
   drawBase();
   if (document.getElementById('showA').checked)
     drawAs();
   if (document.getElementById('showB').checked)
     drawBs();
 }
 function processClick(event) {
   var canvas = document.getElementsByTagName('canvas')[0];
   var context = canvas.getContext('2d');
   var x = event.clientX - canvas.offsetLeft;
   var y = event.clientY - canvas.offsetTop;
   drawCheckbox(context, document.getElementById('showA'), 20, 40);
   if (context.isPointInPath(x, y))
     document.getElementById('showA').checked = !(document.getElementById('showA').checked);
   drawCheckbox(context, document.getElementById('showB'), 20, 60);
   if (context.isPointInPath(x, y))
     document.getElementById('showB').checked = !(document.getElementById('showB').checked);
   redraw();
 }
 document.getElementsByTagName('canvas')[0].addEventListener('focus', redraw, true);
 document.getElementsByTagName('canvas')[0].addEventListener('blur', redraw, true);
 document.getElementsByTagName('canvas')[0].addEventListener('change', redraw, true);
 document.getElementsByTagName('canvas')[0].addEventListener('click', processClick, false);
 redraw();
</script>

原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#focus-management

サンプル

準備中

ブラウザ対応状況

Firefox Safari Chrome Opera IE ExplorerCanvas
2 × 2 × 1 × 9.2 × 9 × 0002 ×
3 × 3 × 2 × 9.5 ×   3 ×
3.5 × 4 × 3 × 10 ×    
3.6 × 5 × 6 × 10.60 ×