JS - 删除相同类型的每个对象

Question

我正在编写一个画布游戏作为学校项目，我已经为“按钮”对象创建了一个构造函数，如下所示：// button object constructorfunction button(xL, xR, yT, yB) {    this.xLeft = xL;    this.xRight = xR;    this.yTop = yT;    this.yBottom = yB;    this.width = xR - xL;    this.height = yB - yT;    this.drawMe = function() {        neonWariorPlayArea.context.strokeStyle = "blue";        neonWariorPlayArea.context.beginPath();        neonWariorPlayArea.context.rect(this.xLeft, this.yTop, this.width, this.height);        neonWariorPlayArea.context.stroke();    }}button.prototype.clicked = function() {    if (this.xLeft <= mouseX && mouseX <= this.xRight && this.yTop <= mouseY && mouseY <= this.yBottom) {        return true;    }}现在我遇到了一个我不知道如何解决的问题，那就是如何删除已经创建的每个按钮？我需要这个，因为当我更改屏幕（例如从主菜单到角色创建者）时，按钮仍然存在并且可单击。我试图创建某种数组，在其中我将保存所有按钮对象，然后循环该数组删除数组的每个元素。var buttons = new Array();playBtn = new button(500, 650, 50, 100);tutorialBtn = new button(500, 760, 110, 160);scoreBtn = new button(500, 670, 180, 230);buttons.push(playBtn, tutorialBtn, scoreBtn);function deleteBtns() {    buttons.forEach(iterate);}function iterate(item, index) {    console.log(index);    delete buttons[index];}现在我已经到了我没有想法的地步，我的谷歌fu不够强大。感谢您的帮助或建议。

Answer 1

您可以按按钮来消除不需要的按钮，并重新分配给数组。.filter

删除所有您可以通过分配：blank arraybuttons = []

要获得唯一的按钮，您可以创建一个唯一的功能。

function unique(buttons) {

  let set = new Set();

  let filtedBtns = [];

  buttons.forEach((btn) => {

    if (!set.has(btn.toString())) {

      filtedBtns.push(btn);

      set.add(btn.toString());

    }

  });

  return filtedBtns;

}

var buttons = new Array();

function button(x, y, a, b) {

  this.x = x;

  this.y = y;

  this.a = a;

  this.b = b;

  this.toString = () => {

    return `${x}::${y}::${a}::${b}`;

  };

}

playBtn = new button(500, 650, 50, 100);

tutorialBtn = new button(500, 760, 110, 160);

duplicateBtn = new button(500, 760, 110, 160);

scoreBtn = new button(500, 670, 180, 230);

buttons.push(playBtn, tutorialBtn, duplicateBtn, scoreBtn);

function unique() {

  let set = new Set();

  let filtedBtns = [];

  buttons.forEach((btn) => {

    if (!set.has(btn.toString())) {

      filtedBtns.push(btn);

      set.add(btn.toString());

    }

  });

  return filtedBtns;

}

function deleteBtns(index) {

  buttons = buttons.filter((_, i) => i !== index);

}

function deleteAll() {

  buttons = [];

}

console.log(buttons);

deleteBtns(1);

buttons = unique(buttons)

console.log(buttons);

deleteBtns(1);

console.log(buttons);

deleteAll();

console.log(buttons);

基于类的方法：

class Button {

  constructor(x, y, a, b) {

    this.x = x;

    this.y = y;

    this.a = a;

    this.b = b;

  }

  toHash() {

    return `${this.x}::${this.y}::${this.a}::${this.b}`;

  }

}

class Buttons {

  constructor(...btns) {

    this.buttons = btns;

  }

  unique() {

    let set = new Set();

    let filtedBtns = [];

    this.buttons.forEach((btn) => {

      if (!set.has(btn.toHash())) {

        filtedBtns.push(btn);

        set.add(btn.toHash());

      }

    });

    this.buttons = filtedBtns;

  }

  deleteBtns(index) {

    this.buttons = this.buttons.filter((_, i) => i !== index);

  }

  deleteAll() {

    this.buttons = [];

  }

}

let playBtn = new Button(500, 650, 50, 100);

let tutorialBtn = new Button(500, 760, 110, 160);

let duplicateBtn = new Button(500, 760, 110, 160);

let scoreBtn = new Button(500, 670, 180, 230);

const btns = new Buttons(playBtn, tutorialBtn, duplicateBtn, scoreBtn);

console.log(btns.buttons);

btns.unique(); // update unique

console.log(btns.buttons);

btns.deleteBtns(1); // delete by index

console.log(btns.buttons);

btns.deleteAll(); // delete all

console.log(btns.buttons);

Answer 2

以下是我的做法：

<canvas id=canvas width=350 height=180></canvas>

<script>

    function object(x, y, c) {

        this.x = x;

        this.y = y;

        this.color = c

        this.draw = function () {

            context.fillStyle = this.color;

            context.beginPath();

            context.arc(this.x, this.y, 10, 0, 2 * Math.PI, false)

            context.fill();

        }

    }

    var canvas = document.getElementById('canvas')

    var context = canvas.getContext('2d')

    var img = new Image;

    img.onload = draw;

    img.src = "http://i.stack.imgur.com/UFBxY.png";

    var objects = []

    objects.push(new object(200, 100, "blue"));

    objects.push(new object(250, 90, "cyan"));

    function draw() {

        context.clearRect(0, 0, canvas.width, canvas.height)

        context.drawImage(img, 0, 0);

        objects.forEach(o => o.draw());

    }

    canvas.onclick = function (e) {

        objects.push(new object(Math.random()*200, Math.random()*100, "red"));

        if (objects.length > 5)

            objects = objects.filter(o => o.color != "red");

        draw()

    }

</script>

将注意力集中在
加载图像时调用，每次单击画布时也会调用它。function draw()

在每次绘制时，我们都会擦除整个画布并再次绘制它，这可能听起来很多，但在现代浏览器上，这种情况发生得如此之快，以至于您看不到任何闪烁。

我创建了一个数组，单击时，我在随机位置添加一个新对象，第四次单击时，我将删除所有红色对象，并在连续单击时添加新对象。objects = []

---

有人建议从画布上清除矩形部分，但这会导致问题，因为你可以看到我也画了一个背景图像，如果我清除一个部分，它也可以清除背景，而不是最好的行为，我相信你的形状会变得更加复杂。

关键是要清除整个画布并再次绘制所有内容。

考虑到这一点，您需要对触发删除的事件所执行的所有操作只需循环访问数组并删除不需要的那些。

Answer 3

元素本身只是一个位图，不提供有关任何绘制对象的信息。[来源 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API]canvas

您不能“选择”，然后从画布中清除对象。而是使用该方法从画布中清除矩形区域。clearRect

检查堆栈闪电战以获取工作示例 https://stackblitz.com/edit/js-j81gxm?file=index.js

我又向按钮类添加了两个属性

1. 描边宽度 - 描边的宽度始终添加到矩形的尺寸中。例如：如果矩形的宽度和笔触为1px，则矩形的有效宽度变为1 + 100 + 1 = 102px。可以使用 strokeWidth 属性来设置变量 strokeWidth，并将其用作函数的参考remove

2. 活动按钮 - 跟踪按钮是否处于活动状态

在类上引入了一种方法 此方法将删除矩形区域并将按钮标记为非活动状态removebutton

deleteBtns函数将过滤掉按钮数组，同时调用单个按钮的 remove 方法。

const canvas = document.getElementById('app');

var neonWariorPlayArea = canvas.getContext("2d");

function button(xL, xR, yT, yB) {

    this.xLeft = xL;

    this.xRight = xR;

    this.yTop = yT;

    this.yBottom = yB;

    this.width = xR - xL;

    this.height = yB - yT;

    this.active = true;

    this.strokeWidth = 1;

    this.drawMe = function() {

        neonWariorPlayArea.strokeStyle = "green";

        neonWariorPlayArea.beginPath();

        neonWariorPlayArea.rect(this.xLeft, this.yTop, this.width, this.height);

        neonWariorPlayArea.stroke();

    }

}

button.prototype.clicked = function() {

    if (this.xLeft <= mouseX && mouseX <= this.xRight && this.yTop <= mouseY && mouseY <= this.yBottom && this.active ) {

        return true;

    }

}

button.prototype.remove = function() {

    this.active = false;

    neonWariorPlayArea.clearRect ( this.xLeft-this.strokeWidth, this.yTop-this.strokeWidth, this.width+this.strokeWidth*2, this.height+this.strokeWidth*2 );

}

var buttons = new Array();

const playBtn = new button(0, 50, 0, 50);

const tutorialBtn = new button(50, 100, 50, 100);

const scoreBtn = new button(100, 100, 50, 50);

playBtn.drawMe ();

tutorialBtn.drawMe ();

scoreBtn.drawMe ();

buttons.push(playBtn, tutorialBtn, scoreBtn);

function deleteBtns() {

    buttons = buttons.filter ( btn => {

      btn.remove ();

      return false;

    })

}

deleteBtns ();