6

以前に質問したことがあります：キャンバスオブジェクトのz-indexを制御するにはどうすればよいですか？そして、複雑な状況には適さないかもしれない解決策にたどり着きました。

キャンバスにはz-indexシステムがなく、単純な順序付きの描画システムがあることがわかりました。ここで、新しい質問があります。複雑な状況でこの問題を修正するために、z-indexシステムをどのようにシミュレートできますか？

良い答えは大きな問題を解決することができます。

4

2 に答える 2

9

キャンバスにz-indexがないわけではなく、キャンバスがHTMLページとは逆にオブジェクトを描画したままにしないということです。ピクセルマトリックスを描画するだけです。

描画モデルには基本的に2つのタイプがあります。

  • オブジェクトのもの（通常はベクター）：オブジェクトはエンジンによって保持および管理されます。それらは通常、削除または変更できます。彼らはz-indexを持っています
  • ビットマップのもの：オブジェクトはありません。ピクセルマトリックスを変更するだけです

Canvasモデルはビットマップモデルです。オブジェクトを他のオブジェクトの上に描画するには、の後にオブジェクトを描画する必要があります。これは、描くものを管理する必要があることを意味します。

キャンバスモデルは非常に高速ですが、オブジェクトを管理する描画システムが必要な場合は、代わりにSVGが必要になる可能性があります。

キャンバスを使用する場合は、描画したものをオブジェクトとして保持するのが最善です。これが私が今作った例です：私は正方形のリストを保持し、毎秒それらのzindexをランダム化してそれらを再描画します：

var c = document.getElementById('c').getContext('2d');
function Square(x, y, s, color) {
   this.x = x; this.y = y; this.s = s; this.color = color;
   this.zindex=0;
}
Square.prototype.draw = function(c) {
  c.fillStyle = this.color;
  c.fillRect(this.x, this.y, this.s, this.s);  
}
var squares = [
  new Square(10, 10, 50, 'blue'), new Square(40, 10, 40, 'red'), new Square(30, 50, 30, 'green'),
  new Square(60, 30, 40, '#111'), new Square(0, 30, 20, '#444'), new Square(70, 00, 40, '#999')
];

function draw() {
  c.fillStyle = "white";
  c.fillRect(0, 0, 1000, 500);
  for (var i=0; i<squares.length; i++) squares[i].draw(c);
}
setInterval(function(){
  // give all squares a random z-index
  squares.forEach(function(v){v.zindex=Math.random()});
  // sort the list accordingly to zindex
  squares.sort(function(a,b){return a.zindex-b.zindex});
  draw();
}, 1000);

デモンストレーション

正方形の配列はzindexに従ってソートされるという考え方です。これは、他のタイプのオブジェクトに簡単に拡張できます。

于 2013-01-11T07:03:59.350 に答える
1

dystroyが言ったように、z-indexは、最も単純な場合、キャンバス上に物を描画する順序を示すための単なるインデックスであり、適切にオーバーラップします。

これ以上のことを行う場合、たとえばブラウザの既存の動作を複製する場合は、さらに多くの作業を行う必要があります。ブラウザでオブジェクトが描画される順序は、以下によって駆動される複雑な計算です。

  1. DOMツリー
  2. 要素のposition属性
  3. 要素のz-index属性

これの標準的なソースは、CSS仕様の一部であるスタッキングコンテキストの詳細な説明です。

于 2013-01-11T07:13:32.513 に答える