第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

JS - 刪除相同類型的每個對象

JS - 刪除相同類型的每個對象

偶然的你 2022-08-04 09:15:31
我正在編寫一個畫布游戲作為學(xué)校項目，我已經(jīng)為“按鈕”對象創(chuàng)建了一個構(gòu)造函數(shù)，如下所示：// 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;    }}現(xiàn)在我遇到了一個我不知道如何解決的問題，那就是如何刪除已經(jīng)創(chuàng)建的每個按鈕？我需要這個，因為當我更改屏幕（例如從主菜單到角色創(chuàng)建者）時，按鈕仍然存在并且可單擊。我試圖創(chuàng)建某種數(shù)組，在其中我將保存所有按鈕對象，然后循環(huán)該數(shù)組刪除數(shù)組的每個元素。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];}現(xiàn)在我已經(jīng)到了我沒有想法的地步，我的谷歌fu不夠強大。感謝您的幫助或建議。
查看完整描述

3 回答

?
互換的青春

TA貢獻1797條經(jīng)驗 獲得超6個贊

您可以按按鈕來消除不需要的按鈕，并重新分配給數(shù)組。.filter


刪除所有您可以通過分配：blank arraybuttons = []


要獲得唯一的按鈕，您可以創(chuàng)建一個唯一的功能。


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}::$`;

  };

}


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);


查看完整回答
反對 回復(fù) 2022-08-04
?
天涯盡頭無女友

TA貢獻1831條經(jīng)驗 獲得超9個贊

以下是我的做法：


<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>

將注意力集中在
加載圖像時調(diào)用，每次單擊畫布時也會調(diào)用它。function draw()

在每次繪制時，我們都會擦除整個畫布并再次繪制它，這可能聽起來很多，但在現(xiàn)代瀏覽器上，這種情況發(fā)生得如此之快，以至于您看不到任何閃爍。

我創(chuàng)建了一個數(shù)組，單擊時，我在隨機位置添加一個新對象，第四次單擊時，我將刪除所有紅色對象，并在連續(xù)單擊時添加新對象。objects = []

有人建議從畫布上清除矩形部分，但這會導(dǎo)致問題，因為你可以看到我也畫了一個背景圖像，如果我清除一個部分，它也可以清除背景，而不是最好的行為，我相信你的形狀會變得更加復(fù)雜。

關(guān)鍵是要清除整個畫布并再次繪制所有內(nèi)容。

考慮到這一點，您需要對觸發(fā)刪除的事件所執(zhí)行的所有操作只需循環(huán)訪問數(shù)組并刪除不需要的那些。


查看完整回答
反對 回復(fù) 2022-08-04
?
慕工程0101907

TA貢獻1887條經(jīng)驗 獲得超5個贊

元素本身只是一個位圖，不提供有關(guān)任何繪制對象的信息。[來源 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API]canvas

您不能“選擇”，然后從畫布中清除對象。而是使用該方法從畫布中清除矩形區(qū)域。clearRect

檢查堆棧閃電戰(zhàn)以獲取工作示例 https://stackblitz.com/edit/js-j81gxm?file=index.js

我又向按鈕類添加了兩個屬性

  1. 描邊寬度 - 描邊的寬度始終添加到矩形的尺寸中。例如：如果矩形的寬度和筆觸為1px，則矩形的有效寬度變?yōu)? + 100 + 1 = 102px?？梢允褂?strokeWidth 屬性來設(shè)置變量 strokeWidth，并將其用作函數(shù)的參考remove

  2. 活動按鈕 - 跟蹤按鈕是否處于活動狀態(tài)

在類上引入了一種方法 此方法將刪除矩形區(qū)域并將按鈕標記為非活動狀態(tài)removebutton

deleteBtns函數(shù)將過濾掉按鈕數(shù)組，同時調(diào)用單個按鈕的 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 ();


查看完整回答
反對 回復(fù) 2022-08-04
  • 3 回答
  • 0 關(guān)注
  • 165 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號