触摸事件未注册 HTML5 Canvas 使用 Flash CC 创作

Question

我在 Flash CC 中创作 HTML 5 Canvas 时遇到了一些问题，主要是因为缺少有关在 Flash 中编写 JavaScript 的信息。

我一直在将现有的拖放 .fla 转换为 HTML 5，希望使其与 iOS 和 Android 兼容。它已经可以使用鼠标运行，但我在尝试添加触摸支持时遇到了障碍。

我什至能够注册触摸事件的唯一方法是监听整个 window，当我有多个要移动的部分时，这不是很有用。

这就是我目前所拥有的，所有这些代码都位于主场景时间轴的第一帧上，场景由 5 个部分和这些部分的 5 个目标以及一个弹出任务组成完成框和重置按钮。

this.stop();
MainStage = this;//Declare 

//*********************
//Actual Drag and Dropping

// Initialize:
var numPieces = 5;//<---------------Place number of pieces HERE---------------
var homePosX = [];
var homePosY = [];
var correctAns = 0;
var isClickableAry = [];
var whoAmI = [];//Declared "Globally" so that I can identify which piece is being grabbed later

for (var i = 0; i < numPieces; i++)
{
    var pieceName = "p" + (i + 1);
    var piece = this[pieceName];
    //This sets the starting position for each piece    
    homePosX[i+1] = piece.x;//(i+1) is so that Piece names line up with Target names and MC names
    homePosY[i+1] = piece.y;
    whoAmI[i] = piece;
    isClickableAry[i] = 1;//Makes it so each pieces is set as clickable



if( piece ){
    piece.name = pieceName;
    piece.on("mousedown" || "touchstart", function(evt)
    {
        evt.preventDefault();
//Debug
        console.log(checkPiece(this));
//Rather than adding and removing event listeners, just check to see if piece is clickable
    if(isClickableAry[checkPiece(this)] == 1){

        this.parent.addChild(this);// Bump to top
        this.offset = {x:this.x - evt.stageX, y:this.y - evt.stageY};
//Debug
        console.log(piece + "PICKED UP, X " + piece.x + ", Y " + piece.y + " is Clickable? ");
        //Set Home Coordinates (Where it was picked up)
        homeX = this.x;
        homeY = this.y;
    }
});
piece.on("touchmove",function(evt)
{

        console.log("touch moved! " + touchobj);

        evt.preventDefault();
});

piece.on("pressmove", function(evt)
{
    if(isClickableAry[checkPiece(this)] == 1){
        this.x = evt.stageX + this.offset.x;
        this.y = evt.stageY + this.offset.y;

        //Mouse Cursor change
        document.body.style.cursor='move';
    }
});
piece.on("pressup" || "touchend" || "touchcancel", function(evt)
{
    var target = this.parent["t"+this.name.substr(1)];
    //Reset Cursor
    document.body.style.cursor='auto';

    if( target && hitTestInRange( target, 60) && isClickableAry[checkPiece(this)] == 1 ){
        this.x = target.x;
        this.y = target.y;
        //If it is correct add one
        correctAns++;
        //Make that button Unclickable
        isClickableAry[checkPiece(this)] = 0;

        if(correctAns >= numPieces){

            //If they have answered correctly equal to the the number of pieces
            MainStage.complete_mc.parent.addChild(MainStage.complete_mc);//Bump to top
            MainStage.complete_mc.gotoAndStop(1);
            //reset answer counter and make drag pieces and buttons unclickable
            correctAns = 0;
//Debug             
            console.log(correctAns + "CORRECT!";)
        }


        }else{
            //Return to home Coordinates (Where it was on intialization)
            if(isClickableAry[checkPiece(this)] == 1){
                this.x = homePosX[checkPiece(this)+1];
                this.y = homePosY[checkPiece(this)+1];
            }
        }
    });
    piece.on("mouseover", function(evt)
    {
        if(isClickableAry[checkPiece(this)] == 1){
            //Makes cursor a pointer finger
            document.body.style.cursor='pointer';
        }
    });

    piece.on('mouseout',function(evt)
    {
        //sets cursor back to normal
        document.body.style.cursor='auto';
    });

}
}
function hitTestInRange( target, range )
{
if( target.x > stage.mouseX - range &&
target.x < stage.mouseX + range &&
target.y > stage.mouseY - range &&
target.y < stage.mouseY + range )
{
return true;
}
return false;
}
//Check which piece it is
function checkPiece(checkName)
{
for (var i = 0; i < numPieces; i++)
{
    if (checkName == whoAmI[i]){
    return i;
    }
}
}


//Reset Functionality

this.complete_mc.reset_btn.addEventListener("click", resetPos.bind(this));

function resetPos(){
for (var i = 0; i < numPieces; i++)
    {
        var pieceName = "p" + (i + 1);
        var piece = this[pieceName];
        correctAns = 0;
        //Makes Pieces Grabable again
        isClickableAry[i] = 1;          
        //This returns each piece to their Original Starting Positions          
        piece.x = homePosX[i+1];
        piece.y = homePosY[i+1];
    }
}

//Controlling the Pop Up Window, window pops up when user answers everything correctly 
this.complete_mc.exitComplete_btn.addEventListener("click", closePopUp.bind(this));
this.complete_mc.exitComplete_btn_alt. addEventListener("click", closePopUp.bind(this));

function closePopUp(){
MainStage.complete_mc.gotoAndStop(0);
}

在我自己解决其他问题时，通常问题与函数或变量的范围有关，因为当 Flash 导出文件时，它会生成自己的 .js 文件并转换所有影片剪辑分成代码，并将您编写的代码分隔在您编写代码的任何框架上。
任何帮助都将不胜感激。

编辑：经过更多研究后，我认为问题可能与触摸事件只能针对单独的元素有关？所以它不能仅抓取 canvas 元素内的对象 canvas 元素本身？

Answer 1

事实证明，添加触摸支持非常容易。我所缺少的只是一行代码 createjs.Touch.enable(stage); 这使得所有触摸事件响应为鼠标事件。并解决了我所有的问题。

触摸事件未注册 HTML5 Canvas 使用 Flash CC 创作

Touch Events not registering for HTML5 Canvas Authoring using Flash CC

javascript

html

flash

canvas

createjs