0

我想问你是否可以缩放 - 对画布中 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

4

1 回答 1

0

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

像 KineticJS 中的大多数对象一样，blob 对象可以使用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）。

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

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

    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>
于 2013-07-18T17:28:45.010 回答