1

I'm using code adapted from the YUI3 documentation example to animate a graphic along a curved path.

The full canvas size is intentionally pretty huge - definitely larger than most screens - so the graphic will run out of viewport space pretty quickly and animate off the screen.

Instead, I'd like browser viewport to follow or centre on the image so that it stays 'in shot'.

Is there a YUI fuelled way of doing this? Or something simpler?

Jon Hadley
  • 5,196
  • 8
  • 41
  • 65

1 Answers1

0

You could do something like this, basically just makes sure the viewport is always tracking an object on the canvas by taking into account the canvas coordinates in relation to the page.

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

    window.scrollTo(trackX, trackY);

}

Live Demo

​

Loktar
  • 34,764
  • 7
  • 90
  • 104
  • Thanks @Loktar. If I don't receive any better answers I'll accept yours, it seems to work well. I've actually gone with jQuery in the end - YUI was overkill for the animation. I've opened a similar question here: http://stackoverflow.com/questions/12403453/ – Jon Hadley Sep 13 '12 at 09:42