HTML5Canvas，记住最后一个可见的实例

Posted 2023-02-16

【中文标题】HTML5Canvas，记住最后一个可见的实例

【英文标题】：HTML5Canvas, remembering the last instance made visible

【发布时间】：2021-03-17 15:46:44

【问题描述】：

我想在html5Canvas 环境下的Adobe Animate 中做一个简单的任务。舞台上有几个按钮，旁边有相应的圆形符号实例，这些实例在开始时是不可见的。当我单击一个按钮时，可以看到一个相邻的圆圈。然后，如果我随机点击另一个按钮，它的相邻圆圈是可见的，但之前可见的圆圈必须再次变为不可见，因为在任何给定时间应该只有一个圆圈可见。

作为一个简单的解决方案，我从 4 个实例开始：button_1、button_2、circle_1、circle_2。当我第一次单击任何按钮时，我计划将圆实例的名称存储在一个名为“存储”的变量中。然后将该信息传递给下一个按钮的鼠标单击事件，以使前一个圆形实例再次不可见。我的菜鸟代码是这样的……

/*Made circles invisible at the beginning*/
this.circle_1.visible = false;
this.circle_2.visible = false;

/*button's click events*/

var _this = this;
_this.button_1('click', function()
_this.cicle_1.visible = true;
store.visible = false; /*make the previous circle invisible if any*/
var store = this.circle_1; /*updating current circle's name in variable 'store'*/
);

var _this = this;
_this.button_2.on('click', function()
_this.circle_2.visible = true;
store.visible = false; /*make the previous circle invisible if any*/
var store = this.circle_2; /*updating current circle's name in variable 'store'*/
);

/* It also works if I can make all circles instances invisible and then show the intended one during every click event, but how can I get and set 20+ circle instances invisible in one step? */

但是，代码不起作用。我没有编程经验，所以我的逻辑可能很可笑，但这是我能想到的最简单的解决方案。也许我应该全局声明我的变量？任何人都可以改进此代码或使其工作吗？请不要For-i 或Array 解决方案，因为它让我头晕目眩:) 提前致谢。

【参考方案1】：

欢迎使用 Javscript！我可以告诉你你想要做什么，但是你犯了一些错误，对于刚开始的人来说很容易犯。

在实际使用var store = this.circle_1 声明变量之前，您正在访问store 变量。使用var 关键字将在其“范围”的顶部声明一个变量，无论它声明了该范围的哪一行，let 将在您指定的行上声明它。无论哪种方式，任何变量的存在都不会存在于其范围之外。范围由一组花括号 组成，这意味着您声明了store，但是当您离开花括号时，它会立即被删除。像下面这样的东西可以解决这个问题：

/*
    A variable declared in one scope is available to all scopes inside it.
    By declaring 'store' outside of any scope/curly braces, it will be accessible from anywhere in the code
*/
var store = this.circle_1; // you store either circle here. I'm just using circle_1 as a placeholder

//rest of code

this.button_1('click', function()
    store.visible = false;
    store = this.circle_1;
    this.circle_1.visible = true; //make circle 1 visible
);

我觉得你有点想多了（没关系，它确实发生了），如果你只有 2 个圈子，有一个更简单的方法，我将在下面发布。

您似乎也忘记了 this.button_1 事件声明中的 on 关键字。

您正在重新声明 _this，这在第一次是不必要的，更不用说两次了。代码var _this = this; 将this 的引用存储在一个名为_this 的新变量中，基本上只是重命名它，并没有做任何其他事情。

我对 Adob​​e Animate 的 javascript 风格了解不多，但我会尝试以我认为应该适用于 Animate 的方式修改您的原始 JavaScript。

如果你只有 2 个圆圈，下面的代码是最简单的方法

//Made circles invisible at the beginning
this.circle_1.visible = false;
this.circle_2.visible = false;

//button's click events
this.button_1.on('click', function()
    this.circle_1.visible = true; //make circle 1 visible
    this.circle_2.visible = false; //make the other circle invisible
);

this.button_2.on('click', function()
    this.circle_2.visible = true;
    this.circle_1.visible = false;
);

让我知道它是否有效，或者如果您在浏览器中运行它，请按F12 > 点击Console，如果有任何错误，请告诉我。

如果您想要任意数量的圆圈，那么您所说的“数组解决方案”将是最好的。数组和循环非常基础，一旦开始就很容易理解（尽管语法看起来很吓人）。如果您打算继续学习编程，那可能是您接下来要学习的东西。

【讨论】：

非常感谢 Zach 的详细解释！实际上，_this 是由 Adob​​e Animate 代码向导放置的，而不是我。显然直接使用“this”会产生未定义按钮的错误。我认为这是由于使用了 HTML5Canvas 模式，而不是 Actionscript 3.0。但是，好消息是，您的第一个解决方案奏效了！但稍作修改后。我不得不带回 var _this = this;我必须在 var store = _this.circle1; 之前使用它并在“this”之前加一个_。此外，我猜正确的顺序消除了共享“this”的两个 Var 值之间的冲突。再次感谢，你拯救了我的一天！

没问题。我在这里找到了一些关于为什么我们需要在 Animate 中重新声明 this 的信息：community.adobe.com/t5/animate/…。您仍然应该只需要在顶部声明一次，因为当我们使用 var 时，它会将所有声明移动到顶部（除非 Animate 对代码做了一些非常奇怪的事情）

【参考方案2】：

您可能存在可变可见性问题。在函数中声明 var 不应允许其他代码段达到该 var 的值。相反，您应该在外面声明该 var 并在那里存储一个 null，然后像 if (store) store.visible=false; 一样调用。因此，只需将 var store 移到两个函数之外，并在它们内部引用 store 即可。