4

重なり合う形状の配列を作成しようとしています。しかし、これらの形状が互いに重なり合うのを防ぐのに苦労しています。

それが理にかなっているなら、それらを噛み合わせたいと思いますか？

コードは次のとおりです。

var overlap_canvas = document.getElementById("overlap");
var overlap_context = overlap_canvas.getContext("2d");
var x = 200;
var y = x;
var rectQTY = 4 // Number of rectangles

overlap_context.translate(x,y);

for (j=0;j<rectQTY;j++){    // Repeat for the number of rectangles

// Draw a rectangle
overlap_context.beginPath();
overlap_context.rect(-90, -100, 180, 80);
overlap_context.fillStyle = 'yellow';
overlap_context.fill();
overlap_context.lineWidth = 7;
overlap_context.strokeStyle = 'blue';
overlap_context.stroke();

// Degrees to rotate for next position
overlap_context.rotate((Math.PI/180)*360/rectQTY);
}

そして、ここに私のjsFiddleがあります： http://jsfiddle.net/Q8yjP/

そして、これが私が達成しようとしていることです：

http://postimg.org/image/iio47kny3/

ヘルプやガイダンスをいただければ幸いです。

4

4 に答える 4

1

残念ながら、canvas を使用して要素の一部に z-index を設定する機能は現在利用できません。4 つの長方形オブジェクトに必要なだけの場合は、長方形の一部を非表示にして目的の効果を偽装することができますが、これは 4 つの長方形のみにハード コードされています。

var overlap_canvas = document.getElementById("overlap");
var overlap_context = overlap_canvas.getContext("2d");
var x = 200;
var y = x;
var rectQTY = 4 // Number of rectangles

overlap_context.translate(x, y);

for (j = 0; j < rectQTY; j++) { // Repeat for the number of rectangles
    // Draw a rectangle
    overlap_context.beginPath();
    overlap_context.rect(-90, -100, 180, 80);
    overlap_context.fillStyle = 'yellow';
    overlap_context.fill();
    overlap_context.lineWidth = 7;
    overlap_context.strokeStyle = 'blue';
    overlap_context.stroke();
    if (j === 3) {
        overlap_context.beginPath();
        overlap_context.rect(24, -86, 72, 80);
        overlap_context.fillStyle = 'yellow';
        overlap_context.fill();
        overlap_context.closePath();

        overlap_context.beginPath();
        overlap_context.moveTo(20, -89.5);
        overlap_context.lineTo(100, -89.5);
        overlap_context.stroke();
        overlap_context.closePath();

        overlap_context.beginPath();
        overlap_context.moveTo(20.5, -93.1);
        overlap_context.lineTo(20.5, 23);
        overlap_context.stroke();
        overlap_context.closePath();
    }

    // Degrees to rotate for next position
    overlap_context.rotate((Math.PI / 180) * 360 / rectQTY);
}

デモはこちら

動的にする必要がある場合は、Dark Duck が提案したような形状を切り取るか、オブジェクトが重なったことを検出して四角形ごとに 1 回再描画する関数を作成しようとすることができます (実行するのが難しく、仕事）。おそらく、回転角度に応じて常に機能するように要素をハードコーディングする方法に関連して、要素を配置するための方程式を考え出すことができます.まさに

全体として、現時点では探していることを実際に行うことはできません

于 2013-08-22T21:04:55.593 に答える