3

キャンバスが左上隅から始まらないまで、タッチイベントに取り組んでおり、いくつかのコードがうまく機能しています。その前に何かを追加するとすぐに、報告されたイベントはキャンバスの位置によってオフセットされます。

タッチがあった場所の周りに円を描くことでこれを決定します。円は常に、画面の左上隅からのキャンバスのオフセットによってオフセットされます。

オン タッチ スタートのイベントを見ると、利用可能な pageY があることがわかります (Chrome 内で USB デバッグを使用)。しかし、私がそれをグーグルで検索すると、それは標準の一部ではないようであり、減価償却されている可能性があるといういくつかの競合があるようです (ただし、いずれかの方法を見つけることはできません)。

だから私の質問は、これに対処するための最良のクロスブラウザ方法は何ですか（主な懸念事項はサファリとクロムです。つまり、Webkit、firefoxは持っていると便利です）？

問題のJSFiddleを作成したマウス イベントでも同じ問題が発生します。ただし、マウス イベントとタッチ イベントで同じ属性を使用できるかどうかはわかりません。

オフセットをハードコーディングして問題を解決できることは承知していますが、HTML固有のハードワイヤードコードを必要とせずに手元の情報を使用するソリューションを探しています。

JSFiddle を再作成するための HTML、CSS、および Javascript は次のとおりです。

<div class="title"></div>
<div class="container">
  <canvas id="myCanvas"></canvas>
</div>

CSS:

body {
  background-color: #ff0000;
  margin: 0px;
}

canvas {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background-color:#000;
}

.title {
  position:absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 40px;
  background-color: #888;
}

.container {
  width:auto;
  text-align:center;
  background-color:#777;
  width:100%;
  position:absolute;
  top:40px;
  left:0px;
  bottom:0px;
}

Javascript:

var onMouseDown = function(e) {
    draw(document.getElementById('myCanvas').getContext('2d'), e.clientX, e.clientY);
}

$(function () {
    document.getElementById('myCanvas').addEventListener('mousedown', onMouseDown, false);
});


function draw(ctx, x, y) {
ctx.canvas.width = ctx.canvas.offsetWidth; 
ctx.canvas.height = ctx.canvas.offsetHeight;      

  var radius = 50;
  var lineWidth = 15;
  var r = 255;
  var g = 75;
  var b = 75;
  var a75 = 0.05;

  var adj = Math.abs(lineWidth / 2);

  rad = radius + adj;

  var stop1 = (rad - lineWidth) / rad;
  var stop2 = 0;
  var stop3 = stop1 + (1 - stop1) / 2;
  var stop4 = 0;
  var stop5 = 1;

  stop2 = stop3 - (stop3 - stop1) / 2;
  stop4 = stop3 + (stop5 - stop3) / 2;

  var radgrad = ctx.createRadialGradient(x, y, 0, x, y, rad);

  radgrad.addColorStop(stop1, 'rgba(' + r + ',' + g + ',' + b + ', 0)');
  radgrad.addColorStop(stop2, 'rgba(' + r + ',' + g + ',' + b + ', .4)');
  radgrad.addColorStop(stop3, 'rgba(' + r + ',' + g + ',' + b + ', 1)');
  radgrad.addColorStop(stop4, 'rgba(' + r + ',' + g + ',' + b + ', .4)');
  radgrad.addColorStop(stop5, 'rgba(' + r + ',' + g + ',' + b + ', 0)');

  ctx.fillStyle = radgrad;
  ctx.arc(x, y, rad, 0, 2 * Math.PI, true);
  ctx.fill();
}
4

2 に答える 2

4

これは機能するはずです：http：//jsfiddle.net/DG4fb/3/

キャンバスの上下はそうではないclientX == 0; clientY == 0;ので、オフセットを計算する必要があります。キャンバスの左上隅はどこですか？それは、そのoffsetLeftとoffsetTopプラスのそのoffsetParent値とそのoffsetParent.offsetParentの値であり、そしてそれ以降です。それがrecursiveOffsetLeftAndTop関数が処理するものです。

于 2013-01-19T07:53:27.020 に答える