1

キャンバスにシームレスなパターンを作成したい。プロセス全体を単純な長方形に単純化しました。長方形をキャンバスの端に近づけて描いたときに、一部が切り取られた場合、その欠けた部分を反対側で繰り返してほしい。

描画する四角形が端に近すぎるかどうかを確認し、もう一度描画します + canvas.width/height. 途中で、これがかなりのif秒数になる可能性があることに気付きました。

これは私がすでに持っているものです：

これは私が持っているものです

これはエッジをチェックする部分です。

// this._draw(); is a convenience method that draws the rectangle with
// the center as its registration point instead of top left corner.
// which is also why I add (this.size/2) to the coordinates.
if(this.x+( this.size/2 ) > canvas.width) {
  this._draw(
    this.x+canvas.width,
    this.y
  );
}

if(this.x-( this.size/2 ) <  0){
  this._draw(
    this.x+canvas.width,
    this.y
  );
}

if(this.y+( this.size/2 ) > canvas.height) {
  this._draw(
    this.x-(this.size/2),
    this.y-canvas.height-(this.size/2)
  )
}

if(this.y-(this.size/2) < 0){
  this._draw(
    this.x,
    this.y+canvas.height
  );
}

これは私が欲しいものです

これは私が欲しいものです

これをより効率的にチェックする賢い方法はありますか? 私が現在目指しているものよりもエレガントなアプローチがあると確信しています。

例全体はcodepen.ioにあります。

4

1 に答える 1

1

このコードを見てください：

var canvas  = document.createElement('canvas');
var context = canvas.getContext('2d');

var LT = new Dot(0,     100,    290,            140);
var RT = new Dot(90,    75,     canvas.width,   0);
var RB = new Dot(180,   50,     canvas.width,   canvas.height);
var LB = new Dot(270,   25,     0,              canvas.height);

function Dot(color, size, x, y){
    this.size = size;
    this.x = x;
    this.y = y;
    this.color = "hsla("+color+", 100%, 50%, 1)";

    this.draw = function() {
        context.fillStyle = this.color;
        context.strokeStyle = "hsla(0,0%,0%, 0.5)";
        this._draw(x, y);
        this.drawBorders();
    };


    this._draw = function(centerX, centerY) {
        context.fillRect(
            centerX - size/2,
            centerY - size/2,
            size,
            size 
        );
    };

    this.drawBorders = function() {
        var borders = 0;

        var tx, ty;
        if(x - size/2 <= 0){
            tx = canvas.width + x;
        }else if(x + size/2 >= canvas.width){
            tx = canvas.width - x;
        }
        if(y - size/2 <= 0){
            ty = canvas.height + y;
        }else if(y + size/2 >= canvas.height){
            ty = y - canvas.height ;
        }

        if(x-size/2 <= 0 || x+size/2 >= canvas.width ){
            this._draw(tx, y);
        }
        if(y-size/2 <= 0 || y+size/2 >= canvas.height){
            this._draw(x, ty);
        }
        if(x+size/2 >= canvas.width ||
           y+size/2 >= canvas.height ||
           x-size/2 <= 0 ||
           y-size/2 <= 0){
            this._draw(tx, ty);
        }
    }
    this.draw();
}

document.body.appendChild(canvas);

これにより、正方形が角に重なるように描画されますが、実際に重なっている場合のみです。

于 2013-02-01T09:13:04.997 に答える