Question

我想问你是否可以扩展 - 在画布上Blob对象的高度/宽度上补间？诀窍是根据每个点的初始位置重新定义每个点？期望的效果是看Blob以某个因子值（即10％）展开/缩回。谢谢。

代码：

for(var i=0 ; i<shape_childs.length ; i++){
var child = shape_childs[i]; 
var height=child.getHeight(); 
child.blobTween = new Kinetic.Tween({ 
    node: child, 
    duration: 1, 
    height:height+(height*0.20), 
    easing: Kinetic.Easings.Linear 
}); 
}

这是一个小提琴:) jsfiddle.net/3VCKJ/1

Answer 1

正如@Ani所说，欢迎来到Stackoverflow。显示您的代码是传统的，所以我们可以为您提供帮助。

blob对象与KineticJS中的大多数对象一样，可以使用myShape.setScale进行缩放。

在您的情况下，您还可以在补间内设置所需的缩放系数：

  var tween = new Kinetic.Tween({
    node: blob, 
    duration: 1,
    scaleX: 1.1,
    scaleY: 1.1
  });

[给予额外评论的更改]

看起来你希望blob在缩放时保持原始的x / y。

要做到这一点，你还需要在缩放时补间你的blob的x / y：

    var tweenUp = new Kinetic.Tween({
      node: blob, 
      duration: 1,
      scaleX: 1.10,
      scaleY: 1.10,
      x:blob.getX()-(blob.getWidth()*.10),
      y:blob.getY()-(blob.getHeight()*.10)
    });

不幸的是，KineticJS blob.getWidth和blob.getHeight不返回值（仅为0）。

所以我们需要估计斑点的宽度和高度。

您可以尝试通过考虑张力（此处未显示）来优化此计算。

    var blobPoints=[{x: x_r-60, y: y_r}, {x: x_r, y: y_r+35}, {x: x_r+60, y: y_r}, {x: x_r, y: y_r-55}]
    var minX=1000000;
    var minY=1000000;
    var maxX=-100;
    var maxY=-100;
    for(var i=0;i<blobPoints.length;i++){
        var pt=blobPoints[i];
        console.log(pt.x+"/"+pt.y);
        if(pt.x<minX){minX=pt.x;}
        if(pt.x>maxX){maxX=pt.x;}
        if(pt.y<minY){minY=pt.y;}
        if(pt.y>maxY){maxY=pt.y;}
    }

然后将blob宽度和高度属性设置为我们的计算值：

    blob.setWidth(maxX-minX);
    blob.setHeight(maxY-minY);

现在补间应该将blob缩放1.10，同时保持相对相同的x / y。

这是代码和小提琴：http://jsfiddle.net/m1erickson/XWvSP/

<!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.4.min.js"></script>

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

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

    var sc_height = 300;
    var sc_width = 300;

    var x_r=(sc_width/2)-(40/2);
    var y_r=(sc_height/2)-(40/2);

    var blobPoints=[{x: x_r-60, y: y_r}, {x: x_r, y: y_r+35}, {x: x_r+60, y: y_r}, {x: x_r, y: y_r-55}]
    var minX=1000000;
    var minY=1000000;
    var maxX=-100;
    var maxY=-100;
    for(var i=0;i<blobPoints.length;i++){
        var pt=blobPoints[i];
        console.log(pt.x+"/"+pt.y);
        if(pt.x<minX){minX=pt.x;}
        if(pt.x>maxX){maxX=pt.x;}
        if(pt.y<minY){minY=pt.y;}
        if(pt.y>maxY){maxY=pt.y;}
    }

    var blob = new Kinetic.Blob({
      points: blobPoints,
      stroke: 'red',
      strokeWidth: 10,
      fill: '#faa',
      tension: 1.2,
      scale: 1,
      x: 20,
      y: 50
    });
    blob.setWidth(maxX-minX);
    blob.setHeight(maxY-minY);
    layer.add(blob);
    layer.draw();

    var tweenUp = new Kinetic.Tween({
      node: blob, 
      duration: 1,
      scaleX: 1.10,
      scaleY: 1.10,
      x:blob.getX()-(blob.getWidth()*.10),
      y:blob.getY()-(blob.getHeight()*.10)
    });

    $("#scaleup").click(function(){ tweenUp.play(); });
    $("#scaledown").click(function(){ tweenUp.reverse(); });

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

</script>       
</head>

<body>
    <div id="container"></div>
    <button id="scaleup">Tween Scale Up</button>
    <button id="scaledown">Tween Scale Down</button>
</body>
</html>

KineticJS：Blob缩放

1 个答案: