我正在创建一个WebGL帆布,我正在尝试使用OnMouseMove片段为MovieClip按钮创建翻转。
首先,我设置按钮的滚动状态,要像这样不可见:
this.YesHOT.setVisible(false);
然后,我使用onmousemove函数使其在按钮上像这样时可见:
canvas.onmousemove = function(e) {
var boundingRect = this.Yes.getBounds(this);
if(isMouseOverSymbol(e.offsetX, e.offsetY, boundingRect)) {
this.YesHOT.setVisible(true);
}
}.bind(this);
//Function to check whether the specified point lies within the rect.
function isMouseOverSymbol(pointX, pointY, rect) {
if(rect.left <= pointX && pointX <= rect.left + rect.width)
if(rect.top <= pointY && pointY <= rect.top + rect.height)
return true;
return false;
}
可行的
,但随后滚动状态保持可见,不会关闭。我该如何使其退缩?
您实际上从未进行this.YesHOT.setVisible(false)
调用。如果我了解您的意图,则代码应该有点像这样:
canvas.onmousemove = function(e) {
var boundingRect = this.Yes.getBounds(this);
// if mouse cursor is over the "hot" area, show effect. Otherwise hide.
this.YesHOT.setVisible(isMouseOverSymbol(e.offsetX, e.offsetY, boundingRect));
}.bind(this);
// also hide the effect when mouse completely leaves the canvas
canvas.onmouseleave = function () {
this.YesHOT.setVisible(false);
}.bind(this);