如何在 kineticjs 中为贝塞尔曲线添加动作？

Question

我在没有动力学的情况下完成了这项工作。这段代码可以按我的意愿工作。 --fiddle without kineticjs. Take a look

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

线条根本不动？我哪里错了？我花了一整天但无法弄清楚问题所在。

这是我的带有 kinetic.results 的 javascript 在小提琴中看不到，因为没有包含 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 部分线，底部垂直，顶部“弯曲”。

这是自定义头发形状的绘制函数。线的顶部向鼠标位置“弯曲”。如果鼠标已移动到毛发响应区域内，则毛发 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 根贝塞尔头发按你喜欢的方式工作。

那么——不是之前，接受这个提示：

创建一个 Shape 对象并在它的 drawFunc 中绘制所有头发，而不是为每根头发单独创建一个 Kinetic Shape。这更高效。此外，您可以在那个形状而不是整个画布上监听 mousemove。同样，性能更高。

最重要的是——学习！：（1）实验（2）测试，（3）适应，（4）不要放弃，（5）重复#1。

Answer 2

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

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