5

キャンバスにオブジェクトを描画すると、新しいオブジェクトが古いオブジェクトの下に配置されることがあります。たとえば、キャンバスにいくつかの画像を追加してから線を引きます。コード画像を実行すると、最上位になります。解決策をウェブで検索しました。しかし、簡単な解決策はありませんでした。:( 場合によっては、バグとして見られます! エクスプローラーではどうすれば z-index を制御できますか?

編集：これは私のコードです

<img id="black_checkers_piece" src="egsdk/BlackCheckersPiece.png" style="display: none;">
<canvas id="c1" style="border:1px solid #998800"></canvas>
<script type="text/javascript">
var canvasID = document.getElementById('c1');
var ctx = canvasID.getContext('2d');
var img = new Image();
img.src = document.getElementById('black_checkers_piece').src;
img.onload = function(){
ctx.drawImage(img, 10, 10, 32, 32);
}
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.moveTo(0, 0);
ctx.lineTo(50, 50);
ctx.stroke();
</script>
4

3 に答える 3

9

ほとんどの場合、画像を描画する前に画像が読み込まれるのを待っています。

さらに、おそらくできるだけ早く線を引いています。

すべての画像が読み込まれるのを待ってから、必要な順序ですべてを描画する必要があります (最も遠い z オーダーから最も近いものへ)。すべての画像が読み込まれるまで何も描画しないでください。Z オーダーが正しくなくなります。

すべての画像が読み込まれる前に画面に項目を表示したい場合は、その 1 つの画像を描画するだけでなく、画像を読み込むたびにすべてを再描画する必要があります。

円、画像、ウィンドウの 3 つのオブジェクトを描画する例を次に示します。画像がロードされているかどうかに関係なく、すぐにそれらを描画しますが、画像が他の 2 つのオブジェクトの間に正しく収まるように、画像がロードされたらすべてを再度描画します。

http://jsfiddle.net/U5bXf/32/

関連する簡略コード (jsfiddle がダウンした場合) は次のとおりです。

var img = new Image()
img.onload = function() {
  draw()
};
img.src = "http://placekitten.com/100/140";

draw();

function draw() {
// object one

// Now we'll draw the image in between, if its loaded
ctx.drawImage(img, 100, 30);

// object two
}

この行の下のコードは、コメントへの応答です

onloadその後、コードを投稿しましたが、関数で描画しているのは画像だけであることに気付くでしょう。

onload 関数は、通常、他の描画コマンドの後に発生します (ページが既に読み込まれていない限り、いずれかである可能性があります)。すべての描画コードを onload 関数に移動するか、すべてをロードする独自の描画関数を作成する必要があります。例えば：

<img id="black_checkers_piece" src="egsdk/BlackCheckersPiece.png" style="display: none;">
<canvas id="c1" style="border:1px solid #998800"></canvas>
<script type="text/javascript">
var canvasID = document.getElementById('c1');
var ctx = canvasID.getContext('2d');
var img = new Image();
img.src = document.getElementById('black_checkers_piece').src;
img.onload = function(){
  // assuming we want the image drawn before the line:
  ctx.drawImage(img, 10, 10, 32, 32);

  ctx.beginPath();
  ctx.strokeStyle = 'red';
  ctx.moveTo(0, 0);
  ctx.lineTo(50, 50);
  ctx.stroke();
}

于 2013-01-10T16:35:53.657 に答える
1

Canvas には「z-index」の概念がありません。キャンバスにはオブジェクトはありません。キャンバスは単なるビットマップであり、ピクセルです。

新しい要素 (img 要素など) を作成するだけでなく、キャンバス上に線と画像を描いていると確信していますか?

その場合は、fill() や stroke() などの描画メソッドを呼び出す順序を確認してください。それを行うまで、シェイプは実際には描画されません (moveTo および lineTo 呼び出しがどこにあっても)。

于 2013-01-10T07:02:45.837 に答える
1

私は fabric.js を使用しており、便利な機能がいくつかあります。それ自体は z-index ではありませんが、背景またはオーバーレイを設定できます。以下はhttp://fabricjs.com/customization/にある例です。

var canvas = 新しい fabric.Canvas('c13'); canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(キャンバス)); this.__canvases.push(キャンバス);

于 2014-07-21T16:29:08.130 に答える