2

マウスをドラッグして長方形を描画しようとしています。基本的にはこのチュートリアルに従ってください。

ただし、でキャンバスの寸法を指定すると、機能しないことがわかりましたpx。対照的に、このhtmlを使用すると、これは正常に機能します。

<!DOCTYPE html>
<html>

<head>
  <title>drag a rectangle</title>

  <style>
    #cvs {
      width: 500;
      height: 500;
      border: 1px solid #666;
    }
  </style>

  <script src="jquery-1.9.0.js"></script>
</head>

<body>
  <canvas id="cvs"></canvas>

  <script src="main.js"></script>
</body>

</html>

そしてこのjs：

$(document).ready(function() {
    var canvas = document.getElementById('cvs');
    var ctx = canvas.getContext('2d');
    var rect = {};
    var drag = false;

    var mouseDown = function(e) {
        rect.startX = e.pageX - this.offsetLeft;
        rect.startY = e.pageY - this.offsetTop;
        console.log(rect.startX + ' ' + rect.startY);
        drag = true;
    };

    var mouseUp = function(e) {
        drag = false;
    };

    var draw = function() {
        ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
    };

    var mouseMove = function(e) {
        if (drag) {
            rect.w = (e.pageX - this.offsetLeft) - rect.startX;
            rect.h = (e.pageY - this.offsetTop) - rect.startY;
            console.log(rect.w + ' ' + rect.h);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            draw();
        }
    };

    function init() {
        canvas.addEventListener('mousedown', mouseDown, false);
        canvas.addEventListener('mouseup', mouseUp, false);
        canvas.addEventListener('mousemove', mouseMove, false);
    }

    init();
});

正常に動作します。ただし、で寸法を指定するとpx、つまり、

#cvs {
  width: 500px;
  height: 500px;
  border: 1px solid #666;
}

マウスの位置と長方形が整列しなくなりました。また、ビューポートの寸法も異なります。基本的な質問だと思いますが、指定するかどうかの違いは何pxですか？そして、それは私のドラッグ長方形の動作にどのように影響しますか？

最新のChromeでローカルにテストされています。

4

1 に答える 1

2

キャンバスのサイズを設定するには、canvas要素の属性widthとを使用しますheight。

<canvas width="400" height="300">Not supported</canvas>

ページが読み込まれると、キャンバスのサイズはそのとに設定されwidthますheight。style.widthおよび/またはが設定されている場合style.height、キャンバスはこれらのスタイルで指定された寸法に合うように拡大縮小されます。

これが例です。

では、あなたの質問についてです。私が上で書いたように、あなたが設定style.widthしたとき、そして次のようにstyle.height：

#cvs {
  width: 500px;
  height: 500px;
  border: 1px solid #666;
}

幅と高さが適用され、キャンバスはそのサイズを拡大縮小するため、座標のあるポイントは(x, y)期待した場所に表示されません。たとえば、座標(500, 500)を使用してポイントを描画しようとすると、キャンバスの座標系の寸法がそれよりも小さいため、おそらくまったく表示されません。指定しない場合は、有効な幅と高さを指定しないpxだけで、スタイルが正しく適用されないため、キャンバスが拡大縮小されず、すべてが期待どおりに機能します。

于 2013-01-17T10:23:07.790 に答える