html5 画布导航栏的对象数组

Posted

技术标签:

【中文标题】html5 画布导航栏的对象数组【英文标题】:array of objects for an html5 canvas nav bar 【发布时间】:2018-10-27 15:51:24 【问题描述】:

我有一个 html5 Canvas 动画,我正在 Adob​​e Animate 上制作并使用一些代码进行调整。

我在动画中有一部分就像一个组合框,其中包含用于浏览不同帧的所有链接。问题是,我不想为许多按钮创建一堆 EventListener,因为根据经验,我知道这不太好用。所以我在想一个更有创意的解决方案。这是我的想法。

    创建一个包含所有按钮的数组。 为每个目标帧分配一个变量。 创建一个 for 循环,其中包含一个函数,将侦听器分配给选定的按钮,然后将其指向所需的帧(变量)

这是我目前得到的,(不多)

    var combobox = [this.btncasco , this.btnbanyera , this.btnLumbrera , this.btnproapopa, this.btnestriborbabor ];


for (var i=0; i<combobox.length; i++) 
var clipcasco = gotoAndStop(0);
var clipbanyera = gotoAndStop(2);
var cliplumbera = gotoAndStop(4);
var clipproapoa = gotoAndStop(6);
var clipestriborbabor = gotoAndStop(8);


    

这可行吗?

【问题讨论】:

【参考方案1】:

在您的示例中,您只是分配 gotoAndStop 的结果(没有范围,因此您很可能在控制台中遇到错误)

我认为您正在寻找这样的东西:

for (var i=0; i<combobox.length; i++) 

  // This is kind of complex, but if you just reference "i" in your callback
  // It will always be combobox.length, since it references the value of i
  // after the for loop completes variable.
  // So just store a new reference on your button to make it easy
  combobox[i].index = i*2; // x2 lines up with your code 0,2,4,etc.

  // Add a listener to the button
  combobox[i].on("click", function(event) 
    // Use event.target instead of combobox[i] for the same reason as above.
    event.target.gotoAndStop(event.target.index);
  


您可能会遇到与未定义按钮的其他 *** 帖子相同的问题(检查控制台)。实际上,目前 Animate 导出中存在一个错误,即剪辑的子项立即 不可用。为了解决这个问题,您可以在开始时调用this.gotoAndStop(0); 以强制它更新孩子。

【讨论】:

以上是关于html5 画布导航栏的对象数组的主要内容,如果未能解决你的问题,请参考以下文章

在画布中随机生成对象,不重复或重叠

在 html5 中的 fabric.js 画布上一次删除多个对象

NIB 中的导航项始终为零

获取地址栏的key-value形式的值(包括重复的key值)形成对象--重复的变成数组形式

如何在 HTML5 画布上逐个像素地绘制

如何在画布上制作 HTML5 可拖动对象?