Kinetic.js 트위닝 이미지가 전혀 아닙니다. 잘못하고있는 이미지가 무엇인지 확실하지 않습니다.

이미지 트윈이 천천히 왼쪽에 있습니다. 내가 알 수있는 한, 코드는 정확합니다. 이미지가로드되지만 동작이 없습니다. 코드와Kinetic.js 트위닝 이미지가 전혀 아닙니다. 잘못하고있는 이미지가 무엇인지 확실하지 않습니다.

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

    var imageObj = new Image(); 
    imageObj.onload = function() { 
    var space = new Kinetic.Image({ 
     x: 0, 
     y: 0, 
     image: imageObj, 
     width: 1920, 
     height: 1080 
    }); 

    // add the shape to the layer 
    layer.add(space); 

    // add the layer to the stage 
    stage.add(layer); 
    }; 
    imageObj.src = 'http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png'; 
    var tween = new Kinetic.Tween({ 
    node: space, 
    duration: 20, 
    x: -1920, 
    y: 0, 
    }); 
    setTimeout(function() { 
    tween.play(); 
    }, 2000);

출처

2014-02-27 JSArrakis

몇 가지 범위 지정 문제 :

당신의 공간과 트윈 변수는
이미지를로드하는 데 시간이 걸릴 것 때문에 범위 (현재 .onload에 숨겨진)에 있는지 확인, 당신은 imageObj.onload에 트윈을 시작해야

코드는하고 데모 : http://jsfiddle.net/m1erickson/JT2cD/

<!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:500px; 
    height:500px; 
} 
</style>   
<script> 
$(function(){ 

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

    var space; 
    var tween; 

    var imageObj = new Image(); 
    imageObj.onload = function() { 
     space = new Kinetic.Image({ 
     x: 0, 
     y: 0, 
     image: imageObj, 
     width: 1920/4, 
     height: 1080/4 
     }); 

     // add the shape to the layer 
     layer.add(space); 

     // add the layer to the stage 
     stage.add(layer); 

     tween = new Kinetic.Tween({ 
     node: space, 
     duration: 20, 
     x: -1920/4, 
     y: 0, 
     }); 

     setTimeout(function(){ tween.play(); }, 2000); 

    }; 
    imageObj.src = 'http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png'; 

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

</script>  
</head> 
<body> 
    <div id="container"></div> 
</body> 
</html>

출처

2014-02-27 22:45:02 markE

대단합니다 ... 항상 감사합니다.>> 그리고 지금해야 할 일은 크롬에서 번역을 부드럽게 만드는 방법을 찾는 것입니다. 너 어떻게 할 수 있겠 니? – JSArrakis

Kinetic.js 트위닝 이미지가 전혀 아닙니다. 잘못하고있는 이미지가 무엇인지 확실하지 않습니다.

답변

관련 문제