1

XML ファイルに座標がほとんどありません。それらは線、円、円弧です。それらをデータ構造で読み取ってから、キャンバスにプロットしようとしています。私が理解しようとしているのは、キャンバスをサブキャンバスに分割する方法です。たとえば、私のキャンバスが

    <canvas id="myCanvas" width="800" height="600" role="img">
        Your browser does not support the canvas element.
    </canvas>

私が達成しようとしているのは、キャンバス上のx1 = 200pxとy1 = 250から始まる幅と高さ200pxの架空のウィンドウを作成する方法です。そして、その箱にしか持っていないイメージを描きます。

仮想のボックスに基づいて画像を縮小することはできましたが、その仮想のボックスにのみ描画する方法の概念を回避できません。ポイントはランダムに配布されます。

4

1 に答える 1

5

これを実現する方法は他にもありますが、このコンテキストでおそらく最も役立つのは、変換とクリップ マスクを使用する方法です。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

/// for simplicity, save current settings
ctx.save();

/// move coordinate system to the upper left corner of isolated region
ctx.translate(offsetX, offsetY);

/// create a clipping mask by using a simple rectangle
ctx.beginPath();
ctx.rect(0, 0, width, height);

/// define the last path (rectangle) as clipping mask
ctx.clip();

/// ... draw other things into this region from offset 0...

ctx.restore(); /// done and back to full canvas

座標系全体を領域の左上隅に移動することにより、新しい孤立した領域に対するオフセットを使用できます。クリップ マスクを追加すると、領域外に描画されたものはすべてクリップされます。

これは、リージョンごとに 1 つずつ行う必要があります。

もう 1 つの方法は、すべての描画ポイントにオフセットを追加することです。例えば：

ctx.lineTo(x + offsetX, y + offsetY);

はoffsetX/Y領域の左上隅です。

ただし、クリッピングが必要な場合はさらに複雑になります。画像では宛先領域を定義できるため、大きな問題ではありませんが、線やその他のパス操作では、補間などを使用して自分でクリッピングする必要があります。

これを示すライブデモは次のとおりです:
Fiddle (更新されたリンク)

  • デモでは、キャンバスとコンテキストを設定し、全体を赤色で塗りつぶします。
  • 次に、クリッピングとマスクを設定して翻訳します。
  • これで「仮想キャンバス」ができ、他のグラフィックはそのままです
  • 同じ塗りつぶし操作で領域を塗りつぶしますが、青で塗りつぶします。サイズが実際の領域外であっても、この領域のみが塗りつぶされていることがわかります
  • 次に、クリップを取り外し、フル モードに戻ったことを示す証拠として線を引きます。
于 2013-07-24T16:05:04.523 に答える