触摸事件未注册使用 Flash CC 的 HTML5 画布创作

Posted 2023-03-05

【中文标题】触摸事件未注册使用 Flash CC 的 HTML5 画布创作

【英文标题】：Touch Events not registering for HTML5 Canvas Authoring using Flash CC

【发布时间】：2015-08-08 08:31:18

【问题描述】：

在 Flash CC 中创作 html 5 Canvas 时，我遇到了一些问题，主要是由于缺乏在 Flash 中编写 javascript 的信息。

我一直在将现有的拖放 .fla 转换为 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 文件并将所有电影剪辑转换为代码并按您编写的框架分隔您编写的代码。 任何帮助都将不胜感激。

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

【参考方案1】：

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