5

シンプルな HTML キャンバスがあります

<div class='circle'>
  <canvas id="myCanvas" width="100" height="100">Your browser does not support the HTML5 canvas tag.</canvas>
</div>

スタイルのある

.circle {
  height: auto;
  width: auto;
}

とスクリプト

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fill();

$('.circle').draggable({
    helper: 'clone' // Remove this line to make it draggable
});

ドラッグしたときに円のコピーを元の位置に保持したいヘルパーオプションを使用できないようです。ドラッグ可能は、ヘルパー オプションを削除した場合にのみ機能します。これは、css を使用して円を描画した場合ではなく、キャンバスでのみ発生しました。フィドルはこちらです。ありがとう！

4

2 に答える 2

2

これは、複製はキャンバス要素のみを複製し、その内容を複製しないためです (キャンバスはこの点で特別な要素です)。キャンバスに印を付けることで、これの証拠を見ることができます。

元のキャンバスから複製されたインスタンスにコンテンツを再描画する必要があります。

/// you need to get these objects in advance, then:
clonedContext.drawImage(originalCanvas, 0, 0);
于 2013-09-26T22:34:53.647 に答える