javascript - 使用 AppMobi 和事件

Question

我是新 AppMobi 世界的新手，请您帮助我。

我创建了一个图像对象并将其绘制到舞台上。我的问题是我想向对象添加一个事件。

我已经使用以下方法设置了图像:

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);         
        }
    }
}

我把它画到了舞台上:

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

现在我想向“usercontrols_left”添加一个事件，例如检测用户何时触摸/单击它。

Answer 1

我不知道你是否使用directCanvas。我相信这个解决方案无论哪种方式都应该有效。

捕获 touchstart 事件并通过坐标感知它是否位于左侧元素的位置。如果是，则执行需要触发的命令。

伪代码:

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

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

编辑* 使用 webview 的示例: 在 WebView 中，您将拥有:

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

然后在 directCanvas 端，您只需通过您想要在开关或函数中执行的操作来处理这些命令。