javascript - kineticjsでベジエ曲線に動きを追加する方法は?

Question

私はキネティックなしでこれを行いました.このコードは、私が望んでいたようにうまく機能しています. --kineticjs なしのフィドル。見てみる

今度は、同じコードを kineticjs で実行したいと思います。これが私が今まで行ってきたことです- kineticjs をいじります。

行がまったく動かない?どこが間違っている?私は一日中過ごしましたが、問題を理解できませんでした.

これは、kineticjs を含めるオプションがないため、kinetic.results を使用した私の JavaScript です。コードをそこに配置しましたが、どんな助けも大歓迎です。

var stage=new Kinetic.Stage({
    container:'container',
    width:500,
    height:500
});

var layer=new Kinetic.Layer();

var bg=new Kinetic.Rect({
    x:0,
    y:0,
    width:stage.getWidth(),
    height:stage.getHeight(),
    fill: 'antiquewhite'
});
layer.add(bg);

var drawHair = function(canvas) {
    var context = canvas.getContext();
    context.beginPath();
    context.moveTo(this.attrs.sx, this.attrs.sy);
    context.bezierCurveTo(this.attrs.cp1x, this.attrs.cp1y, this.attrs.cp2x, this.attrs.cp2y, this.attrs.endx, this.attrs.endy);
    context.closePath();
    canvas.fillStroke(this);
};

function Hair(a, b, c, d, e, f, g, h) {
    return new Kinetic.Shape({
        drawFunc: drawHair,
        fill: '#000',
        lineJoin: 'round',
        stroke: 'grey',
        strokeWidth: 8,
        sx: 136 + a,//start position of curve.used in moveTo(sx,sy)
        sy: 235 + b,
        cp1x: 136 + c,//control point 1
        cp1y: 222 + d,
        cp2x: 136 + e,//control point 2
        cp2y: 222 + f,
        endx: 136 + g,//end points
        endy: 210 + h
    });
}

var hd =[];
function init(){//this function draws each hair/curve
        hd.push(new Hair(0, 0, 0, 0, 0, 0, 0, 0));
        layer.add(hd[0]);
        hd.push(new Hair(15, 0, 15, 0, 15, 0, 15, 0));
        layer.add(hd[1]);
        hd.push(new Hair(30, 0, 30, 0, 30, 0, 30, 0));
        layer.add(hd[2]);
        hd.push(new Hair(45, 0, 45, 0, 45, 0, 45, 0));
        layer.add(hd[3]);
        hd.push(new Hair(60, 0, 60, 0, 60, 0, 60, 0));
        layer.add(hd[4]);
        hd.push(new Hair(75, 0, 75, 0, 75, 0, 75, 0));
        layer.add(hd[5]);
        hd.push(new Hair(90, 0, 90, 0, 90, 0, 90, 0));
        layer.add(hd[6]);
        hd.push(new Hair(105, 0, 105, 0, 105, 0, 105, 0));
        layer.add(hd[7]);
        hd.push(new Hair(120, 0, 120, 0, 120, 0, 120, 0));
        layer.add(hd[8]);

    stage.add(layer);
}

    var bend1=0;
    var bend2=0;
    var bend3=0;
    var bend4=0;
    var bend5=0;
    var bend6=0;
    var bend7=0;
    var bend8=0;
    var bend9=0;

stage.on('mousemove', function() {
    var ref1=135;//this is ref point for  hair or curve no 1
    var ref2=150;//hair no 2 and so on
    var ref3=165;
    var ref4=180;
    var ref5=195;
    var ref6=210;
    var ref7=225;
    var ref8=240;
    var ref9=255;
    var pos = stage.getMousePosition();
    console.log("x="+pos.x+"&&"+"y="+pos.y)
    if(between(pos.x,115,270) && between(pos.y,205,236))
    {
        if(pos.x>=ref1 && pos.x<=145){bend1=(pos.x-ref1)*(2.2);}
        if(pos.x<=ref1 && pos.x>=125){bend1=(pos.x-ref1)*(2.2);}

        if(pos.x>=ref2 && pos.x<=160){bend2=(pos.x-ref2)*(2.2);}
        if(pos.x<=ref2 && pos.x>=140){bend2=(pos.x-ref2)*(2.2);}

        if(pos.x>=ref3 && pos.x<=175){bend3=(pos.x-ref3)*(2.2);}
        if(pos.x<=ref3 && pos.x>=155){bend3=(pos.x-ref3)*(2.2);}

        if(pos.x>=ref4 && pos.x<=190){bend4=(pos.x-ref4)*(2.2);}
        if(pos.x<=ref4 && pos.x>=170){bend4=(pos.x-ref4)*(2.2);}

        if(pos.x>=ref5 && pos.x<=205){bend5=(pos.x-ref5)*(2.2);}
        if(pos.x<=ref5 && pos.x>=185){bend5=(pos.x-ref5)*(2.2);}

        if(pos.x>=ref6 && pos.x<=220){bend6=(pos.x-ref6)*(2.2);}
        if(pos.x<=ref6 && pos.x>=200){bend6=(pos.x-ref6)*(2.2);}

        if(pos.x>=ref7 && pos.x<=235){bend7=(pos.x-ref7)*(2.2);}
        if(pos.x<=ref7 && pos.x>=215){bend7=(pos.x-ref7)*(2.2);}

        if(pos.x>=ref8 && pos.x<=250){bend8=(pos.x-ref8)*(2.2);}
        if(pos.x<=ref8 && pos.x>=230){bend8=(pos.x-ref8)*(2.2);}

        if(pos.x>=ref9 && pos.x<=265){bend9=(pos.x-ref9)*(2.2);}
        if(pos.x<=ref9 && pos.x>=245){bend9=(pos.x-ref9)*(2.2);}
    }
    hd.push(new Hair(0, 0, 0, 0, 0, 0, 0+bend1, 0));
    layer.add(hd[0]);
    hd.push(new Hair(15, 0, 15, 0, 15, 0, 15+bend2, 0));
    layer.add(hd[1]);
    hd.push(new Hair(30, 0, 30, 0, 30, 0, 30+bend3, 0));
    layer.add(hd[2]);
    hd.push(new Hair(45, 0, 45, 0, 45, 0, 45+bend4, 0));
    layer.add(hd[3]);
    hd.push(new Hair(60, 0, 60, 0, 60, 0, 60+bend5, 0));
    layer.add(hd[4]);
    hd.push(new Hair(75, 0, 75, 0, 75, 0, 75+bend6, 0));
    layer.add(hd[5]);
    hd.push(new Hair(90, 0, 90, 0, 90, 0, 90+bend7, 0));
    layer.add(hd[6]);
    hd.push(new Hair(105, 0, 105, 0, 105, 0, 105+bend8, 0));
    layer.add(hd[7]);
    hd.push(new Hair(120, 0, 120, 0, 120, 0, 120+bend9, 0));
    layer.add(hd[8]);
    stage.add(layer);
    console.log("bend1="+bend1);

});

function between(val, min, max) {
    return val >= min && val <= max;
}

window.onload = function() {
    init();
};

score 2 · Accepted Answer

問題：

ステージの mousemove イベントごとに 9 つの追加の Shape オブジェクトを追加しています。

つまり、数百 (数千) のヘアをすばやく作成できます。

髪の毛が 9 本しかない再設計から始めます。

mousemove イベント中は、で各ヘアの曲がりを変更することで応答しますdrawFunc。

[サンプルコードを含めるように編集]

マウスが上にあるかどうかを聞き取り、それに応じて曲がる「スマート」ヘアを作成できます。

その後、スマートヘアを必要な数だけ追加できます。

それぞれが適切に曲げるための十分な情報とコードを含んでいるため、彼らが何をしているかを追跡する必要はありません。

これは単なる説明用の例であるため、曲線を単純化して、下部が垂直で上部が「曲がっている」2 つの部分の線にしました。

ここに画像の説明を入力

カスタムヘアシェイプの描画関数を次に示します。線の上部は、マウスの位置に向かって「曲がっています」。マウスがヘア応答領域内で移動した場合、ヘアの endX プロパティが mouseX 位置に設定されます。これにより、ヘアが mouseX に向かって曲げられます。

drawFunc: function(canvas){

    if(mouseX>=this.attrs.respondLeft && mouseX<=this.attrs.respondRight){
        this.attrs.endX=mouseX;
    }
    var context = canvas.getContext();
    context.beginPath();
    context.moveTo(this.attrs.startX,this.attrs.bottomY);
    context.lineTo(this.attrs.startX,this.attrs.midY);
    context.lineTo(this.attrs.endX,this.attrs.topY);
    canvas.fillStroke(this);
},

マウスが髪の上を移動すると髪が曲がるようにするため、ステージに mousemove イベントハンドラーを追加します。マウスが移動すると、mouseX の位置が更新されます。髪が再描画されると、mouseX に曲げられます。

stage.on('mousemove', function() {

    // set the endX where the hair will bend to
    mouseX=stage.getMousePosition().x;

    // redraw the layer
    layer.draw();

});

以下の作業コードはもう少し複雑です。これは、各ヘアが自身の描画方法とヒットエリアに関する独自の情報を保存しているためです。

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/ey38w/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:300px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 300
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var mouseX;

    var hair1=addHair(100,200,20,150);
    var hair2=addHair(120,200,20,150);
    var hair3=addHair(140,200,20,150);
    layer.draw();

    function addHair(x,y,width,height){
        var shape=new Kinetic.Shape({
            drawFunc: function(canvas){

                if(mouseX>=this.attrs.respondLeft && mouseX<=this.attrs.respondRight){
                    this.attrs.endX=mouseX;
                }
                var context = canvas.getContext();
                context.beginPath();
                context.moveTo(this.attrs.startX,this.attrs.bottomY);
                context.lineTo(this.attrs.startX,this.attrs.midY);
                context.lineTo(this.attrs.endX,this.attrs.topY);
                canvas.fillStroke(this);
            },
            lineJoin: 'round',
            stroke: 'grey',
            strokeWidth: 12,
            respondWidth:width,
            respondLeft:x-width/2,
            respondRight:x+width/2,
            respondHeight:height,
            respondTop:y-100,
            topY:y-100,
            midY:y-50,
            bottomY:y,
            startX:x,
            endX:x
        });
        layer.add(shape);
        return(shape);
    }

    // "bend" when mouse is inside any hairs hit boundaries 
    stage.on('mousemove', function() {
        // set the endX where the hair will bend to
        mouseX=stage.getMousePosition().x;
        layer.draw();
    });


}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

【追加の激励の言葉】

このパターンはうまくいきます。

はい…ベジェ曲線でも。

ただし、これは自分のプロジェクトに合わせて調整する必要がある出発点にすぎません。

たとえば、元のコードでは、次の手順を実行しました

mousemove イベントをリッスンして処理します (移動関数)。
マウスの位置がヘアに影響するかどうかを決定します。
その場合は、コントロール + エンドポイント (init 関数) を再計算します。
ヘアを再描画します (新しいヘアを作成するのではなく、既存のヘアを再描画するだけでよいことがわかりました)。

これらのコードをこのパターンに変更してください。

いいえ、単にカットアンドペーストすることはできません。変更、改善、適応する必要があります。

まず、1 つのベジエヘアを好きなように動かします。

次に、前ではなく、次のヒントを参考にしてください。

ヘアごとに個別のキネティックシェイプを用意する代わりに、1 つのシェイプオブジェクトを作成し、その drawFunc ですべてのヘアを描画します。これはより高性能です。また、キャンバス全体ではなく、その 1 つの形状で mousemove をリッスンできます。繰り返しますが、より高性能です。

(1)実験 (2)テスト、(3)適応、(4)あきらめない、(5)#1を繰り返す。

score 0 · Accepted Answer

KineticJS はスプライントゥイーンをサポートするようになりました。これは、曲線に沿ってポイントを簡単にアニメーション化できることを意味します。この例をチェックしてください：

http://www.html5canvastutorials.com/labs/html5-canvas-animated-clown-face/

javascript - kineticjsでベジエ曲線に動きを追加する方法は?

2 に答える 2

Related

Reference