使用javascript和kinetic.js在畫布上平滑滾動

Question

我想重建這個頁面： http ：//www.zahia.com/#/en/artistes在javascript和canvas中使用kinetic.js。

因此我需要畫布舞台相對於我的鼠標位置滾動。 現在我得到了一個有點不同的解決方案，即使使用setTimeout或更小的偏移步也使我的kinetic.js崩潰。

我目前的代碼：

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();
    });

任何想法我如何使這個相對滾動工作？

Answer 1

問題

請記住，鼠標懸停每秒發射10-30次。

因此，您的代碼每秒添加10-30個新的setTimeout回調。

這很快就會陷入崩潰。

一個解決方案

聽聽舞台上的鼠標移動。

將包含粉紅色面板的圖層偏移超過鼠標距離以創建視差效果。

這是代碼和小提琴： 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