SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Looking for script to disable arrow button when object reaches the canvas edges

    Hello,

    I am using the HTML5 canvas element and an image object that I move around the canvas using the arrow buttons. I would like to be able to move the image around until it reaches the top, bottom, or sides of the canvas element. I know that I need to get the position of the x, y positions of the element. I'm just not sure about the logic to compare the elements location to the sides or top or bottom of the canvas. Furthermore, not sure how i would disable to arrow button to prevent me from arrowing the object outside of the canvas.

    I'm testing in IE

    My canvas width is 512 and canvas height is 480
    The object I'm moving around is an image.png that is 32 X 32

    I know this isn't much to go on, but I'm having difficulty coming up with how to ask the question.

    Thanks,
    Mike

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I wrote a little example script for bounding a few days ago for your previous post related to a similar thing, take a look at that and you should be able to figure it out quite easily. The principle is the same, but instead of just stopping the box from moving, you'll also disable a button.

    http://jsfiddle.net/9y5B2/
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •