更改光标在上卷中的指针HTML5画布与Flash CC

问题描述:

我工作在FLASH CC增加了一些互动性的一些按钮的HTML5画布文件内。该功能的伟大工程,但我无法弄清楚如何在JS添加到它添加一个过渡,这样,当按钮被翻过身出现handcursor /指针。更改光标在上卷中的指针HTML5画布与Flash CC

我知道如何通过buttonMode在AS3中做到这一点,但我是JS的总Noob。

下面是我目前在HTMl5 canvas文档中按钮的代码,在此先感谢您的帮助!

var frequency = 1; 
stage.enableMouseOver(frequency); 

this.btn_yes.addEventListener("click", clickYes.bind(this)); 
this.btn_no.addEventListener("click", clickNo.bind(this)); 

this.btn_yes.addEventListener("mouseover", MouseOverYes); 
this.btn_yes.addEventListener("mouseout", MouseOutYes); 

this.btn_no.addEventListener("mouseover", MouseOverNo); 
this.btn_no.addEventListener("mouseout", MouseOutNo); 

function clickYes() 
    { 
     this.gotoAndPlay("chooseYes"); 
    } 


function clickNo() 
    { 
     this.gotoAndPlay("no"); 
    } 


function MouseOverYes() 
    { 
     this.btn_yes.style.cursor = 'pointer'; 
    } 


function MouseOutYes() 
    { 
     this.btn_yes.style.cursor = 'default'; 
    } 

function MouseOverNo() 
    { 
     this.btn_no.style.cursor = 'pointer'; 
    } 


function MouseOutNo() 
    { 
     this.btn_no.style.cursor = 'default'; 
    } 
+0

http://*.com/questions/12608729/cursorpointer-on-hover-html5-canvas-element HTTP ://*.com/questions/10665862/how-to-make-clickable-points-in-html5-canvas 你可以检查这些了。 – dcclassics

也许试试这个。

stage.enableMouseOver(); 
var root = this; 
root.theButtonName.cursor = "pointer"; 

stage.canvas.style.cursor =“default”;

将设置鼠标光标移动到它的正常状态。

stage.canvas.style.cursor =“none”;

这将使鼠标光标消失,现在严重缺乏关于一切的文档。试图在Flash canvas中寻找一个好的编码资源。如果你找到一个请让我知道。

@ user3570797 如果您使用的是FlashCC,可以通过创建按钮符号来轻松完成。试试这样:http://grab.by/Ktw2

然后通过名称通过'ExportRoot'对象引用这些按钮并将事件处理程序附加到这些按钮。

实施例:

function init() { 
canvas = document.getElementById("canvas"); 
exportRoot = new lib.Button(); 

stage = new createjs.Stage(canvas); 
stage.addChild(exportRoot); 
stage.update(); 
stage.enableMouseOver(); 

var yesBtn = exportRoot.yesBtn; 
var noBtn = exportRoot.noBtn; 
yesBtn.addEventListener("click", handleClick); 
noBtn.addEventListener("click", handleClick); 

createjs.Ticker.setFPS(lib.properties.fps); 
createjs.Ticker.addEventListener("tick", stage); 

}

function handleClick(event) { 
//doSomething... 

}