[英]How to create an object that can modify its original function call
我正在嘗試創建一個按鈕對象，該對象可以運行將更改按鈕顏色的類函數（在本例中為 show()）。 問題是我只能通過每次顏色改變時重復調用 show() 來做到這一點。 結果是在屏幕上繪制了大量按鈕，但我只想繪制一次按鈕。 有沒有解決的辦法？ （注意：我讓按鈕 x 位置增加以顯示正在創建的按鈕）
let canvas = document.getElementById("JScanvas"), c = canvas.getContext("2d"); let mousePosition = { x: 0, y: 0 }; // ignore, a few functions I might need for this to run function buildRect(fillColor, outlineColor, outlineSize, x, y, w, h) { if (fillColor && outlineColor) { c.beginPath(); c.rect(x, y, w, h); c.fillStyle = fillColor; c.fill(); c.lineWidth = outlineSize; c.strokeStyle = outlineColor; c.stroke(); } else if (fillColor && !outlineColor) { c.beginPath(); c.rect(x, y, w, h); c.fillStyle = fillColor; c.fill(); } else if (!fillColor && outlineColor) { c.beginPath(); c.rect(x, y, w, h); c.lineWidth = outlineSize; c.strokeStyle = outlineColor; c.stroke(); } } function write(str, x, y, color, txtSize, font) { let size = txtSize.toString(); c.font = size + "px" + " " + font; c.fillStyle = color; c.fillText(str, x, y); } // end of useless functions class button { // mouse is {canvs: canvas, mClicked: t/f, mPosition: mousePosition{x, y}} constructor(name, order, btnColor, x, y, w, h, txtColor, txtSize, m, f) { this.name = name; this.order = order; this.btnColor = btnColor; this.x = x; this.y = y; this.w = w; this.h = h; this.txtColor = txtColor; this.txtSize = txtSize; this.m = m; this.f = f; //change color when mouse over button this.m.canvs.addEventListener("mousemove", (event) => { console.log("hello there"); if (this.x < this.m.mPosition.x && this.m.mPosition.x < this.x + this.w && this.y < this.m.mPosition.y && this.m.mPosition.y < this.y + this.h) { if (this.btnColor[0] != "grey") { this.btnColor[0] = "grey"; this.x += 50; this.show(); } else { this.btnColor[0] = "red"; this.x += 50; this.show(); } } }); } show() { if (!this.btnColor[0] && !this.btnColor[0]) { buildRect("transparent", false, 1, this.x, this.y, this.w, this.h); } else if (!this.btnColor[0]) { buildRect(false, this.btnColor[1], 1, this.x, this.y, this.w, this.h); } else if (!this.btnColor[1]) { buildRect(this.btnColor[0], false, 1, this.x, this.y, this.w, this.h); } else { buildRect(this.btnColor[0], this.btnColor[1], 1, this.x, this.y, this.w, this.h); } c.fillStyle = this.txtColor; let theString = String(this.txtSize) + "px Arial"; c.font = theString; let width = Math.round(c.measureText(c.fillText(this.name, -1000, 0)).width); if (width > this.w) { let center = this.x + (this.w / 2); let newSize = this.w / width; c.font = String(this.txtSize * newSize); let newWidth = Math.round(newSize * width); c.textAlign = "center"; c.textBaseline = "middle"; c.fillText(this.name, this.x + (this.w / 2), this.y + (this.h / 2)); } else { c.textAlign = "center"; c.textBaseline = "middle"; c.fillText(this.name, this.x + (this.w / 2), this.y + (this.h / 2)); } } clickButton(mouseX, mouseY) { if (mouseX >= this.x && mouseX <= this.x + this.w && mouseY >= this.y && mouseY <= this.y + this.h) { return true; } else { return false; } } runf() { this.f(); } } //getting mouse position function getMousePos(canvas, evt) { const rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } canvas.addEventListener("mousemove", (evt) => { let r = getMousePos(canvas, event); mousePosition.x = rx, mousePosition.y = ry; }); let mouse = { canvs: canvas, mClicked: false, mPosition: mousePosition }; //button object to call: ("red" is the color of the button I am trying to change to grey) let cookie = new button("cookie", 1, ["red", false], 50, 100, 150, 50, "black", 30, mouse, 2); cookie.show();
<!DOCTYPE html> <html> <head> <title>Playground</title> </head> <body> <canvas width="1500" height="1500" id="JScanvas"></canvas> </body> </html>
我認為您的代碼過於復雜...
這是一個簡單的例子，當鼠標在矩形上時我們改變顏色
let canvas = document.getElementById("canvas") let c = canvas.getContext("2d"); class button { constructor(color, x, y, w, h) { this.color = color; this.x = x; this.y = y; this.w = w; this.h = h; } draw(mouse) { c.beginPath(); c.rect(this.x, this.y, this.w, this.h); if (mouse.x >= this.x && mouse.x <= this.x + this.w && mouse.y >= this.y && mouse.y <= this.y + this.h) { c.fillStyle = "gray"; } else { c.fillStyle = this.color; } c.fill(); } } function getMousePos(evt) { if (!evt) return { x: 0, y: 0 } const rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } let buttons = [] buttons.push(new button("red", 50, 100, 40, 20)) buttons.push(new button("blue", 100, 50, 40, 20)) canvas.addEventListener("mousemove", mainDraw); function mainDraw(evt) { let mouse = getMousePos(evt) c.clearRect(0, 0, canvas.width, canvas.height); buttons.forEach((btn) => { btn.draw(mouse) }) } mainDraw()
<canvas id="canvas" width="150" height="150"></canvas>
正如你所看到的，只有一個 addEventListener 並且它在類按鈕之外，邏輯很簡單，我們清理整個畫布並在每個事件上繪制所有內容......游戲就是這樣做的，我相信這會起作用你也在做什么。
無法使用對 function 的調用方法創建 object。 如何使用調用方法創建 object？
[英]Not able to create object using call method to the function. How can I create an object using call method?
有沒有辦法在函數調用中更改對對象的原始引用
[英]Is there a way to change the original reference to an object in a function call
Javascript＆Fabric js：在這種情況下，如何在函數之外調用對象？
[英]Javascript & Fabric js : how to call object outside its function in this case?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.