Làm cho di chuyển Rect mịn hơn

Question

Tôi muốn làm cho "hoạt hình" của Rect của tôi mịn hơn. Hiện tại nó thực sự là clunky. Tôi biết lý do cho nó. Một trong các tọa độ trở thành giá trị mong muốn trước kia.

Ví dụ: nếu tôi hiện đang ở (0,0) và tôi cần phải đi đến (150,75) và tôi tăng từng giây một lần, dây y sẽ sớm hơn x-dây nhiều.

var canvas = document.getElementById('canvas'); 
 
var ctx = document.getElementById('canvas').getContext('2d'); 
 

 
var aniTimer; 
 

 
var x; 
 
var y; 
 

 
var tx = tx || 0; 
 
var ty = ty || 0; 
 

 
var xDir; 
 
var yDir; 
 

 
function followMouse(e) { 
 
    x = e.offsetX; 
 
    y = e.offsetY; 
 
    cancelAnimationFrame(aniTimer); 
 
    moveObject(); 
 
} 
 

 
function moveObject() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    
 
    if (x < tx) { 
 
    xDir = -1; 
 
    } else { 
 
    xDir = 1; 
 
    } 
 
    if (y < ty) { 
 
    yDir = -1; 
 
    } else { 
 
    yDir = 1; 
 
    } 
 
    tx = tx != x ? tx + xDir : tx; 
 
    ty = ty != y ? ty + yDir : ty; 
 
    
 
    
 
    ctx.fillRect(tx - 25 , ty + 25, 50, 10); 
 
    if (tx != x || ty != y) { 
 
    aniTimer = window.requestAnimationFrame(moveObject); 
 
    } 
 
} 
 

 
function resizeCanvas() { 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight; 
 
}; 
 

 
canvas.addEventListener('mousemove', _.throttle(function(e) { 
 
    followMouse(e); 
 
}, 100)); 
 

 
window.addEventListener('resize', resizeCanvas, false); 
 

 
resizeCanvas();

html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
canvas { 
 
    display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<canvas id="canvas"></canvas>

Answer 1

Đó là bởi vì bạn thiết lập dir [+ -1, + -1] thay vì [dx, dy] (sự dịch chuyển thực tế), mà không phải lúc nào tỷ lệ thuận.

Hãy nhìn vào đoạn chỉnh sửa:

var canvas = document.getElementById('canvas'); 
 
var ctx = document.getElementById('canvas').getContext('2d'); 
 

 
var x; 
 
var y; 
 

 
var tx = tx || 0; 
 
var ty = ty || 0; 
 

 
var xDir; 
 
var yDir; 
 

 
function followMouse(e) { 
 
    x = e.pageX; 
 
    y = e.pageY; 
 
    moveObject(); 
 
} 
 

 
function moveObject() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    var scale = 0.2 * Math.max(canvas.width, canvas.height); 
 
    xDir = (x - tx)/scale; 
 
    yDir = (y - ty)/scale; 
 
    tx = tx != x ? tx + xDir : tx; 
 
    ty = ty != y ? ty + yDir : ty; 
 

 

 
    ctx.fillRect(tx - 25, ty + 25, 50, 10); 
 
    if (tx != x || ty != y) { 
 
    window.requestAnimationFrame(moveObject); 
 
    } 
 
} 
 

 
function resizeCanvas() { 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight; 
 
}; 
 

 
canvas.addEventListener('mousemove', _.throttle(function(e) { 
 
    followMouse(e); 
 
}, 100)); 
 

 
window.addEventListener('resize', resizeCanvas, false); 
 

 
resizeCanvas();

html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
canvas { 
 
    display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<canvas id="canvas" style="border: 1px solid black"></canvas>