Using AppMobi and Events

I am new to the new AppMobi world, so can you please help me.

I have created an image object and have drawn it to the stage. My problem is that I want to add an event to object.

I have set the image using:

function objImage(imageURL,x,y,width,height) {
    this.imgCanvas = new Image();
    this.imageURL = imageURL;
    this.loaded = false;
    this.x = x;
    this.y = y;
    this.height = height;
    this.width = width;
    
    this.draw = function() {
        
        if (this.width == null || this.height == null)
        {
            ctx.drawImage(this.imgCanvas,this.x,this.y); 
        }
        else
        {
            ctx.drawImage(this.imgCanvas,this.x,this.y,this.width,this.height);         
        }
    }
}

And I have drawn it to stage:

var usercontrols_left = new objImage('images/left.png',10,HEIGHT-100,50,50);
usercontrols_left.draw();

Now I want to add an event to ‘usercontrols_left’, for example to detect when a user touches/clicks it.

Answer

I can’t tell if you’re using directCanvas or not. I believe this solution should work either way.

Capture the touchstart event and sense if it is in the location of your left element by it’s coordinates. If it is, then execute the commands that need to be fired.

Pseudo code:

Canvas.addEventListener('touchstart', startTouch, false);

function startTouch(){
    if(touch.x<60&&touch.x>10&&touch.y<height-50&&touch.y>height-100)
     { handleLeftControl(); }
}

EDIT* Example of using webview instead: In the webview you’d have:

<div id="Leftbutn" ontouchstart="AppMobi.canvas.execute('switchCommand('leftBTNdown');')" ontouchend="AppMobi.canvas.execute('switchCommand('leftBTup');')" ></div>

Then in the directCanvas side you just handle those commands by what you want to do in a switch or function.