使用javascript和kinetic.js在画布上平滑滚动

Question

I want to rebuild this page: http://www.zahia.com/#/en/artistes in javascript and canvas using kinetic.js. 我想重建这个页面： http ：//www.zahia.com/#/en/artistes在javascript和canvas中使用kinetic.js。

Therefore I need the canvas stage to scroll relative to my mouse-position. 因此我需要画布舞台相对于我的鼠标位置滚动。 Now I got just a solution which works a little bit different and makes my kinetic.js crash even with setTimeout or smaller offset steps. 现在我得到了一个有点不同的解决方案，即使使用setTimeout或更小的偏移步也使我的kinetic.js崩溃。

My current code: 我目前的代码：

stage.on('mouseover', function(){
        var pos=stage.getMousePosition();
        var mouseX=parseInt(pos.x);
        var offset = stage.getOffsetX();

        while(mouseX > 800){
            setTimeout(function(){
                offset += 20;
                stage.setOffsetX(offset);
            },500);

        }
        while(mouseX < 200){
            offset -= 2;
            stage.setOffsetX(offset);
            pos=stage.getMousePosition();
            mouseX=parseInt(pos.x);
        }
        //stage.draw();
    });

Any ideas how i can make this relative scroll work? 任何想法我如何使这个相对滚动工作？

Answer 1

The Problem 问题

Keep in mind that mouseover is being fired 10-30 times per second. 请记住，鼠标悬停每秒发射10-30次。

Therefore your code is adding 10-30 new setTimeout callbacks each second. 因此，您的代码每秒添加10-30个新的setTimeout回调。

This quickly cascades into a crash. 这很快就会陷入崩溃。

One solution 一个解决方案

Listen for mousemoves on the stage. 听听舞台上的鼠标移动。

Offset a layer containing your pink panels by more than the mousemove distance to create a parallax effect. 将包含粉红色面板的图层偏移超过鼠标距离以创建视差效果。

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/9bqrC/ 这是代码和小提琴： http ： //jsfiddle.net/m1erickson/9bqrC/

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

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

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

    // listen for mousemoves on container1
    // create a "parallax" movement of layer by
    // moving the layer more than the mousemove
    $(stage.getContent()).on('mousemove', function (event) {
        var pos=stage.getMousePosition();
        var mouseX=parseInt(pos.x);
        var mouseY=parseInt(pos.y);
        layer.setX(-mouseX/.5);
        layer.draw();
    });

    // create 12 panels (0-11)
    for(var i=0;i<12;i++){
        addPanel(i*50,"blue"+i);
    }
    layer.draw();


    function addPanel(x,id){

        var rect = new Kinetic.Rect({
            id:"blue"+id,
            x: x,
            y: 0,
            width: 50,
            height: 200,
            fill: 'pink',
            stroke: 'lightgray',
            strokeWidth: 3
        });
        rect.number=i;
        rect.on("click",function(){
            $("#results").text("You clicked panel#"+rect.number);
        });
        layer.add(rect);

        var text= new Kinetic.Text({
            x:i*50+(i<10?20:10),
            y:0,
            fontSize:30,
            text:i,
            fill:"white"
        });
        layer.add(text);

    }


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

</script>       
</head>

<body>
    <h3>Drag the mouse to view panels in parallax</h3>
    <h3>Click on a panel to trigger its own click event</h3>
    <p id="results">Results</p>
    <div id="container1"></div>
</body>
</html>

使用javascript和kinetic.js在画布上平滑滚动

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-10-15 18:08:20

使用javascript和kinetic.js在画布上平滑滚动

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-10-15 18:08:20

解决方案1
2 已采纳 2013-10-15 18:08:20