从班级属性访问画布，仅适用于第二个对象

发布于 2025-01-26 03:57:08 字数 913 浏览 0 评论 0原文

我正在研究火车站控制面板的模拟。我用站和交互元素的地图创建了画布。我决定创建带有火车信号的课程，以节省代码行。看起来像这样：

class enterSignal{
    constructor(status, position, x, y, canvas){ //status and position are not used yet
        this.ctx1 = canvas.getContext('2d');
        this.ctx1.beginPath();
        this.ctx1.arc(x, y, 5, 0, 2 * Math.PI);
        this.ctx1.fillStyle = "rgb(109, 109, 109)";
        this.ctx1.fill();
    } 
    goAhead(){
        this.ctx1.fillStyle = 'green';
        this.ctx1.fill();
    }
}

goahead（）方法将ctx1画布的颜色更改为绿色（对火车驱动程序的向前信号）。主要问题是，当我创建两个EnterSignal类的对象并运行goahead（）单个对象的方法，它仅适用于最后一个对象。例如：

var enterSignal1 = new enterSignal("red", "left", 50, 190, canvas);
var enterSignal2 = new enterSignal("red", "right", 930, 150, canvas);
enterSignal1.goAhead();

它会影响EnterSignal2而不是EnterSignal1。

那么问题在哪里？

原文

I'am working on simulation of train station control panel. I created canvas with map of station and interactive elements. I decided to create class with signals for trains to save lines of code. It looks like this:

class enterSignal{
    constructor(status, position, x, y, canvas){ //status and position are not used yet
        this.ctx1 = canvas.getContext('2d');
        this.ctx1.beginPath();
        this.ctx1.arc(x, y, 5, 0, 2 * Math.PI);
        this.ctx1.fillStyle = "rgb(109, 109, 109)";
        this.ctx1.fill();
    } 
    goAhead(){
        this.ctx1.fillStyle = 'green';
        this.ctx1.fill();
    }
}

The goAhead() method changes color of ctx1 canvas to green (go ahead signal for train driver). The main problem is when I create two objects of enterSignal class and run goAhead() method for single object it works only for last object. For example:

var enterSignal1 = new enterSignal("red", "left", 50, 190, canvas);
var enterSignal2 = new enterSignal("red", "right", 930, 150, canvas);
enterSignal1.goAhead();

It affects on enterSignal2 instead of enterSignal1.

So where is the problem?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别挽留 2025-02-02 03:57:08

这是另一种方法...
就像他们在评论中提到的一样，我们重新绘制了元素。

class enterSignal {
  constructor(color, x, y, canvas) {
    this.ctx1 = canvas.getContext('2d');
    this.x = x
    this.y = y
    this.draw(color)
  }
  draw(color) {
    this.ctx1.beginPath();
    this.ctx1.arc(this.x, this.y, 8, 0, 2 * Math.PI);
    this.ctx1.fillStyle = color;
    this.ctx1.fill();
  }
}

const canvas = document.getElementById("c");
var enterSignal1 = new enterSignal("red", 10, 10, canvas);
var enterSignal2 = new enterSignal("red", 20, 30, canvas);
var enterSignal3 = new enterSignal("red", 30, 50, canvas);
enterSignal1.draw("green");
enterSignal2.draw("yellow");

<canvas id="c"></canvas>

Here is another way...
just like they mentioned in the comments, we re-draw the element.

class enterSignal {
  constructor(color, x, y, canvas) {
    this.ctx1 = canvas.getContext('2d');
    this.x = x
    this.y = y
    this.draw(color)
  }
  draw(color) {
    this.ctx1.beginPath();
    this.ctx1.arc(this.x, this.y, 8, 0, 2 * Math.PI);
    this.ctx1.fillStyle = color;
    this.ctx1.fill();
  }
}

const canvas = document.getElementById("c");
var enterSignal1 = new enterSignal("red", 10, 10, canvas);
var enterSignal2 = new enterSignal("red", 20, 30, canvas);
var enterSignal3 = new enterSignal("red", 30, 50, canvas);
enterSignal1.draw("green");
enterSignal2.draw("yellow");