Question

我没有动力学就完成了这项工作。这段代码就像我想要的那样工作。 --fiddle without kineticjs. Take a look

现在我想用kineticjs做同样的代码。这是我到目前为止所做的--fiddle with kineticjs。

这些线路根本不会移动？我哪里出错？我已经度过了整整一天但却找不到问题。

这是我的kavascript与kinetic.results无法在小提琴中看到因为没有选择包括kineticjs.虽然我已经把我的代码放在那里。欢迎任何帮助。

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();
};

Answer 1

问题：

您正在为每个阶段的mousemove事件添加9个额外的Shape对象。

这意味着你可以快速创造数百（数千）根头发。

从重新设计开始，你只有9根头发。

在mousemove事件期间，您可以通过更改drawFunc中每个头发的弯曲来做出回应。

[已编辑包含示例代码]

您可以创建一个“智能”头发，该头发可以监听鼠标是否在其上并相应地弯曲。

然后你可以根据需要添加任意数量的智能头发。

您无需跟踪他们正在做什么，因为每个人都包含足够的信息+代码以便正确弯曲。

由于这仅仅是一个教学示例，我将曲线简化为2部分线，底部垂直，顶部“弯曲”。

enter image description here

这是自定义头发形状的绘制功能。线的顶部朝向鼠标位置“弯曲”。如果鼠标已在毛发响应区域内移动，则毛发endX属性将设置为mouseX位置。这会导致头发向鼠标X弯曲。

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位置会更新。当头发重新绘制时，它会弯曲到鼠标X.

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>

[鼓励的其他词语]

此模式适合您。

是的......即使是你的bezier曲线。

但这只是一个必须根据自己的项目进行调整的起点。

例如，在您的原始代码中，您完成了这些步骤

收听mousemove事件并处理它们（您的移动功能），
确定鼠标位置是否会影响您的头发，
如果是，请重新计算控制+结束点（您的初始化函数）。
重绘头发（现在你只知道重新绘制现有的头发 - 不创建新的头发），

所以将这些代码片段修改为这种模式！

不，你不能只是剪切和粘贴。你将不得不修改，改进，适应。

首先，让Bezier的头发按你喜欢的方式工作。

然后 - 不是之前，请接受这个提示：

不是为每根头发设置单独的动态形状，而是创建一个Shape对象并在其drawFunc中绘制所有头发。这样性能更高。此外，您可以在该一个形状而不是整个画布上侦听鼠标移动。再次，更高效。

最重要的是 - 学习！:( 1）实验（2）测试，（3）适应，（4）不要放弃，（5）在＃1重复。

Answer 2

KineticJS现在支持Spline补间，这意味着您可以轻松地为曲线上的点设置动画。看看这个例子：

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

如何在kineticjs中添加运动到贝塞尔曲线？

2 个答案: