问KineticJS和HTML
EN

Stack Overflow用户

提问于 2014-01-13 06:35:59

回答 1查看 90关注 0票数 1

我有一种情况，图像向左向右移动，反之亦然，在一定范围内，图像必须从舞台上隐藏(不可见)，当它们返回时，图像应该是可见的。我的孩子是这样的：

var tween = new Kinetic.Tween({
            node: puzzle, 
            duration: 22,
            x: puzzle.getX()+700,       
            easing: Kinetic.Easings.Linear,
            onFinish : function(){
                  this.reverse();
            }
});

任何人都请帮帮我。提前谢谢。

html

kineticjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-01-14 19:48:23

使用裁剪区域

您可以将您的益智对象放在一个组上，并在该组上设置一个剪辑区域。

当您的拼图移出组的剪辑区域时，它将不会显示。

演示：http://jsfiddle.net/m1erickson/hzTM7/

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

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

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

    var group=new Kinetic.Group({
        clip:{x:50,y:50,width:100,height:100},
    });
    layer.add(group);

    var bk=new Kinetic.Rect({
        x:50,
        y:50,
        width:100,
        height:100,
        fill:"blue",
        opacity:0.10,
    });
    group.add(bk);


    var circle1 = new Kinetic.Circle({
        x:70,
        y:70,
        radius: 15,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
    });
    group.add(circle1);
    layer.draw();

    var tween = new Kinetic.Tween({
                node: circle1, 
                duration: 2,
                x: circle1.getX()+120,       
                easing: Kinetic.Easings.Linear,
                onFinish : function(){
                      this.reverse();
                }
    });

    $("#myButton").click(function(){ tween.play(); });

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

</script>       
</head>

<body>
    <button id="myButton">Tween</button>
    <div id="container"></div>
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21085241

复制

相似问题

问KineticJS和HTML
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问KineticJS和HTMLEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问KineticJS和HTML
EN