움직이는 선 그리기를위한 가장 좋은 방법 JavaScript

Question

트위닝 기능에 대해 조금 읽은 후에 아래에서 제작 한 것과 비슷한 방식으로 선을 캔버스 요소에 전달하고 싶습니다.

http://jsfiddle.net/MjLdT/17/

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

var line = new Kinetic.Line({ 
    x: 100, 
    y: 100, 
    points: [0, 0, 0, 0], 
    stroke: '#000000' 
}); 

layer.add(line); 
stage.add(layer); 

var tween = new Kinetic.Tween({ 
    node: line, 
    duration: 3, 
    x: 800, 
    y: 100, 
    points: [-700, 0, 800, 0] 
}); 


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

은 결국 나는 사용자가 마우스 왼쪽 버튼을 클릭하여 선을 조작 할 수 있습니다하고자하고 라인까지 오른쪽 대각선, 마우스 오른쪽 버튼으로 클릭에 가서 선은 (수평 속도를 향해 대각선으로 내려갑니다 화면의 오른쪽은 동일하게 유지됩니다). 마우스 버튼을 놓으면 그 시간에 화면상의 '높이'에 상관없이 정상적인 수평 동작으로 돌아갑니다.

이것은 JavaScript 사용에 대한 나의 첫 번째 시도 중 하나이며, 내가 선택한 방법이 내가 성취하고자하는 목적에 적합한 지 궁금해하고있었습니다.

또한 마우스 효과를 시작하는 방법에 대한 모든 정보를 높이 평가할 수 있습니다.

Answer 1

이 방법이 적절하고 효과적입니다. Kinetic.Animation을 살펴보면 좀 더 깔끔한 코드를 얻을 수 있습니다. 애니메이션을 사용하면 재실행되는 코드에 더 많은 로직을 넣을 수 있습니다. 나는 트윈이 당신이하려고하는 것에 대해 제한 될 수 있다고 믿습니다.하지만 가능 합니다만, 애니메이션은 아마도 당신이 좋은 디자인을 목표로 삼고 있다면 당신이 찾고있는 것일 것입니다.

이 설명서를 읽었습니다. http://kineticjs.com/docs/Kinetic.Animation.html