Question

在Flash CC中编写HTML 5 Canvas时，我遇到了一些问题，主要原因是缺乏在Flash中编写JavaScript的信息。

我一直在将现有的拖放功能转换为HTML 5，希望能够兼容iOS和Android。它已经在使用鼠标功能，但我试图添加触摸支持时遇到了障碍。

我能够记录触摸事件的唯一方法是通过聆听整个窗口，当我有多个我要移动的部分时这不是很有用。

这是我到目前为止，所有这些代码都位于主场景时间轴的第一帧，场景由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); 这使得所有触摸事件都作为鼠标事件响应。并解决了我的所有问题。

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

1 个答案: