0

Canvas 要素を使用して、ある要素から別の要素に線を引きます 別の要素はドラッグ可能で、要素をドラッグすると、線はドラッグ可能な要素に従います。

私の問題は、レンダリングが遅いことです (Mac PowerBook では Fx 3.5)。以前に Canvas ではるかに優れたパフォーマンスを見たことがあると思います。

キャンバスの経験があり、パフォーマンスのヒントを教えてくれる人はいますか?

前もって感謝します

次のメソッドは、ドラッグ イベントで呼び出されます。

// Runs when the element is dragged.
function onDrag(key)
{
  var ctx = canvas.context;
  var fromRect = $('#box-' + key).offset();
  var fromHeight = $('#box-' + key).height();
  var fromWidth = $('#box-' + key).height();

  var toRect = $('#draggable').offset();
  var toWidth = $('#draggable').width();

  var startX = toRect.left + toWidth / 2;
  var startY = toRect.top + 4;
  var endX = fromRect.left + fromWidth / 2;
  var endY = fromRect.top + fromHeight / 2;

  ctx.clearRect(0, 0, 5000, 5000);
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.strokeStyle = "rgba(0, 0, 0,1)";
  ctx.stroke();

}

ヒントをありがとう、

よろしくエリック

4

5 に答える 5

2

jQuery関数の呼び出しは描画よりも時間がかかることは間違いありません。アプリケーションでjQueryを使用せずにオフセットとディメンションを簡単に計算できる場合は、そこで追加の速度を抽出できる可能性があります。

于 2009-08-10T18:39:07.293 に答える
2

可能であれば、jQuery の選択をキャッシュします。

var onDrag = (function(){

    var draggable = $('#draggable'),
        ctx = canvas.context; // btw, don't you mean canvas.getContext('2d')?

    return function(key) {

        var box = $('#box-' + key),
            fromRect = box.offset(),
            fromHeight = box.height(),
            fromWidth = box.height(),
            toRect = draggable.offset(),
            toWidth = draggable.width(),
            startX = toRect.left + toWidth / 2,
            startY = toRect.top + 4,
            endX = fromRect.left + fromWidth / 2,
            endY = fromRect.top + fromHeight / 2;

        ctx.clearRect(0, 0, 5000, 5000);
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(endX, endY);
        ctx.strokeStyle = "rgba(0, 0, 0,1)";
        ctx.stroke();

    };

})();

一般的なルール: 立て続けに複数回実行される関数がある場合は、関数の呼び出しごとに絶対に実行する必要があることだけを実行するようにしてください。

于 2009-08-10T19:23:26.953 に答える
1

ID で要素を特定し、その寸法を読み取ることがボトルネックである場合は、関数のメモ化を試すことができます。

function onDrag(key) {
    var cached = onDrag.cache[key];

    if (!cached) {
        cached = {
            fromRect = $('#box-' + key).offset();
            // etc.
        };

        onDrag.cache[key] = cached;
    }

    var toRect = $('#draggable').offset();
    // etc.
}

onDrag.cache = {};

これにより、パフォーマンスが向上する場合があります。

clearRect()また、大きな違いがあるかどうかを確認するためにを取り出してみてもらえますか? 5000 x 5000 = 2500 万ピクセルをペイントする代わりに、前のドラッグの位置を保存し、前の行をたどって消去したい場合があります。キャンバスの実装に基づいて、25M ピクセルの塗りつぶしが問題になる場合とそうでない場合があるためです。

于 2009-08-10T19:31:33.067 に答える
0

最後にclosePath（）を使うべきだと思います

于 2009-08-12T12:07:59.587 に答える
0

特にこのような大きなサーフェスでは、これは非常に遅くなる可能性があります。代わりに、必要なものだけをクリアしてみてください。

ctx.clearRect(0, 0, 5000, 5000);

于 2010-11-23T21:58:36.007 に答える