javascript - 如何在屏幕外或项目上的中心视口(viewport)中跟踪 YUI 驱动的动画？

Question

我正在使用改编自 YUI3 的代码 documentation example沿着弯曲路径为图形设置动画。

整个 Canvas 尺寸故意设置得相当大 - 绝对比大多数屏幕都大 - 因此图形将很快耗尽视口(viewport)空间并在屏幕上显示动画。

相反，我希望浏览器视口(viewport)跟随图像或以图像为中心，以便它保持“在镜头中”。

是否有 YUI 驱动的方法可以做到这一点？或者更简单的东西？

Answer 1

你可以做这样的事情，基本上只是通过考虑与页面相关的canvas坐标来确保视口(viewport)始终跟踪canvas上的对象.

function track(x,y, offsetX, offsetY){
    var trackX = x - (canvas.offsetLeft + offsetX);
        trackY = y - (canvas.offsetTop + offsetY);

    window.scrollTo(trackX, trackY);

}

<强> Live Demo

​