5

キャンバスを左から右に横切る線を作ろうとしています。私はまだそれを達成するための初期段階にあり、それを行うには、次の関数を使用して段階的なアニメーションを実行します

timer = window.setInterval(draw_line, 30);

私の描画機能はこのようなものです

function draw_line()
    {
        context.fillStyle = "#000";
        context.fillRect(0, 0, canv.width, canv.height);

            context.beginPath();
        context.lineWidth = 2;
        context.strokeStyle = '#fff';

            //Where p1, p2, cp1, cp2 are point objects that has x & y values already defined    
        context.moveTo(p1.x, p1.y);
        context.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y);
        context.stroke();
        context.closePath();

            // now i have to move p1, p2 ,cp1,cp2
            // now here is my problem
    }

移動する必要があることは理解していますが p1.x+= a random number;、cp1 と cp2 についても同じですが、p2についてはどうですか。エンドポイントは同じトラックをたどる必要があります。どうすればそれを達成できますか?

ありがとうございました

4

1 に答える 1

4

編集された回答

あなたの明確化により、私は今これに適切に答えることができると思います.

開始点がキャンバスを通過した経路に終点をたどらせるには、履歴値を保存する必要があります。このhttp://jsfiddle.net/mobidevelop/bGgHQ/の例では、マウスの動きを使用して最後の 16 ポジションのバッファーを埋め、それを使用して、RingBuffer を反復処理することにより、ポイントを通るベジェ曲線を形成します。

function RingBuffer(length) {
    this.length = length;
    this.pointer = 0;
    this.buffer = [];
}
RingBuffer.prototype.get = function(index) {
    if (index < 0) {
        index += this.length;        
    }
    return this.buffer[index];
}
RingBuffer.prototype.push = function(value) {
    this.buffer[this.pointer] = value;
    this.pointer = (this.length + this.pointer +1) % this.length;    
}

var c = document.getElementById("myCanvas");
var context =c.getContext("2d");

timer = window.setInterval(draw_line, 30);
function Point(x,y) {
    this.x = x;
    this.y = y;
}
Point.prototype.translateX = function(x) {
    return this.x += x;
};
Point.prototype.translateY = function(y) {
    return this.y += y;
};

function draw_line()
{
    context.fillStyle = "#000";
    context.fillRect(0, 0, c.width, c.height);

    var pointer = history.pointer;
    context.beginPath();
    context.lineWidth = 2;
    context.strokeStyle = '#F00';     
    for (iteration = 0, count = 15; iteration < count; iteration += 3) {
        var p1 = history.get(--pointer);
        var p2 = history.get(--pointer);
        var p3 = history.get(--pointer);
        var p4 = history.get(--pointer);        

        if (p1 && p2 && p3 && p4) {

            context.moveTo(p1.x, p1.y);
            context.bezierCurveTo(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);

        }
        pointer++;
    }
    context.stroke();
    context.closePath();    

}

var history = new RingBuffer(16);
var lastGrab = new Date();
c.addEventListener('mousemove', function() {
    now = new Date();
    if (now - lastGrab > 15) {
        history.push(new Point(event.clientX - c.offsetLeft, event.clientY - c.offsetTop)); 
        lastGrab = now;
    }    
});​

歴史的な目的のために、以前の回答を以下に残しました。

あなたが達成しようとしていることを完全に理解しているかどうかはわかりませんが、すべてのポイントを同じ値で翻訳するだけでよいと思います。これにより、キャンバスを横切る線が同じ形状を維持します。このようなもの：

JSFiddle

var c = document.getElementById("myCanvas");
var context =c.getContext("2d");

timer = window.setInterval(draw_line, 30);
function Point(x,y) {
    this.x = x;
    this.y = y;
}
Point.prototype.translateX = function(x) {
    return this.x += x;
};
Point.prototype.translateY = function(y) {
    return this.y += y;
};

var p1 = new Point(0,0);
var p2 = new Point(100,100);
var cp1 = new Point(15,45);
var cp2 = new Point(85,45);

function draw_line()
{
    context.fillStyle = "#000";
    context.fillRect(0, 0, c.width, c.height);

    context.beginPath();
    context.lineWidth = 2;
    context.strokeStyle = '#fff';

        //Where p1, p2, cp1, cp2 are point objects that has x & y values already defined    
    context.moveTo(p1.x, p1.y);
    context.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y);
    context.stroke();
    context.closePath();

    p1.translateX(1);
    p2.translateX(1);
    cp1.translateX(1);
    cp2.translateX(1);

    if (p1.x > 300) {
        p1.translateX(-400);
        p2.translateX(-400);
        cp1.translateX(-400);
        cp2.translateX(-400);        
    }
}

私が目標を誤解していない限り...

于 2012-08-03T15:38:37.527 に答える